Merge 2fb2f39 into 38c534c

GoogleChrome · Nov 24, 2020 · 2d7ffb4 · 2d7ffb4
2 parents 38c534c + 2fb2f39
commit 2d7ffb4
Show file tree

Hide file tree

Showing 8 changed files with 430 additions and 85 deletions.
diff --git a/lighthouse-core/audits/image-aspect-ratio.js b/lighthouse-core/audits/image-aspect-ratio.js
@@ -92,6 +92,7 @@ class ImageAspectRatio extends Audit {
     const warnings = [];
     /** @type {Array<{url: string, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}>} */
     const results = [];
+    const reqObjectFitProperties = ['cover', 'contain', 'scale-down', 'none'];
     images.filter(image => {
       // - filter out css background images since we don't have a reliable way to tell if it's a
       //   sprite sheet, repeated for effect, etc
@@ -105,7 +106,7 @@ class ImageAspectRatio extends Audit {
         image.naturalWidth > 5 &&
         image.displayedWidth &&
         image.displayedHeight &&
-        !image.usesObjectFit;
+        !reqObjectFitProperties.includes(image.ObjectFit);
     }).forEach(image => {
       const wellDefinedImage = /** @type {WellDefinedImage} */ (image);
       const processed = ImageAspectRatio.computeAspectRatios(wellDefinedImage);

diff --git a/lighthouse-core/audits/image-size-responsive.js b/lighthouse-core/audits/image-size-responsive.js
@@ -65,6 +65,13 @@ function isVisible(imageRect, viewportDimensions) {
  * @return {boolean}
  */
 function isCandidate(image) {
+  const reqObjectFitProperties = ['cover', 'contain', 'scale-down', 'none'];
+  /** image-rendering solution for pixel art scaling.
+   * https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look
+  */
+  const reqPixelScaling = ['pixelated', 'crisp-edges'];
+  // https://html.spec.whatwg.org/multipage/images.html#pixel-density-descriptor
+  const getDensityDescriptor = / \d+(\.\d+)?x/;
   if (image.displayedWidth <= 1 || image.displayedHeight <= 1) {
     return false;
   }
@@ -77,13 +84,15 @@ function isCandidate(image) {
   if (image.isCss) {
     return false;
   }
-  if (image.usesObjectFit) {
+  if (reqObjectFitProperties.includes(image.ObjectFit)) {
     return false;
   }
-  if (image.usesPixelArtScaling) {
+  // Check if pixel art scaling is used.
+  if (reqPixelScaling.includes(image.ImageRendering)) {
     return false;
   }
-  if (image.usesSrcSetDensityDescriptor) {
+  // Check if density descriptor is used.
+  if (getDensityDescriptor.test(image.srcset)) {
     return false;
   }
   return true;

diff --git a/lighthouse-core/gather/gatherers/image-elements.js b/lighthouse-core/gather/gatherers/image-elements.js
@@ -78,15 +78,9 @@ function getHTMLImages(allElements) {
       isPicture,
       loading: element.loading,
       resourceSize: 0, // this will get overwritten below
-      usesObjectFit: ['cover', 'contain', 'scale-down', 'none'].includes(
-        computedStyle.getPropertyValue('object-fit')
-      ),
-      usesPixelArtScaling: ['pixelated', 'crisp-edges'].includes(
-        computedStyle.getPropertyValue('image-rendering')
-      ),
+      ObjectFit: computedStyle.getPropertyValue('object-fit'),
+      ImageRendering: computedStyle.getPropertyValue('image-rendering'),
       isInShadowDOM: element.getRootNode() instanceof ShadowRoot,
-      // https://html.spec.whatwg.org/multipage/images.html#pixel-density-descriptor
-      usesSrcSetDensityDescriptor: / \d+(\.\d+)?x/.test(element.srcset),
       // @ts-expect-error - getNodeDetails put into scope via stringification
       ...getNodeDetails(element),
     };
@@ -132,11 +126,8 @@ function getCSSImages(allElements) {
       isCss: true,
       isPicture: false,
       isInShadowDOM: element.getRootNode() instanceof ShadowRoot,
-      usesObjectFit: false,
-      usesPixelArtScaling: ['pixelated', 'crisp-edges'].includes(
-        style.getPropertyValue('image-rendering')
-      ),
-      usesSrcSetDensityDescriptor: false,
+      ObjectFit: '',
+      ImageRendering: style.getPropertyValue('image-rendering'),
       resourceSize: 0, // this will get overwritten below
       // @ts-expect-error - getNodeDetails put into scope via stringification
       ...getNodeDetails(element),

diff --git a/lighthouse-core/test/audits/image-aspect-ratio-test.js b/lighthouse-core/test/audits/image-aspect-ratio-test.js
@@ -54,7 +54,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [200, 200],
     props: {
       isCss: false,
-      usesObjectFit: false,
+      ObjectFit: '',
     },
   });
 
@@ -64,7 +64,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [200, 200],
     props: {
       isCss: true,
-      usesObjectFit: false,
+      ObjectFit: '',
     },
   });
 
@@ -74,7 +74,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [200, 200],
     props: {
       isCss: false,
-      usesObjectFit: false,
+      ObjectFit: '',
     },
   });
 
@@ -84,7 +84,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [800, 500],
     props: {
       isCss: false,
-      usesObjectFit: true,
+      ObjectFit: 'cover',
     },
   });
 
@@ -94,7 +94,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [800, 500],
     props: {
       isCss: false,
-      usesObjectFit: false,
+      ObjectFit: '',
     },
   });
 
@@ -104,7 +104,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [400, 300],
     props: {
       isCss: false,
-      usesObjectFit: false,
+      ObjectFit: '',
     },
   });
 
@@ -114,7 +114,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [800, 69],
     props: {
       isCss: false,
-      usesObjectFit: false,
+      ObjectFit: '',
     },
   });
 
@@ -124,7 +124,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [300, 300],
     props: {
       isCss: false,
-      usesObjectFit: false,
+      ObjectFit: '',
     },
   });
 
@@ -134,7 +134,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [100, 100],
     props: {
       isCss: false,
-      usesObjectFit: false,
+      ObjectFit: '',
     },
   });
 
@@ -144,7 +144,7 @@ describe('Images: aspect-ratio audit', () => {
     naturalSize: [1, 1],
     props: {
       isCss: false,
-      usesObjectFit: false,
+      ObjectFit: '',
     },
   });
 
@@ -157,7 +157,7 @@ describe('Images: aspect-ratio audit', () => {
           {
             mimeType: 'image/svg+xml',
             isCss: false,
-            usesObjectFit: false,
+            ObjectFit: '',
           }
         ),
       ],

diff --git a/lighthouse-core/test/audits/image-size-responsive-test.js b/lighthouse-core/test/audits/image-size-responsive-test.js
@@ -112,7 +112,7 @@ describe('Images: size audit', () => {
     clientSize: [100, 100],
     naturalSize: [5, 5],
     props: {
-      usesObjectFit: true,
+      ObjectFit: 'cover',
     },
   });
 
@@ -121,7 +121,7 @@ describe('Images: size audit', () => {
     clientSize: [100, 100],
     naturalSize: [5, 5],
     props: {
-      usesPixelArtScaling: true,
+      ImageRendering: 'pixelated',
     },
   });
 
@@ -130,7 +130,7 @@ describe('Images: size audit', () => {
     clientSize: [100, 100],
     naturalSize: [5, 5],
     props: {
-      usesSrcSetDensityDescriptor: true,
+      srcset: 'https://google.com/logo.png 1x',
     },
   });