Skip to content

Commit

Permalink
core(unsized-images): add CLS savings as always 0 (#15196)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamraine
adamraine authored Jul 5, 2023
1 parent 9e2f70e commit ba1a763
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 0 deletions.
3 changes: 3 additions & 0 deletions core/audits/unsized-images.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,9 @@ class UnsizedImages extends Audit {
score: unsizedImages.length > 0 ? 0 : 1,
notApplicable: images.length === 0,
details: Audit.makeTableDetails(headings, unsizedImages),
metricSavings: {
CLS: 0,
},
};
}
}
Expand Down
44 changes: 44 additions & 0 deletions core/test/audits/unsized-images-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image is a shadowroot image', async () => {
Expand All @@ -47,6 +48,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has absolute css position', async () => {
Expand All @@ -60,6 +62,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has fixed css position', async () => {
Expand All @@ -73,6 +76,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image is a non-network SVG data url base64', async () => {
Expand All @@ -86,6 +90,7 @@ describe('Sized images audit', () => {
src: 'data:image/svg+xml;base64,foo',
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image is a non-network SVG data url with encoded characters', async () => {
Expand All @@ -99,6 +104,7 @@ describe('Sized images audit', () => {
src: 'data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%27200%27/%3e',
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

describe('has empty width', () => {
Expand All @@ -112,6 +118,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails when an image only has css height', async () => {
Expand All @@ -124,6 +131,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails when an image only has attribute height & css height', async () => {
Expand All @@ -136,6 +144,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails a network svg', async () => {
Expand All @@ -148,6 +157,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});
});

Expand All @@ -162,6 +172,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails when an image only has css width', async () => {
Expand All @@ -174,6 +185,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails when an image only has attribute width & css width', async () => {
Expand All @@ -186,6 +198,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});
});

Expand All @@ -199,6 +212,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

describe('has explicit width and height', () => {
Expand All @@ -212,6 +226,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has attribute width and attribute height', async () => {
Expand All @@ -224,6 +239,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has css width and attribute height', async () => {
Expand All @@ -236,6 +252,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has css width and css height', async () => {
Expand All @@ -248,6 +265,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has css & attribute width and css height', async () => {
Expand All @@ -260,6 +278,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has css & attribute width and attribute height', async () => {
Expand All @@ -272,6 +291,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has css & attribute height and css width', async () => {
Expand All @@ -284,6 +304,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has css & attribute height and attribute width', async () => {
Expand All @@ -296,6 +317,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has css & attribute height and css & attribute width', async () => {
Expand All @@ -308,6 +330,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has attribute width/height of zero', async () => {
Expand All @@ -326,6 +349,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image is unsized, but its parent is not displayed', async () => {
Expand All @@ -344,6 +368,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});
});

Expand All @@ -358,6 +383,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails when an image has invalid height attribute', async () => {
Expand All @@ -370,6 +396,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails when an image has non-explicit css width', async () => {
Expand All @@ -382,6 +409,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails when an image has non-explicit css height', async () => {
Expand All @@ -394,6 +422,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has invalid width attribute, and explicit css width', async () => {
Expand All @@ -406,6 +435,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has invalid height attribute, and valid css height', async () => {
Expand All @@ -418,6 +448,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has nonexplicit css width, and valid attribute width', async () => {
Expand All @@ -430,6 +461,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has nonexplicit css height, and valid attribute height', async () => {
Expand All @@ -442,6 +474,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has nonexplicit css width & height, and valid attribute width & height', // eslint-disable-line max-len
Expand All @@ -455,6 +488,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when an image has invalid attribute width & height, and valid css width & height',
Expand All @@ -468,6 +502,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails when an image has invalid attribute width & height, and nonexplicit css width & height', // eslint-disable-line max-len
Expand All @@ -481,6 +516,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});
});

Expand All @@ -496,6 +532,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('fails when an image only has non-explicit CSS aspect-ratio', async () => {
Expand All @@ -509,6 +546,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when CSS aspect-ratio and attribute width are explicit', async () => {
Expand All @@ -522,6 +560,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('passes when CSS aspect-ratio and width are explicit', async () => {
Expand All @@ -535,6 +574,7 @@ describe('Sized images audit', () => {
},
});
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});
});

Expand All @@ -544,6 +584,7 @@ describe('Sized images audit', () => {
});
expect(result.notApplicable).toEqual(true);
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it('can return multiple unsized images', async () => {
Expand Down Expand Up @@ -581,6 +622,7 @@ describe('Sized images audit', () => {
],
});
expect(result.score).toEqual(0);
expect(result.metricSavings).toEqual({CLS: 0});
expect(result.details.items).toHaveLength(2);
const srcs = result.details.items.map(item => item.url);
expect(srcs).toEqual(['image1.png', 'image3.png']);
Expand All @@ -596,6 +638,7 @@ describe('Sized images audit', () => {
});
expect(result.details.items.length).toEqual(0);
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});

it(`passes because it's html-sized, even we cannot be conclusive about css-sized`, async () => {
Expand All @@ -606,6 +649,7 @@ describe('Sized images audit', () => {
});
expect(result.details.items.length).toEqual(0);
expect(result.score).toEqual(1);
expect(result.metricSavings).toEqual({CLS: 0});
});
});
});
Expand Down

0 comments on commit ba1a763

Please sign in to comment.