HTML: test <img sizes=auto>

See whatwg/html#8008
web-platform-tests · Jun 14, 2022 · 4e76c69 · 4e76c69
1 parent 2a9034c
commit 4e76c69
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 1 deletion.
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
@@ -0,0 +1,117 @@
+<!doctype html>
+<title>img parse a sizes attribute: sizes=auto</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+img { height: 10px; } /* Keep all images in the viewport, so lazy images load */
+/* But also https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/html_image_element.cc;l=937 */
+</style>
+<div id=log></div>
+<script src="support/parse-a-sizes-attribute.js"></script>
+<img srcset='/images/green-1x1.png?ref1 50w, /images/green-16x16.png?ref1 51w' sizes='1px' id=ref1>
+<img srcset='/images/green-1x1.png?ref2 50w, /images/green-16x16.png?ref2 51w' sizes='100vw' id=ref2>
+
+<script>
+"use strict";
+
+// https://github.com/web-platform-tests/rfcs/pull/75
+let async_promise_test = (promise, description) => {
+  async_test(test => {
+    promise(test)
+      .then(() => {test.done();})
+      .catch(test.step_func(error => { throw error; }));
+  }, description);
+};
+
+function check(imgOrPicture) {
+  let img = imgOrPicture;
+  let source;
+  if (imgOrPicture.localName === 'picture') {
+    source = imgOrPicture.firstChild;
+    img = imgOrPicture.lastChild;
+  }
+  const ref = document.getElementById(img.dataset.ref);
+  async_promise_test(async (t) => {
+    let expect = ref.currentSrc;
+    if (expect) {
+      expect = expect.split('?')[0];
+    }
+    if (expect === '' || expect === null || expect === undefined) {
+      assert_unreached('ref currentSrc was ' + format_value(expect));
+    }
+    await new Promise((resolve, reject) => {
+      img.onload = resolve;
+      img.onerror = reject;
+    });
+    t.step(() => {
+      let got = img.currentSrc;
+      assert_greater_than(got.indexOf('?'), -1, 'expected a "?" in currentSrc');
+      got = got.split('?')[0];
+      assert_equals(got, expect);
+    })
+  }, imgOrPicture.outerHTML);
+}
+
+const tests = [
+  // Smoke tests
+  {sizes: '1px', 'data-ref': 'ref1'},
+  {sizes: '', 'data-ref': 'ref2'},
+  // 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': 'ref1'},
+  {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'},
+  {loading: 'lazy', sizes: 'auto', style: 'width: 0px', 'data-ref': 'ref2'},
+  {loading: 'lazy', sizes: 'auto, 100vw', 'data-ref': 'ref1'},
+  {loading: 'lazy', sizes: '100vw, auto', 'data-ref': 'ref2'},
+  {loading: 'eager', sizes: 'auto', width: '10', 'data-ref': 'ref2'},
+];
+
+function test_img(obj, i) {
+  const img = document.createElement('img');
+  for (const attr in obj) {
+    img.setAttribute(attr, obj[attr]);
+  }
+  img.srcset = `/images/green-1x1.png?img${i} 50w, /images/green-16x16.png?img${i} 51w`
+  document.body.appendChild(img);
+  check(img);
+}
+
+function test_picture(obj, i) {
+  const picture = document.createElement('picture');
+  const source = document.createElement('source');
+  const img = document.createElement('img');
+  for (const attr in obj) {
+    switch (attr) {
+      case 'sizes':
+      case 'type':
+      case 'media':
+        source.setAttribute(attr, obj[attr]);
+        break;
+      default:
+        img.setAttribute(attr, obj[attr]);
+        break;
+    }
+  }
+  source.srcset = `/images/green-1x1.png?picture${i} 50w, /images/green-16x16.png?picture${i} 51w`;
+  picture.appendChild(source);
+  picture.appendChild(img);
+  document.body.appendChild(picture);
+  check(picture);
+}
+
+onload = () => {
+  let i = 0;
+  for (const obj of tests) {
+    i++;
+    test_img(obj, i);
+    test_picture(obj, i);
+  }
+  done();
+}
+</script>
diff --git a/html/semantics/embedded-content/the-img-element/sizes/support/sizes-iframed.sub.html b/html/semantics/embedded-content/the-img-element/sizes/support/sizes-iframed.sub.html
@@ -159,7 +159,6 @@
 <img srcset='/images/green-1x1.png?f19 50w, /images/green-16x16.png?f19 51w' data-foo='1' sizes='attr(data-foo, px, 1px)'>
 <img srcset='/images/green-1x1.png?f20 50w, /images/green-16x16.png?f20 51w' sizes='toggle(1px)'>
 <img srcset='/images/green-1x1.png?f21 50w, /images/green-16x16.png?f21 51w' sizes='inherit'>
-<img srcset='/images/green-1x1.png?f22 50w, /images/green-16x16.png?f22 51w' sizes='auto'>
 <img srcset='/images/green-1x1.png?f23 50w, /images/green-16x16.png?f23 51w' sizes='initial'>
 <img srcset='/images/green-1x1.png?f24 50w, /images/green-16x16.png?f24 51w' sizes='unset'>
 <img srcset='/images/green-1x1.png?f25 50w, /images/green-16x16.png?f25 51w' sizes='default'>