Skip to content

Commit 1323391

Browse files
tcaptan-crSkyBlack1225
tcaptan-cr
authored and
SkyBlack1225
committed
Add auto sizes wpt rendering tests
Also update tests in size-auto to match spec update: whatwg/html#9493 Spec: https://html.spec.whatwg.org/#parsing-a-sizes-attribute https://whatpr.org/html/9493/images.html#parsing-a-sizes-attribute R=pdr Bug: 1359051 Change-Id: I77ecbfef3a5a63101929f67025699550cc7f6413 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5064461 Commit-Queue: Traian Captan <tcaptan@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1231380}
1 parent 340ec32 commit 1323391

File tree

6 files changed

+137
-9
lines changed

6 files changed

+137
-9
lines changed

‎html/semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!doctype html>
2+
<title>Auto sizes rendering</title>
3+
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
4+
<img
5+
src="/images/green.png"
6+
width="33"
7+
height="13"
8+
>

‎html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html class="reftest-wait">
3+
<title>Auto sizes rendering</title>
4+
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
5+
<link rel="match" href="reference/sizes-auto-rendering-ref.html">
6+
<script src="/common/rendering-utils.js"></script>
7+
<script src="/common/reftest-wait.js"></script>
8+
<img
9+
id="testImg"
10+
loading="lazy"
11+
sizes="auto"
12+
width="33"
13+
height="13"
14+
>
15+
<script>
16+
function imageLoaded() {
17+
waitForAtLeastOneFrame().then(takeScreenshot);
18+
}
19+
20+
testImg.addEventListener('load', imageLoaded);
21+
testImg.setAttribute('srcset', `
22+
/images/red.png 10w,
23+
/images/green.png 100w
24+
`);
25+
</script>

‎html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html class="reftest-wait">
3+
<title>Auto sizes rendering</title>
4+
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
5+
<link rel="match" href="reference/sizes-auto-rendering-ref.html">
6+
<script src="/common/rendering-utils.js"></script>
7+
<script src="/common/reftest-wait.js"></script>
8+
<img
9+
id="testImg"
10+
loading="lazy"
11+
sizes="auto"
12+
width="33"
13+
height="13"
14+
>
15+
<script>
16+
function imageLoaded() {
17+
waitForAtLeastOneFrame().then(takeScreenshot);
18+
}
19+
20+
testImg.addEventListener('load', imageLoaded);
21+
testImg.setAttribute('srcset', `
22+
/images/green.png 100w,
23+
/images/red.png 1000w
24+
`);
25+
</script>

‎html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html class="reftest-wait">
3+
<title>Auto sizes dynamic rendering</title>
4+
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
5+
<link rel="match" href="reference/sizes-auto-rendering-ref.html">
6+
<script src="/common/rendering-utils.js"></script>
7+
<script src="/common/reftest-wait.js"></script>
8+
<img
9+
id="testImg"
10+
loading="lazy"
11+
sizes="auto"
12+
width="1"
13+
height="13"
14+
>
15+
<script>
16+
function secondImageLoaded() {
17+
waitForAtLeastOneFrame().then(takeScreenshot);
18+
}
19+
20+
function firstImageLoaded() {
21+
const expected = 'red.png';
22+
if (!testImg.currentSrc.endsWith('red.png')) {
23+
const fail_msg = `FAIL: currentSrc is ${testImg.currentSrc}, expected ${expected}.`;
24+
document.body.textContent = fail_msg;
25+
takeScreenshot();
26+
}
27+
28+
testImg.addEventListener('load', secondImageLoaded);
29+
testImg.style.width = '33px';
30+
}
31+
32+
testImg.addEventListener('load', firstImageLoaded, {once: true});
33+
testImg.setAttribute('srcset', `
34+
/images/fail.gif 1000w,
35+
/images/green.png 100w,
36+
/images/red.png 10w
37+
`);
38+
</script>

‎html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html class="reftest-wait">
3+
<title>Auto sizes rendering</title>
4+
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
5+
<link rel="match" href="reference/sizes-auto-rendering-ref.html">
6+
<script src="/common/rendering-utils.js"></script>
7+
<script src="/common/reftest-wait.js"></script>
8+
<img
9+
id="testImg"
10+
loading="lazy"
11+
sizes="auto"
12+
width="33"
13+
height="13"
14+
>
15+
<script>
16+
function imageLoaded() {
17+
waitForAtLeastOneFrame().then(takeScreenshot);
18+
}
19+
20+
testImg.addEventListener('load', imageLoaded);
21+
testImg.setAttribute('srcset', `
22+
/images/fail.gif 10w,
23+
/images/green.png 100w,
24+
/images/red.png 1000w
25+
`);
26+
</script>

‎html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html

