-
Notifications
You must be signed in to change notification settings - Fork 24
/
Copy pathresponsive_images.js
1156 lines (969 loc) · 39.6 KB
/
responsive_images.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
// [responsive-images]
// Uncomment the previous line for testing on webpagetest.org
return JSON.stringify({
'responsive-images': (() => {
const imgs = [ ...document.querySelectorAll( 'img' ) ];
return imgs.map( ( img ) => getImgData( img ) );
})(),
});
// take a CSS length (as a String)
// return a Number of CSS pixels
//
function resolveLength( cssLengthString ) {
let cleanup = false,
myHTML;
if ( !document.documentElement ) {
myHTML = document.createElement( 'html' );
document.appendChild( myHTML );
cleanup = true;
}
const testDiv = document.createElement( 'div' );
testDiv.style.fontSize = 'initial';
testDiv.style.boxSizing = 'border-box';
document.documentElement.appendChild( testDiv );
testDiv.style.width = cssLengthString;
const width = testDiv.getBoundingClientRect().width;
testDiv.remove();
if ( cleanup ) {
myHTML.remove();
}
return width;
}
// determine if the user agent will pick a <source> with a given type="${mimeTypeString}"
// takes a String
//
// I was trying to do this the "right" way, but async code and promises got involved, and I give up and am going to hardcode
// source: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/common/mime_util/mime_util.cc;l=164;drc=c14f6f4b9c44fe479a8d004576b42723b2a5feb6;bpv=0;bpt=1
function matchType( mimeTypeString ) {
const supportedTypes = [
"image/jpeg",
"image/pjpeg",
"image/jpg",
"image/webp",
"image/png",
"image/apng",
"image/gif",
"image/bmp",
"image/vnd.microsoft.icon", // ico
"image/x-icon", // ico
"image/x-xbitmap", // xbm
"image/x-png",
"image/avif" // enabled for both desktop and mobile now (2021-06-29), phew
];
return supportedTypes.includes( mimeTypeString.toLowerCase() );
}
// the candidate <source> elements of a given <picture>
// takes an <img> Element
// returns a plain ol' Array of <source> Elements
function pictureSources( img ) {
// all <source>s that are direct children of the <picture> and come BEFORE the <img>
// https://twitter.com/zcorpan/status/1409778636153032706
if ( img.parentNode.tagName !== "PICTURE" ) {
throw 'pictureSources( img ) was fed an img that was not the direct child of a picture'
}
const picture = img.parentNode;
let candidates = [];
for ( let i = 0; i < picture.children.length; i++ ) {
if ( picture.children[ i ] === img ) {
break;
}
if ( picture.children[ i ].tagName === "SOURCE" ) {
candidates.push( picture.children[ i ] );
}
}
return candidates;
}
// What are the srcset and sizes attributes currently in effect for a given <img>?
// (in case they are being supplied by a picture > source sibling)
// takes <img> Element
// returns { srcset: [String or null], sizes: [String or null] }
function winningSrcsetAndSizes( img ) {
if ( img.parentNode.tagName === "PICTURE" ) {
const picture = img.parentNode,
sources = pictureSources( img );
for ( const source of sources ) {
let mediaMatches = true,
typeMatches = true;
if ( source.hasAttribute( 'media' ) ) {
mediaMatches = window.matchMedia( source.getAttribute( 'media' ) );
}
if ( source.hasAttribute( 'type' ) ) {
typeMatches = matchType( source.getAttribute( 'type' ) );
}
if ( mediaMatches && typeMatches ) {
return {
srcset: source.getAttribute('srcset'),
sizes: source.getAttribute('sizes'),
isFromSource: true
};
}
}
} // end if picture
return {
srcset: img.getAttribute('srcset'),
sizes: img.getAttribute('sizes'),
isFromSource: false
};
}
// How many unique candidate resources does this <img> have?
// takes <img> Element
// returns a Number
function totalNumberOfCandidates( img ) {
const candidateURLs = new Set();
if ( img.hasAttribute( 'src' ) ) {
candidateURLs.add( img.getAttribute( 'src' ) );
}
if ( img.hasAttribute( 'srcset' ) ) {
const parsedSrcset = parseSrcset( img.getAttribute( 'srcset' ) ).candidates;
parsedSrcset.forEach( candidate => {
candidateURLs.add( candidate.url );
} )
}
if ( img.parentNode.tagName === "PICTURE" ) {
const picture = img.parentNode,
sources = pictureSources( img );
sources.forEach( source => {
if ( source.hasAttribute( 'srcset' ) ) {
const parsedSrcset = parseSrcset( source.getAttribute( 'srcset' ) ).candidates;
parsedSrcset.forEach( candidate => {
candidateURLs.add( candidate.url );
} )
}
} );
}
candidateURLs.delete( '' ); // in case there are empties...
return candidateURLs.size;
}
// Is a <picture> doing media and/or type switching?
// takes an <img> Element that's a direct descendant of a <picture>
// returns {
// mediaSwitching: Boolean,
// typeSwitching: Boolean
// }
function pictureFeatures( img ) {
let mediaSwitching = false,
typeSwitching = false;
if ( img.parentNode.tagName !== "PICTURE" ) {
throw 'pictureFeatures() expected an <img> Element with a <picture> parent as input but received something else'
}
const sources = pictureSources( img );
sources.forEach( source => {
if ( source.hasAttribute( 'media' ) ) {
mediaSwitching = true;
}
if ( source.hasAttribute( 'type' ) ) {
typeSwitching = true;
}
} );
return { mediaSwitching, typeSwitching };
}
// Is a srcset using x or w descriptors?
// takes a parsed srcset array (the `candidates` attribute from the ouput of the parseSrcset() function)
// returns {
// xDescriptors: Boolean,
// wDescriptors: Boolean
// }
function srcsetFeatures( parsedSrcset ) {
const resourcesWithWDescriptors = parsedSrcset.filter(
o => o.hasOwnProperty( 'w' )
);
const resourcesWithXDescriptors = parsedSrcset.filter(
o => o.hasOwnProperty( 'd' )
);
return {
xDescriptors: resourcesWithXDescriptors.length > 0,
wDescriptors: resourcesWithWDescriptors.length > 0
}
}
// What features is an <img> using>?
// takes an <img> Element
// returns {
// hasSrc: Boolean,
// hasAlt: Boolean,
// isInPicture: Boolean,
// hasCustomDataAttributes: Boolean,
// hasWidth: Boolean,
// hasHeight: Boolean
// }
// we check for srcset and sizes use separately, in order to consider values supplied by the parent <picture> / <source> siblings
// TODO consider loading (although there's already a metric for this?), decode, crossorigin, referrerpolicy
function imgFeatures( img ) {
return {
hasSrc: img.hasAttribute( 'src' ),
hasAlt: img.hasAttribute( 'alt' ),
isInPicture: img.parentNode.tagName === "PICTURE",
hasCustomDataAttributes: Object.keys( img.dataset ).length > 0,
hasWidth: img.hasAttribute( 'width' ) &&
parseInt( img.getAttribute( 'width' ) ) > 0,
hasHeight: img.hasAttribute( 'height' ) &&
parseInt( img.getAttribute( 'height' ) ) > 0
}
}
// get the computed values of the CSS rules that size the <img>
// note that these are computed values, so things like "100%" have already been resolved into px, boo
// takes an <img> Element
// returns an object with camelCased rule names as keys and strings representing serialized CSS values as values
//
function computedSizingStyles( img ) {
const computedStyles = img.computedStyleMap();
return {
width: computedStyles.get('width').toString(),
height: computedStyles.get('height').toString(),
maxWidth: computedStyles.get('max-width').toString(),
maxHeight: computedStyles.get('max-height').toString(),
minWidth: computedStyles.get('min-width').toString(),
minHeight: computedStyles.get('min-height').toString()
}
}
// is the image intrinsically or extrinsically sized? (or both, via max or min-width constraints that only kick in sometimes)
// takes object returned from computedSizingStyles( img )
// returns { width, height } where width and height can be one of: "extrinsic", "intrinsic", or "both"
function intrinsicOrExtrinsicSizing( computedStyles ) {
let width;
if ( computedStyles.width === "auto" ) {
if ( computedStyles.maxWidth === "none" && computedStyles.minWidth === "auto" ) {
width = "intrinsic";
} else {
width = "both";
}
} else {
width = "extrinsic";
}
let height;
if ( computedStyles.height === "auto" ) {
if ( computedStyles.maxHeight === "none" && computedStyles.minHeight === "auto" ) {
height = "intrinsic";
} else {
height = "both";
}
} else {
height = "extrinsic";
}
return { width, height }
}
function getImgData( img ) {
const imgData = imgFeatures( img );
// Limit data URLs so they don't take up huge amounts of space.
imgData.url =
(img.currentSrc || img.src)?.startsWith('data:') && (img.currentSrc || img.src)?.length > 50 ?
(img.currentSrc || img.src)?.slice(0, 50) + '…' :
(img.currentSrc || img.src);
imgData.totalCandidates = totalNumberOfCandidates( img );
if (imgData.hasHeight) {
imgData.heightAttribute = img.getAttribute('height');
}
if (imgData.hasWidth) {
imgData.widthAttribute = img.getAttribute('width');
}
if (imgData.hasAlt) {
imgData.altAttribute = img.getAttribute('alt');
}
if (imgData.hasCustomDataAttributes) {
imgData.customDataAttributes = Object.keys( img.dataset );
}
// duplicates metrics captured in images.js, but these could ease additional analysis in combination with everything else we're capturing...
imgData.clientWidth = parseInt( img.clientWidth );
imgData.clientHeight = parseInt( img.clientHeight );
imgData.naturalWidth = parseInt( img.naturalWidth );
imgData.naturalHeight = parseInt( img.naturalHeight );
if ( imgData.isInPicture ) {
const pictureFeatures_ = pictureFeatures( img );
imgData.pictureMediaSwitching = pictureFeatures_.mediaSwitching;
imgData.pictureTypeSwitching = pictureFeatures_.typeSwitching;
}
const { srcset, sizes, isFromSource } = winningSrcsetAndSizes( img );
imgData.hasSrcset = Boolean( srcset );
imgData.hasSizes = Boolean( sizes );
let srcsetCandidates,
parsedSrcset; // need these in scope here to set in this if block, and read in later ones
// TODO: do I want to return any of these in imgData?
if ( imgData.hasSrcset ) {
parsedSrcset = parseSrcset( srcset );
srcsetCandidates = parsedSrcset.candidates;
imgData.srcsetParseError = parsedSrcset.parseError;
srcsetFeatures_ = srcsetFeatures( parsedSrcset.candidates );
imgData.srcsetHasXDescriptors = srcsetFeatures_.xDescriptors;
imgData.srcsetHasWDescriptors = srcsetFeatures_.wDescriptors;
/* If child has a src or href attribute whose value is not the empty string and source set does not contain an image source with a pixel density descriptor value of 1, and no image source with a width descriptor, append child's src or href attribute value to source set.
https://html.spec.whatwg.org/multipage/images.html#updating-the-source-set
*/
if ( imgData.hasSrc &&
img.getAttribute( 'src' ) !== '' &&
!( srcsetCandidates.filter( c => c.d === 1 ).length > 0 ) &&
!isFromSource &&
!( imgData.srcsetHasWDescriptors ) ) {
srcsetCandidates.push( {
// Limit data URLs so they don't take up huge amounts of space.
url: img.getAttribute( 'src' )?.startsWith('data:') && img.getAttribute( 'src' )?.length > 50 ?
img.getAttribute( 'src' )?.slice(0, 50) + '…' :
img.getAttribute( 'src' )
} )
}
}
// figure out the resolved sizes size
// (e.g., `sizes="calc(100vw - 50px)` on an 800-pixel-wide viewport -> `750`)
if ( imgData.hasSizes ) {
const parsedSizes = parseSizes( sizes );
imgData.sizesCSSLength = parsedSizes.size;
imgData.sizesWidth = resolveLength( imgData.sizesCSSLength );
imgData.sizesParseError = parsedSizes.parseError;
imgData.sizesWasImplicit = false;
} else if ( imgData.srcsetHasWDescriptors ) { // if you use srcset with w descriptors, but do not include a sizes attribute, the default value of sizes = 100vw is used
imgData.sizesWasImplicit = true;
imgData.sizesCSSLength = '100vw';
imgData.sizesWidth = resolveLength( '100vw' );
}
// if we have a sizes width (either implicit or explicit), check it against the actual layout width of the image, and capture the error
if ( imgData.sizesWidth ) {
imgData.sizesAbsoluteError = imgData.sizesWidth - imgData.clientWidth;
imgData.sizesRelativeError = imgData.sizesAbsoluteError / imgData.clientWidth;
}
// determine the effective densities of the srcset resources
// whether they use w descriptors, or x descriptors
//
// note: modifies srcsetCandidates in place
if ( srcsetCandidates ) {
srcsetCandidates.forEach( i => {
if ( i.hasOwnProperty( 'd' ) ) {
i.density = i.d;
} else if ( i.hasOwnProperty( 'w' ) && imgData.sizesWidth && imgData.sizesWidth > 0 ) {
i.density = i.w / imgData.sizesWidth;
} else {
i.density = 1;
}
} );
}
// report all of the srcset candidate densities
if ( srcsetCandidates ) {
imgData.srcsetCandidateDensities = srcsetCandidates.map(
i => i.density
)
}
// report w descriptor breakpoints, if any
if ( srcsetCandidates && imgData.srcsetHasWDescriptors ) {
imgData.srcsetWDescriptorValues = srcsetCandidates.map(
i => i.w
)
}
// figure out the density of the selected resource
//
// by default, img resource density on the web is 1
imgData.currentSrcDensity = 1;
// but it can be modified by srcset
if ( srcsetCandidates ) {
const informationFromSrcsetAboutTheCurrentSrc = srcsetCandidates.find(
o => o.url === img.currentSrc
);
if ( informationFromSrcsetAboutTheCurrentSrc &&
informationFromSrcsetAboutTheCurrentSrc.w ) {
imgData.currentSrcWDescriptor = informationFromSrcsetAboutTheCurrentSrc.w;
}
if ( informationFromSrcsetAboutTheCurrentSrc &&
informationFromSrcsetAboutTheCurrentSrc.density ) {
imgData.currentSrcDensity = informationFromSrcsetAboutTheCurrentSrc.density;
}
}
// figure out the density UN-corrected dimensions of the currentSrc
// note: can only be approximate because naturalWidth/Height are rounded!
if ( imgData.currentSrcDensity ) {
imgData.approximateResourceWidth = Math.round( img.naturalWidth * imgData.currentSrcDensity );
imgData.approximateResourceHeight = Math.round( img.naturalHeight * imgData.currentSrcDensity );
}
const wptRequest = $WPT_REQUESTS.find( req => req.url === imgData.url );
// figure out the bytesize of the image resource
if ( window.PerformanceResourceTiming ) {
const performanceEntries = window.performance.getEntriesByName( imgData.url, 'resource' );
if ( performanceEntries[ 0 ] &&
performanceEntries[ 0 ].decodedBodySize &&
performanceEntries[ 0 ].decodedBodySize > 0 ) {
imgData.byteSize = performanceEntries[ 0 ].decodedBodySize;
} else {
// ok that was fun, but we probably didn't get a Timing-Allow-Origin header on cross-origin resources to allow us to do it. So, look at WebPageTest's data.
// first... if the browser won't tell us, maybe the server will
if (
wptRequest &&
wptRequest.response_headers &&
wptRequest.response_headers['content-length'] &&
parseInt( wptRequest.response_headers['content-length'] ) > 0
) {
imgData.byteSize = parseInt( wptRequest.response_headers['content-length'] );
} else if (
// if the server didn't send a content-length (?), use WPT's transfer_size, which includes HTTP headers and is possibly encoded, but is the best we can do
wptRequest &&
wptRequest.transfer_size
) {
imgData.byteSize = parseInt( wptRequest.transfer_size );
}
}
}
// figure out the approximate bits/pixel of the loaded resource!
if (
imgData.approximateResourceWidth &&
imgData.approximateResourceHeight &&
imgData.byteSize
) {
imgData.bitsPerPixel = ( imgData.byteSize * 8 ) / ( imgData.approximateResourceWidth * imgData.approximateResourceHeight );
}
// if there was a w descriptor -- was it accurate?
if ( imgData.currentSrcWDescriptor &&
imgData.approximateResourceWidth ) {
imgData.wDescriptorAbsoluteError = imgData.currentSrcWDescriptor - imgData.approximateResourceWidth;
imgData.wDescriptorRelativeError = imgData.wDescriptorAbsoluteError / imgData.approximateResourceWidth;
}
// get the server-reported mime type of the image
if (
wptRequest &&
wptRequest.response_headers
) {
imgData.mimeType = wptRequest.response_headers['content-type'];
}
// get the sizing styles applied to the img
imgData.computedSizingStyles = computedSizingStyles( img );
// is the image being extrinsically sized in either dimension? Or is it left to its intrinsic dimensions?
imgData.intrinsicOrExtrinsicSizing = intrinsicOrExtrinsicSizing( imgData.computedSizingStyles );
// is this image reserving layout dimensions using the width and height attributes, despite being intrinsically sized in at least one dimension?
// https://twitter.com/jensimmons/status/1172922185570279425
imgData.reservedLayoutDimensions = (
imgData.hasWidth && imgData.hasHeight &&
Object.values( imgData.intrinsicOrExtrinsicSizing ).includes( 'intrinsic' )
);
// what was the impact of incorrect sizes values?
// helpers...
function geometricDistance(a, b) {
if (a > b) {
return a / b;
} else {
return b / a;
}
}
const smallestResourceThatsLargerThanDPR = function( annotatedCandidates ) {
if ( !annotatedCandidates || !annotatedCandidates.length ) {
return null;
}
const larger = annotatedCandidates.filter( c => c.linearDistance >= 0 );
if ( larger.length === 0 ) {
return annotatedCandidates.sort( ( a, b ) => {
return a.linearDistance - b.linearDistance;
} )[ annotatedCandidates.length - 1 ];
}
return larger.sort( ( a, b ) => {
return a.linearDistance - b.linearDistance;
} )[ 0 ];
}
const resourceThatsClosestToDPR = function( annotatedCandidates ) {
if ( !annotatedCandidates || !annotatedCandidates.length ) {
return null;
}
return annotatedCandidates.sort( ( a, b ) => {
return a.geometricDistance - b.geometricDistance;
} )[ 0 ];
}
const selectResourceFromSrcset = function( annotatedCandidates, dpr ) {
if ( dpr > 1 ) {
return resourceThatsClosestToDPR( annotatedCandidates );
} else {
return smallestResourceThatsLargerThanDPR( annotatedCandidates );
}
}
// main
// only run if there is an (explicit or implied) sizes value, and more than one resource in the srcset
// (ie, if sizes errors could matter)
if ( imgData.sizesWidth && srcsetCandidates && srcsetCandidates.length > 1 ) {
// determine the effective densities of the srcset resources
// using ideal (rather than actual) sizes value
// deep copy
idealSizesSrcsetCandidates = JSON.parse( JSON.stringify( srcsetCandidates ) );
// modify in place (just like before) TODO: turn this into a function, use in both places...
// overwriting densities that we copied
idealSizesSrcsetCandidates.forEach( i => {
if ( i.hasOwnProperty( 'd' ) ) {
i.density = i.d;
} else if ( i.hasOwnProperty( 'w' ) && imgData.clientWidth > 0 ) {
i.density = i.w / imgData.clientWidth;
} else {
i.density = 1;
}
// in addition to densities, annotate candidates with distances from DPR, used in srcset selection
i.geometricDistance = geometricDistance( i.density, window.devicePixelRatio );
i.linearDistance = i.density - window.devicePixelRatio;
} );
// what resource would have been picked, if the sizes value had been correct?
const idealSizesSelectedResource = selectResourceFromSrcset( idealSizesSrcsetCandidates, window.devicePixelRatio );
// how does this resource differ from the actual selected resource? determine and log.
if ( idealSizesSelectedResource &&
idealSizesSelectedResource.hasOwnProperty( 'w' ) &&
imgData.approximateResourceWidth > 0 &&
imgData.approximateResourceHeight > 0 &&
imgData.currentSrcWDescriptor &&
imgData.bitsPerPixel > 0 ) {
imgData.idealSizesSelectedResourceW = idealSizesSelectedResource.w;
const aspectRatio = imgData.approximateResourceWidth / imgData.approximateResourceHeight;
const idealEstimatedHeight = Math.round( idealSizesSelectedResource.w / aspectRatio );
const currentSrcEstimatedHDescriptor = Math.round( imgData.currentSrcWDescriptor / aspectRatio ); // could be different from approximateResourceHeight if w descriptor is wrong!
const currentSrcPixelsBasedOnDescriptors = imgData.currentSrcWDescriptor * currentSrcEstimatedHDescriptor;
imgData.idealSizesSelectedResourceEstimatedPixels = Math.round( idealSizesSelectedResource.w ) * idealEstimatedHeight;
imgData.actualSizesEstimatedWastedLoadedPixels = currentSrcPixelsBasedOnDescriptors - imgData.idealSizesSelectedResourceEstimatedPixels;
imgData.idealSizesSelectedResourceEstimatedBytes = ( imgData.idealSizesSelectedResourceEstimatedPixels * imgData.bitsPerPixel ) / 8;
imgData.actualSizesEstimatedWastedLoadedBytes = ( ( imgData.bitsPerPixel * currentSrcPixelsBasedOnDescriptors) / 8 ) - imgData.idealSizesSelectedResourceEstimatedBytes;
}
}
return imgData;
}
/*
* Sizes Parser
*
* By Alex Bell | MIT License
*
* Non-strict but accurate and lightweight JS Parser for the string value <img sizes="here">
*
* Reference algorithm at:
* https://html.spec.whatwg.org/multipage/embedded-content.html#parse-a-sizes-attribute
*
* Most comments are copied in directly from the spec
* (except for comments in parens).
*
* Grammar is:
* <source-size-list> = <source-size># [ , <source-size-value> ]? | <source-size-value>
* <source-size> = <media-condition> <source-size-value>
* <source-size-value> = <length>
* http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-sizes
*
* E.g. "(max-width: 30em) 100vw, (max-width: 50em) 70vw, 100vw"
* or "(min-width: 30em), calc(30em - 15px)" or just "30vw"
*
* Returns the first valid <css-length> with a media condition that evaluates to true,
* or "100vw" if all valid media conditions evaluate to false.
*
*/
function parseSizes(strValue) {
let parseError = false;
// (Percentage CSS lengths are not allowed in this case, to avoid confusion:
// https://html.spec.whatwg.org/multipage/embedded-content.html#valid-source-size-list
// CSS allows a single optional plus or minus sign:
// http://www.w3.org/TR/CSS2/syndata.html#numbers
// CSS is ASCII case-insensitive:
// http://www.w3.org/TR/CSS2/syndata.html#characters )
// Spec allows exponential notation for <number> type:
// http://dev.w3.org/csswg/css-values/#numbers
var regexCssLengthWithUnits = /^(?:[+-]?[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?(?:ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmin|vmax|vw)$/i,
// (This is a quick and lenient test. Because of optional unlimited-depth internal
// grouping parens and strict spacing rules, this could get very complicated.)
regexCssCalc = /^calc\((?:[0-9a-z \.\+\-\*\/\(\)]+)\)$/i,
i, unparsedSizesList, unparsedSizesListLength, unparsedSize, lastComponentValue, size;
// UTILITY FUNCTIONS
// ( Manual is faster than RegEx.)
// http://jsperf.com/whitespace-character/5
function isSpace(c) {
return (c === "\u0020" || // space
c === "\u0009" || // horizontal tab
c === "\u000A" || // new line
c === "\u000C" || // form feed
c === "\u000D"); // carriage return
}
// (Toy CSS parser. The goals here are:
// 1) expansive test coverage without the weight of a full CSS parser.
// 2) Avoiding regex wherever convenient.
// Quick tests: http://jsfiddle.net/gtntL4gr/3/
// Returns an array of arrays.)
function parseComponentValues(str) {
var chrctr,
component = "",
componentArray = [],
listArray = [],
parenDepth = 0,
pos = 0,
inComment = false;
function pushComponent() {
if (component) {
componentArray.push(component);
component = "";
}
}
function pushComponentArray() {
if (componentArray[ 0 ]) {
listArray.push(componentArray);
componentArray = [];
}
}
// (Loop forwards from the beginning of the string.)
while (true) {
chrctr = str.charAt(pos);
if (chrctr === "") { // ( End of string reached.)
pushComponent();
pushComponentArray();
return listArray;
} else if (inComment) {
if ( (chrctr === "*") && (str.charAt(pos + 1) === "/") ) { // (At end of a comment.)
inComment = false;
pos += 2;
pushComponent();
continue;
} else {
pos += 1; // (Skip all characters inside comments.)
continue;
}
} else if (isSpace(chrctr)) {
// (If previous character in loop was also a space, or if
// at the beginning of the string, do not add space char to
// component.)
if ((str.charAt(pos - 1) && isSpace(str.charAt(pos - 1) ) ) || (!component)) {
pos += 1;
continue;
} else if (parenDepth === 0) {
pushComponent();
pos += 1;
continue;
} else {
// (Replace any space character with a plain space for legibility.)
chrctr = " ";
}
} else if (chrctr === "(") {
parenDepth += 1;
} else if (chrctr === ")") {
parenDepth -= 1;
} else if (chrctr === ",") {
pushComponent()
pushComponentArray();
pos += 1;
continue;
} else if ( (chrctr === "/") && (str.charAt( pos + 1 ) === "*") ) {
inComment = true;
pos += 2;
continue;
}
component = component + chrctr;
pos += 1;
}
}
function isValidNonNegativeSourceSizeValue(s) {
if (regexCssLengthWithUnits.test(s) && (parseFloat(s) >= 0)) {return true;}
if (regexCssCalc.test(s)) {return true;}
// ( http://www.w3.org/TR/CSS2/syndata.html#numbers says:
// "-0 is equivalent to 0 and is not a negative number." which means that
// unitless zero and unitless negative zero must be accepted as special cases.)
if ((s === "0") || (s === "-0") || (s === "+0")) {return true;}
return false;
}
// When asked to parse a sizes attribute from an element, parse a
// comma-separated list of component values from the value of the element's
// sizes attribute (or the empty string, if the attribute is absent), and let
// unparsed sizes list be the result.
// http://dev.w3.org/csswg/css-syntax/#parse-comma-separated-list-of-component-values
unparsedSizesList = parseComponentValues(strValue);
unparsedSizesListLength = unparsedSizesList.length;
// For each unparsed size in unparsed sizes list:
for (i = 0; i < unparsedSizesListLength; i++) {
unparsedSize = unparsedSizesList[ i ];
// 1. Remove all consecutive <whitespace-token>s from the end of unparsed size.
// ( parseComponentValues() already omits spaces outside of parens. )
// If unparsed size is now empty, that is a parse error; continue to the next
// iteration of this algorithm.
// ( parseComponentValues() won't push an empty array. )
// 2. If the last component value in unparsed size is a valid non-negative
// <source-size-value>, let size be its value and remove the component value
// from unparsed size. Any CSS function other than the calc() function is
// invalid. Otherwise, there is a parse error; continue to the next iteration
// of this algorithm.
// http://dev.w3.org/csswg/css-syntax/#parse-component-value
lastComponentValue = unparsedSize[ unparsedSize.length - 1 ];
if (isValidNonNegativeSourceSizeValue(lastComponentValue)) {
size = lastComponentValue;
unparsedSize.pop();
} else {
parseError = true;
if (window.console && console.log) {
// console.log("Parse error: " + strValue);
continue;
}
}
// 3. Remove all consecutive <whitespace-token>s from the end of unparsed
// size. If unparsed size is now empty, return size and exit this algorithm.
// If this was not the last item in unparsed sizes list, that is a parse error.
if (unparsedSize.length === 0) {
if (i !== unparsedSizesListLength - 1) {
parseError = true;
if (window.console && console.log) {
// console.log("Parse error: " + strValue);
}
}
return { size, parseError };
}
// 4. Parse the remaining component values in unparsed size as a
// <media-condition>. If it does not parse correctly, or it does parse
// correctly but the <media-condition> evaluates to false, continue to the
// next iteration of this algorithm.
// (Parsing all possible compound media conditions in JS is heavy, complicated,
// and the payoff is unclear. Is there ever an situation where the
// media condition parses incorrectly but still somehow evaluates to true?
// Can we just rely on the browser/polyfill to do it?)
unparsedSize = unparsedSize.join(" ");
if (!(window.matchMedia(unparsedSize).matches) ) {
continue;
}
// 5. Return size and exit this algorithm.
return { size, parseError };
}
// If the above algorithm exhausts unparsed sizes list without returning a
// size value, return 100vw.
return { size: "100vw", parseError };
}
/**
* Srcset Parser
*
* By Alex Bell | MIT License
*
* JS Parser for the string value that appears in markup <img srcset="here">
*
* @returns Array [{url: _, d: _, w: _, h:_}, ...]
*
* Based super duper closely on the reference algorithm at:
* https://html.spec.whatwg.org/multipage/embedded-content.html#parse-a-srcset-attribute
*
* Most comments are copied in directly from the spec
* (except for comments in parens).
*/
function parseSrcset(input) {
// UTILITY FUNCTIONS
// Manual is faster than RegEx
// http://bjorn.tipling.com/state-and-regular-expressions-in-javascript
// http://jsperf.com/whitespace-character/5
function isSpace(c) {
return (c === "\u0020" || // space
c === "\u0009" || // horizontal tab
c === "\u000A" || // new line
c === "\u000C" || // form feed
c === "\u000D"); // carriage return
}
function collectCharacters(regEx) {
var chars,
match = regEx.exec(input.substring(pos));
if (match) {
chars = match[ 0 ];
pos += chars.length;
return chars;
}
}
var inputLength = input.length,
// (Don't use \s, to avoid matching non-breaking space)
regexLeadingSpaces = /^[ \t\n\r\u000c]+/,
regexLeadingCommasOrSpaces = /^[, \t\n\r\u000c]+/,
regexLeadingNotSpaces = /^[^ \t\n\r\u000c]+/,
regexTrailingCommas = /[,]+$/,
regexNonNegativeInteger = /^\d+$/,
// ( Positive or negative or unsigned integers or decimals, without or without exponents.
// Must include at least one digit.
// According to spec tests any decimal point must be followed by a digit.
// No leading plus sign is allowed.)
// https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number
regexFloatingPoint = /^-?(?:[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?$/,
url,
descriptors,
currentDescriptor,
state,
c,
// 2. Let position be a pointer into input, initially pointing at the start
// of the string.
pos = 0,
// 3. Let candidates be an initially empty source set.
candidates = [];
// eric added this
let parseError = false;
// 4. Splitting loop: Collect a sequence of characters that are space
// characters or U+002C COMMA characters. If any U+002C COMMA characters
// were collected, that is a parse error.
while (true) {
collectCharacters(regexLeadingCommasOrSpaces);
// 5. If position is past the end of input, return candidates and abort these steps.
if (pos >= inputLength) {
return { candidates, parseError }; // (we're done, this is the sole return path)
}
// 6. Collect a sequence of characters that are not space characters,
// and let that be url.
url = collectCharacters(regexLeadingNotSpaces);
// 7. Let descriptors be a new empty list.
descriptors = [];
// 8. If url ends with a U+002C COMMA character (,), follow these substeps:
// (1). Remove all trailing U+002C COMMA characters from url. If this removed
// more than one character, that is a parse error.
if (url.slice(-1) === ",") {
url = url.replace(regexTrailingCommas, "");
// (Jump ahead to step 9 to skip tokenization and just push the candidate).
parseDescriptors();
// Otherwise, follow these substeps:
} else {
tokenize();
} // (close else of step 8)
// 16. Return to the step labeled splitting loop.
} // (Close of big while loop.)
/**
* Tokenizes descriptor properties prior to parsing
* Returns undefined.
*/
function tokenize() {
// 8.1. Descriptor tokeniser: Skip whitespace
collectCharacters(regexLeadingSpaces);
// 8.2. Let current descriptor be the empty string.
currentDescriptor = "";
// 8.3. Let state be in descriptor.
state = "in descriptor";
while (true) {
// 8.4. Let c be the character at position.
c = input.charAt(pos);
// Do the following depending on the value of state.
// For the purpose of this step, "EOF" is a special character representing
// that position is past the end of input.
// In descriptor
if (state === "in descriptor") {
// Do the following, depending on the value of c:
// Space character
// If current descriptor is not empty, append current descriptor to
// descriptors and let current descriptor be the empty string.
// Set state to after descriptor.
if (isSpace(c)) {
if (currentDescriptor) {
descriptors.push(currentDescriptor);
currentDescriptor = "";
state = "after descriptor";
}
// U+002C COMMA (,)
// Advance position to the next character in input. If current descriptor
// is not empty, append current descriptor to descriptors. Jump to the step
// labeled descriptor parser.
} else if (c === ",") {
pos += 1;
if (currentDescriptor) {
descriptors.push(currentDescriptor);
}
parseDescriptors();
return;
// U+0028 LEFT PARENTHESIS (()
// Append c to current descriptor. Set state to in parens.
} else if (c === "\u0028") {
currentDescriptor = currentDescriptor + c;
state = "in parens";