Merge bf9fe40 into 55995ff

GoogleChrome · Oct 23, 2020 · b561b28 · b561b28
2 parents 55995ff + bf9fe40
commit b561b28
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
@@ -52,6 +52,11 @@
     top: 0;
     left: 0;
   }
+
+  .stylesheet-sizing {
+    width: 160px;
+    height: 110px;
+  }
 </style>
 <script src="script.js" type="application/javascript"></script>
 <script src="bundle.js"></script>
@@ -134,6 +139,14 @@ <h2>Byte efficiency tester page</h2>
   <!-- FAIL(unsized-images): invalid CSS sizing -->
   <img style="width: auto; height: auto;" src="lighthouse-320x212-poor.jpg?cssauto">
 
+  <!-- PASS(optimized): image is JPEG optimized -->
+  <!-- PASS(webp): image has insigificant WebP savings -->
+  <!-- PASS(responsive): image is used at full size -->
+  <!-- PASS(responsive-inverse): image does not account for DPR 2.625 -->
+  <!-- PASS(offscreen): image is lazily loaded -->
+  <!-- PASS(unsized-images): CSS sizing from stylesheet, not inline -->
+  <img class="stylesheet-sizing" src="lighthouse-320x212-poor.jpg?stylesheet-sizing" loading="lazy">
+
   <!-- PASS(optimized): image is JPEG optimized -->
   <!-- PASS(webp): image is WebP savings -->
   <!-- PASS(responsive): image is used at full size with srcset -->

diff --git a/lighthouse-core/gather/gatherers/image-elements.js b/lighthouse-core/gather/gatherers/image-elements.js
@@ -177,12 +177,12 @@ function determineNaturalSize(url) {
 }
 
 /**
- * @param {LH.Crdp.CSS.CSSStyle|undefined} style
+ * @param {Partial<Pick<LH.Crdp.CSS.CSSStyle, 'cssProperties'>>|undefined} style
  * @param {string} property
  * @return {string | undefined}
  */
 function findSizeDeclaration(style, property) {
-  if (!style) return;
+  if (!style || !style.cssProperties) return;
 
   const definedProp = style.cssProperties.find(({name}) => name === property);
   if (!definedProp) return;
@@ -203,8 +203,7 @@ function findMostSpecificCSSRule(matchedCSSRules, property) {
   const rule = FontSize.findMostSpecificMatchedCSSRule(matchedCSSRules, isDeclarationofInterest);
   if (!rule) return;
 
-  // @ts-expect-error style is guaranteed to exist if a rule exists
-  return findSizeDeclaration(rule.style, property);
+  return findSizeDeclaration(rule, property);
 }
 
 /**
@@ -291,9 +290,12 @@ class ImageElements extends Gatherer {
   async afterPass(passContext, loadData) {
     const driver = passContext.driver;
     const indexedNetworkRecords = loadData.networkRecords.reduce((map, record) => {
+      // An image response in newer formats is sometimes incorrectly marked as "application/octet-stream",
+      // so respect the extension too.
+      const isImage = /^image/.test(record.mimeType) || /\.(avif|webp)$/i.test(record.url);
       // The network record is only valid for size information if it finished with a successful status
-      // code that indicates a complete resource response.
-      if (/^image/.test(record.mimeType) && record.finished && record.statusCode === 200) {
+      // code that indicates a complete image response.
+      if (isImage && record.finished && record.statusCode === 200) {
         map[record.url] = record;
       }
 

diff --git a/lighthouse-core/gather/gatherers/seo/font-size.js b/lighthouse-core/gather/gatherers/seo/font-size.js
@@ -66,7 +66,7 @@ function computeSelectorSpecificity(selector) {
 /**
  * Finds the most specific directly matched CSS font-size rule from the list.
  *
- * @param {Array<LH.Crdp.CSS.RuleMatch>} [matchedCSSRules]
+ * @param {Array<LH.Crdp.CSS.RuleMatch>} matchedCSSRules
  * @param {function(LH.Crdp.CSS.CSSStyle):boolean|string|undefined} isDeclarationOfInterest
  * @returns {NodeFontData['cssRule']|undefined}
  */

diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts
@@ -384,6 +384,7 @@ declare global {
             parentRule?: {origin: Crdp.CSS.StyleSheetOrigin, selectors: {text: string}[]};
             styleSheetId?: string;
             stylesheet?: Crdp.CSS.CSSStyleSheetHeader;
+            cssProperties?: Array<Crdp.CSS.CSSProperty>;
           }
         }>
       }