Map the aspect ratio from width/height to CSS

Instead of having special code in image layout, map the aspect ratio that's computed from the width and height attributes to the aspect-ratio property. As a side-effect, this patch will also make the aspect-ratio property work when contain: size is specified in an image (as well as error images when no alt text is specified). As specified in whatwg/html#6032. R=masonfreed@chromium.org, xiaochengh@chromium.org Bug: 1137004 Change-Id: I1253fa2ecf1e176711d3c4d7bd4159f466656ae8
web-platform-tests · Oct 30, 2020 · 5222e4d · 5222e4d
1 parent bd2ff65
commit 5222e4d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/css/css-contain/contain-size-replaced-007.html b/css/css-contain/contain-size-replaced-007.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="This test checks that an aspect ratio computed from width and height attributes is used even with contain: size.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<img src="support/60x60-green.png" width="60" height="60" style="width: 100px; height: auto; contain: size;">
diff --git a/...dering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html b/...dering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html
@@ -16,9 +16,10 @@
 <img src="error.png">
 <script>
 let t = async_test("Image width and height attributes are used to infer aspect-ratio");
-function assert_ratio(img, expected) {
+function assert_ratio(img, expected, description) {
   let epsilon = 0.001;
-  assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10), expected, epsilon);
+  assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10),
+                       expected, epsilon, description);
 }
 // 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:
@@ -49,10 +50,10 @@
 
 onload = t.step_func_done(function() {
   let images = document.querySelectorAll("img");
-  assert_ratio(images[0], 2.0); // Loaded image's aspect ratio, at least by default, overrides width / height ratio.
-  assert_ratio(images[1], 2.0); // 2.0 is the original aspect ratio of green.png
-  assert_equals(getComputedStyle(images[2]).height, "0px"); // aspect-ratio doesn't override intrinsic size of images that don't have any src.
-  assert_equals(getComputedStyle(images[3]).height, getComputedStyle(images[4]).height); // aspect-ratio doesn't override intrinsic size of error images.
-  assert_ratio(images[5], 133/106); // The original aspect ratio of blue.png
+  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_ratio(images[5], 133/106, "The original aspect ratio of blue.png");
 });
 </script>