+15-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!doctype html>
22
<title>img parse a sizes attribute: sizes=auto</title>
3+
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#parse-a-sizes-attribute">
34
<script src="/resources/testharness.js"></script>
45
<script src="/resources/testharnessreport.js"></script>
56
<style>
@@ -61,16 +62,16 @@
6162
// Actual tests
6263
{loading: 'lazy', sizes: 'auto', width: '10', 'data-ref': 'ref1'},
6364
{loading: 'lazy', sizes: 'AUTO', width: '10', 'data-ref': 'ref1'},
64-
{loading: 'lazy', width: '10', 'data-ref': 'ref1'},
65-
{loading: 'lazy', style: 'width: 10px', 'data-ref': 'ref1'},
66-
{loading: 'lazy', style: 'max-width: 10px', 'data-ref': 'ref2'}, // no specified width -> 0 -> 100vw
67-
{loading: 'lazy', style: 'width: 100%; max-width: 10px', 'data-ref': 'ref1'},
65+
{loading: 'lazy', width: '10', 'data-ref': 'ref2'}, // no `sizes: 'auto'` -> 100vw
66+
{loading: 'lazy', style: 'width: 10px', 'data-ref': 'ref2'}, // no `sizes: 'auto'` -> 100vw
67+
{loading: 'lazy', style: 'max-width: 10px', 'data-ref': 'ref2'}, // no `sizes: 'auto'` -> 100vw
68+
{loading: 'lazy', style: 'width: 100%; max-width: 10px', 'data-ref': 'ref2'}, // no `sizes: 'auto'` -> 100vw
6869
{loading: 'lazy', sizes: 'auto', width: '500', 'data-ref': 'ref2'},
6970
{loading: 'lazy', sizes: 'auto', width: '10', style: 'visibility: hidden', 'data-ref': 'ref1'},
7071
{loading: 'lazy', sizes: 'auto', width: '10', style: 'display: inline', hidden: '', 'data-ref': 'ref1'},
71-
{loading: 'lazy', sizes: 'auto', width: '0', 'data-ref': 'ref2'}, // 0 -> 100vw
72-
{loading: 'lazy', sizes: 'auto', style: 'width: 0px', 'data-ref': 'ref2'}, // 0 -> 100vw
73-
{loading: 'lazy', sizes: 'auto', 'data-ref': 'ref2'}, // no specified width -> 0 -> 100vw
72+
{loading: 'lazy', sizes: 'auto', width: '0', 'data-ref': 'ref1'},
73+
{loading: 'lazy', sizes: 'auto', style: 'width: 0px', 'data-ref': 'ref1'},
74+
{loading: 'lazy', sizes: 'auto', 'data-ref': 'ref2'}, // no width -> UA default of 300px
7475
{loading: 'lazy', sizes: 'auto, 100vw', width: '10', 'data-ref': 'ref1'},
7576
{loading: 'lazy', sizes: '100vw, auto', width: '10', 'data-ref': 'ref2'},
7677
{loading: 'eager', sizes: 'auto', width: '10', 'data-ref': 'ref2'},
@@ -81,11 +82,11 @@
8182
{loading: 'lazy', sizes: 'auto', style: 'min-height: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
8283
{loading: 'lazy', sizes: 'auto', style: 'min-height: 10px; aspect-ratio: 500 / 10', 'data-ref': 'ref2'},
8384
{loading: 'lazy', sizes: 'auto', style: 'inline-size: 10px', 'data-ref': 'ref1'},
84-
{loading: 'lazy', sizes: 'auto', style: 'min-inline-size: 10px', 'data-ref': 'ref1'},
85+
{loading: 'lazy', sizes: 'auto', style: 'min-inline-size: 10px', 'data-ref': 'ref2'}, // no width -> UA default of 300px
8586
{loading: 'lazy', sizes: 'auto', style: 'block-size: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
8687
{loading: 'lazy', sizes: 'auto', style: 'min-block-size: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
8788
{loading: 'lazy', sizes: 'auto', style: 'block-size: 10px; writing-mode: vertical-rl', 'data-ref': 'ref1'},
88-
{loading: 'lazy', sizes: 'auto', style: 'min-block-size: 10px; writing-mode: vertical-rl', 'data-ref': 'ref1'},
89+
{loading: 'lazy', sizes: 'auto', style: 'min-block-size: 10px; writing-mode: vertical-rl', 'data-ref': 'ref2'}, // no width -> UA default of 300px
8990
{loading: 'lazy', sizes: 'auto', style: 'inline-size: 10px; aspect-ratio: 10/10; writing-mode: vertical-rl', 'data-ref': 'ref1'},
9091
{loading: 'lazy', sizes: 'auto', style: 'min-inline-size: 10px; aspect-ratio: 10/10; writing-mode: vertical-rl', 'data-ref': 'ref1'},
9192
{loading: 'lazy', sizes: 'auto', style: '--my-width: 10px; width: var(--my-width)', 'data-ref': 'ref1'},
@@ -119,6 +120,11 @@
119120
parent = document.getElementById(obj.parent);
120121
break;
121122
case 'sizes':
123+
// Authors have to specify sizes="auto" on the img to use auto-sizes.
124+
if(obj[attr].toLowerCase().startsWith("auto")) {
125+
img.setAttribute(attr, obj[attr]);
126+
break;
127+
}
122128
case 'type':
123129
case 'media':
124130
source.setAttribute(attr, obj[attr]);

0 commit comments

Comments
 (0)