core(icons): defer to manifest-icon type hint for image type

lighthouse-core/lib/icons.js

@@ -33,13 +33,16 @@ function pngSizedAtLeast(sizeRequirement, manifest) {
   /** @type {Array<string>} */
   const flattenedSizes = [];
   iconValues
-    // filter out icons with a typehint that is not 'image/png'
-    .filter(icon => (!icon.value.type.value) ||
-      (icon.value.type.value &&
-      icon.value.type.value === 'image/png'))
-    // filter out icons that are not png
-    .filter(icon => icon.value.src.value &&
-      new URL(icon.value.src.value).pathname.endsWith('.png'))
+    .filter(icon => {
+      const typeHint = icon.value.type.value;
+      if (typeHint) {
+        // If a type hint is present, filter out icons that are not 'image/png'.
+        return typeHint === 'image/png';
+      }
+      // Otherwise, fall back to filtering on the icons' extension.
+      const src = icon.value.src.value;
+      return src && new URL(src).pathname.endsWith('.png');
+    })
     .forEach(icon => {
       // check that the icon has a size
       if (icon.value.sizes.value) {

lighthouse-core/test/lib/icons-test.js

@@ -278,22 +278,24 @@ describe('Icons helper', () => {
       assert.equal(icons.pngSizedAtLeast(192, manifest.value).length, 0);
     });
 
-    it('fails with an icon that has a png typehint but is not png', () => {
+    it('succeeds with a png icon that has query params in url', () => {
       const manifestSrc = JSON.stringify({
         icons: [{
-          src: 'path/to/image.jpg',
+          src: 'path/to/image.png?param=true',
           sizes: '200x200',
           type: 'image/png',
         }],
       });
       const manifest = manifestParser(manifestSrc, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL);
-      assert.equal(icons.pngSizedAtLeast(192, manifest.value).length, 0);
+      assert.equal(icons.pngSizedAtLeast(192, manifest.value).length, 1);
     });
 
-    it('succeeds with a png icon that has query params in url', () => {
+    // Note on tests below: we will believe your typehints until we can fetch the image and decode it.
+    // See https://github.com/GoogleChrome/lighthouse/issues/789
+    it('succeeds with an icon that has a png typehint but is not png', () => {
       const manifestSrc = JSON.stringify({
         icons: [{
-          src: 'path/to/image.png?param=true',
+          src: 'path/to/image.jpg',
           sizes: '200x200',
           type: 'image/png',
         }],
@@ -302,7 +304,7 @@ describe('Icons helper', () => {
       assert.equal(icons.pngSizedAtLeast(192, manifest.value).length, 1);
     });
 
-    it('fails with a non-png icon that has query params in url', () => {
+    it('succeeds with a non-png icon that has query params in url', () => {
       const manifestSrc = JSON.stringify({
         icons: [{
           src: 'path/to/image.jpg?param=true',
@@ -311,10 +313,10 @@ describe('Icons helper', () => {
         }],
       });
       const manifest = manifestParser(manifestSrc, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL);
-      assert.equal(icons.pngSizedAtLeast(192, manifest.value).length, 0);
+      assert.equal(icons.pngSizedAtLeast(192, manifest.value).length, 1);
     });
 
-    it('fails with a non-png icon that has a .png extension in the middle', () => {
+    it('succeeds with a non-png icon that has a .png extension in the middle', () => {
       const manifestSrc = JSON.stringify({
         icons: [{
           src: 'path/to/image.png.jpg',
@@ -323,7 +325,7 @@ describe('Icons helper', () => {
         }],
       });
       const manifest = manifestParser(manifestSrc, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL);
-      assert.equal(icons.pngSizedAtLeast(192, manifest.value).length, 0);
+      assert.equal(icons.pngSizedAtLeast(192, manifest.value).length, 1);
     });
   });
 });