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
web-platform-tests · Nov 30, 2023 · ee6bcea · ee6bcea
1 parent 0caf8c7
commit ee6bcea
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 9 deletions.
diff --git a/.../semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html b/.../semantics/embedded-content/the-img-element/sizes/reference/sizes-auto-rendering-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>Auto sizes rendering</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
+<img
+  src="/images/green.png"
+  width="33"
+  height="13"
+>
diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-2.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Auto sizes rendering</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
+<link rel="match" href="reference/sizes-auto-rendering-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<img
+  id="testImg"
+  loading="lazy"
+  sizes="auto"
+  width="33"
+  height="13"
+>
+<script>
+  function imageLoaded() {
+    waitForAtLeastOneFrame().then(takeScreenshot);
+  }
+
+  testImg.addEventListener('load', imageLoaded);
+  testImg.setAttribute('srcset', `
+    /images/red.png 10w,
+    /images/green.png 100w
+  `);
+</script>
diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-3.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Auto sizes rendering</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
+<link rel="match" href="reference/sizes-auto-rendering-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<img
+  id="testImg"
+  loading="lazy"
+  sizes="auto"
+  width="33"
+  height="13"
+>
+<script>
+  function imageLoaded() {
+    waitForAtLeastOneFrame().then(takeScreenshot);
+  }
+
+  testImg.addEventListener('load', imageLoaded);
+  testImg.setAttribute('srcset', `
+    /images/green.png 100w,
+    /images/red.png 1000w
+  `);
+</script>
diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering-dynamic.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Auto sizes dynamic rendering</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
+<link rel="match" href="reference/sizes-auto-rendering-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<img
+  id="testImg"
+  loading="lazy"
+  sizes="auto"
+  width="1"
+  height="13"
+>
+<script>
+  function secondImageLoaded() {
+    waitForAtLeastOneFrame().then(takeScreenshot);
+  }
+
+  function firstImageLoaded() {
+    const expected = 'red.png';
+    if (!testImg.currentSrc.endsWith('red.png')) {
+        const fail_msg = `FAIL: currentSrc is ${testImg.currentSrc}, expected ${expected}.`;
+        document.body.textContent = fail_msg;
+        takeScreenshot();
+    }
+
+    testImg.addEventListener('load', secondImageLoaded);
+    testImg.style.width = '33px';
+  }
+
+  testImg.addEventListener('load', firstImageLoaded, {once: true});
+  testImg.setAttribute('srcset', `
+    /images/fail.gif 1000w,
+    /images/green.png 100w,
+    /images/red.png 10w
+  `);
+</script>
diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto-rendering.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Auto sizes rendering</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">
+<link rel="match" href="reference/sizes-auto-rendering-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<img
+  id="testImg"
+  loading="lazy"
+  sizes="auto"
+  width="33"
+  height="13"
+>
+<script>
+  function imageLoaded() {
+    waitForAtLeastOneFrame().then(takeScreenshot);
+  }
+
+  testImg.addEventListener('load', imageLoaded);
+  testImg.setAttribute('srcset', `
+    /images/fail.gif 10w,
+    /images/green.png 100w,
+    /images/red.png 1000w
+  `);
+</script>
diff --git a/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html b/html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <title>img parse a sizes attribute: sizes=auto</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#parse-a-sizes-attribute">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <style>
@@ -61,16 +62,16 @@
   // Actual tests
   {loading: 'lazy', sizes: 'auto', width: '10', 'data-ref': 'ref1'},
   {loading: 'lazy', sizes: 'AUTO', width: '10', 'data-ref': 'ref1'},
