core(image-aspect-ratio): loosen ratio check (#5358)

GoogleChrome · May 29, 2018 · af71277 · af71277
1 parent 424c7b8
commit af71277
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/lighthouse-core/audits/image-aspect-ratio.js b/lighthouse-core/audits/image-aspect-ratio.js
@@ -14,7 +14,7 @@
 const Audit = require('./audit');
 
 const URL = require('../lib/url-shim');
-const THRESHOLD = 0.05;
+const THRESHOLD_PX = 2;
 
 /** @typedef {Required<LH.Artifacts.SingleImageUsage>} WellDefinedImage */
 
@@ -40,7 +40,9 @@ class ImageAspectRatio extends Audit {
     const url = URL.elideDataURI(image.src);
     const actualAspectRatio = image.naturalWidth / image.naturalHeight;
     const displayedAspectRatio = image.width / image.height;
-    const doRatiosMatch = Math.abs(actualAspectRatio - displayedAspectRatio) < THRESHOLD;
+
+    const targetDisplayHeight = image.width / actualAspectRatio;
+    const doRatiosMatch = Math.abs(targetDisplayHeight - image.height) < THRESHOLD_PX;
 
     if (!Number.isFinite(actualAspectRatio) ||
       !Number.isFinite(displayedAspectRatio)) {

diff --git a/lighthouse-core/test/audits/image-aspect-ratio-test.js b/lighthouse-core/test/audits/image-aspect-ratio-test.js
@@ -107,6 +107,16 @@ describe('Images: aspect-ratio audit', () => {
     },
   });
 
+  testImage('is almost the right aspect ratio', {
+    rawValue: true,
+    clientSize: [412, 36],
+    naturalSize: [800, 69],
+    props: {
+      isCss: false,
+      usesObjectFit: false,
+    },
+  });
+
   testImage('aspect ratios match', {
     rawValue: true,
     clientSize: [100, 100],