@@ -365,6 +365,70 @@ describe('processSrcSetSync', () => {
365
365
processSrcSetSync ( 'https://anydomain/image.jpg' , ( { url } ) => url ) ,
366
366
) . toBe ( source )
367
367
} )
368
+
369
+ test ( 'should not break URLs with commas in srcSet' , async ( ) => {
370
+ const source = `
371
+ \thttps://example.com/dpr_1,f_auto,fl_progressive,q_auto,w_100/v1/img 1x,
372
+ \thttps://example.com/dpr_2,f_auto,fl_progressive,q_auto,w_100/v1/img\t\t2x
373
+ `
374
+ const result =
375
+ 'https://example.com/dpr_1,f_auto,fl_progressive,q_auto,w_100/v1/img 1x, https://example.com/dpr_2,f_auto,fl_progressive,q_auto,w_100/v1/img 2x'
376
+ expect ( processSrcSetSync ( source , ( { url } ) => url ) ) . toBe ( result )
377
+ } )
378
+
379
+ test ( 'should not break URLs with commas in image-set-options' , async ( ) => {
380
+ const source = `url(https://example.com/dpr_1,f_auto,fl_progressive,q_auto,w_100/v1/img) 1x,
381
+ url("https://example.com/dpr_2,f_auto,fl_progressive,q_auto,w_100/v1/img")\t\t2x
382
+ `
383
+ const result =
384
+ 'url(https://example.com/dpr_1,f_auto,fl_progressive,q_auto,w_100/v1/img) 1x, url("https://example.com/dpr_2,f_auto,fl_progressive,q_auto,w_100/v1/img") 2x'
385
+ expect ( processSrcSetSync ( source , ( { url } ) => url ) ) . toBe ( result )
386
+ } )
387
+
388
+ test ( 'should parse image-set-options with resolution' , async ( ) => {
389
+ const source = ` "foo.png" 1x,
390
+ "foo-2x.png" 2x,
391
+ "foo-print.png" 600dpi`
392
+ const result = '"foo.png" 1x, "foo-2x.png" 2x, "foo-print.png" 600dpi'
393
+ expect ( processSrcSetSync ( source , ( { url } ) => url ) ) . toBe ( result )
394
+ } )
395
+
396
+ test ( 'should parse image-set-options with type' , async ( ) => {
397
+ const source = ` "foo.avif" type("image/avif"),
398
+ "foo.jpg" type("image/jpeg") `
399
+ const result = '"foo.avif" type("image/avif"), "foo.jpg" type("image/jpeg")'
400
+ expect ( processSrcSetSync ( source , ( { url } ) => url ) ) . toBe ( result )
401
+ } )
402
+
403
+ test ( 'should parse image-set-options with linear-gradient' , async ( ) => {
404
+ const source = `linear-gradient(cornflowerblue, white) 1x,
405
+ url("detailed-gradient.png") 3x`
406
+ const result =
407
+ 'linear-gradient(cornflowerblue, white) 1x, url("detailed-gradient.png") 3x'
408
+ expect ( processSrcSetSync ( source , ( { url } ) => url ) ) . toBe ( result )
409
+ } )
410
+
411
+ test ( 'should parse image-set-options with resolution and type specified' , async ( ) => {
412
+ const source = `url("picture.png")\t1x\t type("image/jpeg"), url("picture.png")\t type("image/jpeg")\t2x`
413
+ const result =
414
+ 'url("picture.png") 1x type("image/jpeg"), url("picture.png") type("image/jpeg") 2x'
415
+ expect ( processSrcSetSync ( source , ( { url } ) => url ) ) . toBe ( result )
416
+ } )
417
+
418
+ test ( 'should capture whole image set options' , async ( ) => {
419
+ const source = `linear-gradient(cornflowerblue, white) 1x,
420
+ url("detailed-gradient.png") 3x`
421
+ const expected = [
422
+ 'linear-gradient(cornflowerblue, white)' ,
423
+ 'url("detailed-gradient.png")' ,
424
+ ]
425
+ const result : string [ ] = [ ]
426
+ processSrcSetSync ( source , ( { url } ) => {
427
+ result . push ( url )
428
+ return url
429
+ } )
430
+ expect ( result ) . toEqual ( expected )
431
+ } )
368
432
} )
369
433
370
434
describe ( 'flattenId' , ( ) => {
0 commit comments