-  {loading: 'lazy', width: '10', 'data-ref': 'ref1'},
-  {loading: 'lazy', style: 'width: 10px', 'data-ref': 'ref1'},
-  {loading: 'lazy', style: 'max-width: 10px', 'data-ref': 'ref2'}, // no specified width -> 0 -> 100vw
-  {loading: 'lazy', style: 'width: 100%; max-width: 10px', 'data-ref': 'ref1'},
+  {loading: 'lazy', width: '10', 'data-ref': 'ref2'}, // no `sizes: 'auto'` -> 100vw
+  {loading: 'lazy', style: 'width: 10px', 'data-ref': 'ref2'}, // no `sizes: 'auto'` -> 100vw
+  {loading: 'lazy', style: 'max-width: 10px', 'data-ref': 'ref2'}, // no `sizes: 'auto'` -> 100vw
+  {loading: 'lazy', style: 'width: 100%; max-width: 10px', 'data-ref': 'ref2'}, // no `sizes: 'auto'` -> 100vw
   {loading: 'lazy', sizes: 'auto', width: '500', 'data-ref': 'ref2'},
   {loading: 'lazy', sizes: 'auto', width: '10', style: 'visibility: hidden', 'data-ref': 'ref1'},
   {loading: 'lazy', sizes: 'auto', width: '10', style: 'display: inline', hidden: '', 'data-ref': 'ref1'},
-  {loading: 'lazy', sizes: 'auto', width: '0', 'data-ref': 'ref2'}, // 0 -> 100vw
-  {loading: 'lazy', sizes: 'auto', style: 'width: 0px', 'data-ref': 'ref2'}, // 0 -> 100vw
-  {loading: 'lazy', sizes: 'auto', 'data-ref': 'ref2'}, // no specified width -> 0 -> 100vw
+  {loading: 'lazy', sizes: 'auto', width: '0', 'data-ref': 'ref1'},
+  {loading: 'lazy', sizes: 'auto', style: 'width: 0px', 'data-ref': 'ref1'},
+  {loading: 'lazy', sizes: 'auto', 'data-ref': 'ref2'}, // no width -> UA default of 300px
   {loading: 'lazy', sizes: 'auto, 100vw', width: '10', 'data-ref': 'ref1'},
   {loading: 'lazy', sizes: '100vw, auto', width: '10', 'data-ref': 'ref2'},
   {loading: 'eager', sizes: 'auto', width: '10', 'data-ref': 'ref2'},
@@ -81,11 +82,11 @@
   {loading: 'lazy', sizes: 'auto', style: 'min-height: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
   {loading: 'lazy', sizes: 'auto', style: 'min-height: 10px; aspect-ratio: 500 / 10', 'data-ref': 'ref2'},
   {loading: 'lazy', sizes: 'auto', style: 'inline-size: 10px', 'data-ref': 'ref1'},
-  {loading: 'lazy', sizes: 'auto', style: 'min-inline-size: 10px', 'data-ref': 'ref1'},
+  {loading: 'lazy', sizes: 'auto', style: 'min-inline-size: 10px', 'data-ref': 'ref2'}, // no width -> UA default of 300px
   {loading: 'lazy', sizes: 'auto', style: 'block-size: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
   {loading: 'lazy', sizes: 'auto', style: 'min-block-size: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
   {loading: 'lazy', sizes: 'auto', style: 'block-size: 10px; writing-mode: vertical-rl', 'data-ref': 'ref1'},
-  {loading: 'lazy', sizes: 'auto', style: 'min-block-size: 10px; writing-mode: vertical-rl', 'data-ref': 'ref1'},
+  {loading: 'lazy', sizes: 'auto', style: 'min-block-size: 10px; writing-mode: vertical-rl', 'data-ref': 'ref2'}, // no width -> UA default of 300px
   {loading: 'lazy', sizes: 'auto', style: 'inline-size: 10px; aspect-ratio: 10/10; writing-mode: vertical-rl', 'data-ref': 'ref1'},
   {loading: 'lazy', sizes: 'auto', style: 'min-inline-size: 10px; aspect-ratio: 10/10; writing-mode: vertical-rl', 'data-ref': 'ref1'},
   {loading: 'lazy', sizes: 'auto', style: '--my-width: 10px; width: var(--my-width)', 'data-ref': 'ref1'},
@@ -119,6 +120,11 @@
         parent = document.getElementById(obj.parent);
         break;
       case 'sizes':
+        // Authors have to specify sizes="auto" on the img to use auto-sizes.
+        if(obj[attr].toLowerCase().startsWith("auto")) {
+          img.setAttribute(attr, obj[attr]);
+          break;
+        }
       case 'type':
       case 'media':
         source.setAttribute(attr, obj[attr]);