Bug 1706659 [wpt PR 28623] - Split the test cases for mapping width and height to aspect ratio, a=testonly

Automatic update from web-platform-tests
Split the test cases for mapping width and height to aspect ratio (#28623)

Split up the test cases for mapping width and height attributes to aspect ratio.

To make sure that each element has its own test case, so that the test won't
break in the middle of test cases and affect other images' test.
--

wpt-commits: 1f07a2242db1842f57c321489bf24c51225522cf
wpt-pr: 28623

testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html

@@ -17,7 +17,7 @@
 <img src="error.png">
 <img src="error.png" alt="Alt text" width=100 height=500>
 <script>
-let t = async_test("Image width and height attributes are used to infer aspect-ratio");
+let guard = async_test("Image width and height attributes are used to infer aspect-ratio");
 function assert_ratio(img, expected, description) {
   let epsilon = 0.001;
   assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10),
@@ -31,43 +31,6 @@ function test_computed_style(width, height, expected) {
   test_computed_style_aspect_ratio("input", {type: "submit", width: width, height: height}, "auto");
 }
 
-// Create and append a new image and immediately check the ratio.
-// This is not racy because the spec requires the user agent to queue a task:
-// https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data
-t.step(function() {
-  var img = new Image();
-  img.width = 250;
-  img.height = 100;
-  img.src = "/images/blue.png";
-  document.body.appendChild(img);
-  assert_ratio(img, 2.5);
-
-  img = new Image();
-  img.setAttribute("width", "0.8");
-  img.setAttribute("height", "0.2");
-  img.src = "/images/blue.png";
-  document.body.appendChild(img);
-  assert_ratio(img, 4);
-
-  img = new Image();
-  img.setAttribute("width", "50%");
-  img.setAttribute("height", "25%");
-  img.src = "/images/blue.png";
-  document.body.appendChild(img);
-  // Percentages should be  ignored.
-  assert_equals(getComputedStyle(img).height, "0px");
-});
-
-onload = t.step_func_done(function() {
-  let images = document.querySelectorAll("img");
-  assert_ratio(images[0], 2.0, "2.0 is the original aspect ratio of green.png");
-  assert_ratio(images[1], 2.0, "Loaded image's aspect ratio, at least by default, overrides width / height ratio.");
-  assert_ratio(images[2], 100/125, "aspect-ratio should override intrinsic size of images that don't have any src.");
-  assert_ratio(images[3], 100/125, "aspect-ratio should affect the size of error images.");
-  assert_not_equals(images[5].offsetHeight, 500, "Images with alt text should be inline and ignore the aspect ratio");
-  assert_ratio(images[6], 133/106, "The original aspect ratio of blue.png");
-});
-
 test_computed_style("10", "20", "auto 10 / 20");
 // These are invalid per spec, but see
 // https://github.com/whatwg/html/issues/4961
@@ -84,4 +47,65 @@ test_computed_style(null, "20", "auto");
 test_computed_style("xx", "20", "auto");
 test_computed_style("10%", "20", "auto");
 
+// Create and append a new image and immediately check the ratio.
+// This is not racy because the spec requires the user agent to queue a task:
+// https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data
+test(function() {
+  var img = new Image();
+  img.width = 250;
+  img.height = 100;
+  img.src = "/images/blue.png";
+  document.body.appendChild(img);
+  assert_ratio(img, 2.5);
+}, "Create, append and test immediately: <img> with attributes width=250, height=100");
+
+test(function () {
+  img = new Image();
+  img.setAttribute("width", "0.8");
+  img.setAttribute("height", "0.2");
+  img.src = "/images/blue.png";
+  document.body.appendChild(img);
+  assert_ratio(img, 4);
+}, "Create, append and test immediately: <img> with attributes width=0.8, height=0.2");
+
+test(function () {
+  img = new Image();
+  img.setAttribute("width", "50%");
+  img.setAttribute("height", "25%");
+  img.src = "/images/blue.png";
+  document.body.appendChild(img);
+  // Percentages should be  ignored.
+  assert_equals(getComputedStyle(img).height, "0px");
+}, "Create, append and test immediately: <img> with attributes width=50% height=25%");
+
+
+onload = function() {
+  let images = document.querySelectorAll("img");
+  // Tests for images finished loading.
+  test(function() {
+    assert_ratio(images[0], 2.0, "2.0 is the original aspect ratio of green.png");
+  }, "Loaded images test: <img> without width height attributes");
+
+  test(function() {
+    assert_ratio(images[1], 2.0, "Loaded image's aspect ratio, at least by default, overrides width / height ratio.");
+  }, "Loaded images test: <img> with width and height attributes, but conflicting to the original aspect ratio");
+
+  test(function () {
+    assert_ratio(images[2], 100 / 125, "aspect-ratio should override intrinsic size of images that don't have any src.");
+  }, "Loaded images test: <img> with width, height and empty src attributes");
+
+  test(function () {
+    assert_ratio(images[3], 100 / 125, "aspect-ratio should affect the size of error images.");
+  }, "Loaded images test: Error image with width and height attributes");
+
+  test(function () {
+    assert_not_equals(images[5].offsetHeight, 500, "Images with alt text should be inline and ignore the aspect ratio");
+  }, "Loaded images test: Error image with width, height and alt attributes");
+
+  test(function () {
+    assert_ratio(images[6], 133 / 106, "The original aspect ratio of blue.png");
+  }, "Loaded images test: <img> with width and height attributes, but not equal to the original aspect ratio");
+
+  guard.done();
+};
 </script>

testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html

@@ -43,7 +43,7 @@
 </picture>
 
 <script>
-let t = async_test("source width and height attributes are used to infer aspect-ratio in <picture>");
+let guard = async_test("source width and height attributes are used to infer aspect-ratio in <picture>");
 function assert_ratio(img, expected, description) {
   let epsilon = 0.001;
   assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10),
@@ -138,7 +138,9 @@ test(function() {
   assert_cs(img, "auto");
   assert_equals(getComputedStyle(img).width, "100px");
   assert_equals(getComputedStyle(img).height, "auto");
+}, "If we only have one width attribute, we should get width mapped but no aspect ratio, even if <img> has attributes.");
 
+test(function() {
   img = createPicture(undefined, 100);
   img.parentNode.style.display = "none";
   img.setAttribute("width", "200");
@@ -147,7 +149,7 @@ test(function() {
   assert_cs(img, "auto");
   assert_equals(getComputedStyle(img).width, "auto");
   assert_equals(getComputedStyle(img).height, "100px");
-}, "If we only have one width/height attribute, we should get that attribute mapped but no aspect ratio, even if <img> has attributes.");
+}, "If we only have height attribute, we should get height mapped but no aspect ratio, even if <img> has attributes.");
 
 test(function() {
   img = createPicture(100, 100);
@@ -203,8 +205,9 @@ test(function() {
   assert_equals(getComputedStyle(img).height, "50px");
 }, "Trailing garbage should be ignored but not make the attribute invalid");
 
-onload = t.step_func_done(function() {
+onload = function() {
   let images = document.querySelectorAll("img");
+  test(function() {
     var img = images[0];
     assert_ratio(img, 2.0, "2.0 is the original aspect ratio of green-100x50.png");
     assert_cs(img, "auto");
@@ -212,6 +215,9 @@ onload = t.step_func_done(function() {
     img.setAttribute("nowidth", "true");
     assert_equals(getComputedStyle(img).width, "auto");
     assert_equals(getComputedStyle(img).height, "auto");
+  }, "Loaded picture test: Both <source> and <img> are without width and height attributes");
+
+  test(function () {
     img = images[1];
     assert_ratio(img, 2.0, "Loaded image's aspect ratio, at least by default, overrides width / height ratio.");
     assert_cs(img, "auto 100 / 100");
@@ -219,6 +225,9 @@ onload = t.step_func_done(function() {
     img.setAttribute("nowidth", "true");
     assert_equals(getComputedStyle(img).width, "100px");
     assert_equals(getComputedStyle(img).height, "100px");
+  }, "Loaded picture test: <source> with width and height attributes, <img> without width and height attributes");
+
+  test(function () {
     img = images[2];
     assert_ratio(img, 2.0, "Loaded image's aspect ratio, at least by default, overrides width / height ratio (2).");
     assert_cs(img, "auto 100 / 100");
@@ -226,5 +235,8 @@ onload = t.step_func_done(function() {
     img.setAttribute("nowidth", "true");
     assert_equals(getComputedStyle(img).width, "100px");
     assert_equals(getComputedStyle(img).height, "100px");
-});
+  }, "Loaded picture test: Both <source> and <img> are with width and height attributes");
+
+  guard.done();
+};
 </script>

testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js

@@ -14,5 +14,5 @@ function test_computed_style_aspect_ratio(tag, attributes, expected) {
       assert_equals(aspectRatio, expected);
     }
     elem.remove();
-  }, `${tag} with ${JSON.stringify(attributes)}`);
+  }, `Computed style test: ${tag} with ${JSON.stringify(attributes)}`);
 }