Bug 1580000 [wpt PR 18945] - Compute img aspect ratio from width and height HTML attributes, a=testonly

marco-c · marco-c · commit 3ccf9cf883d1 · 2019-10-04T17:25:28.000Z
Automatic update from web-platform-tests Compute img aspect ratio from width and height HTML attributes As per this intent to implement: https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/blink-dev/hbhKRuBzZ4o Spec: WICG/intrinsicsize-attribute#16 Bug: 979891 Change-Id: I0f9ffa1584fa12a41393ef05daffb7238c97e990 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1790472 Commit-Queue: Christian Biesinger <cbiesingerchromium.org> Reviewed-by: Emilio Cobos Álvarez <emiliochromium.org> Auto-Submit: Christian Biesinger <cbiesingerchromium.org> Cr-Commit-Position: refs/heads/master{#699465} -- wpt-commits: 86ff86de45a67eccc781b84f50ab261c18aad5cf wpt-pr: 18945 UltraBlame original commit: e8962724f6cc584847fedccd8c0912b6bd00dab6
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>Canvas width and height attributes are used to infer aspect-ratio</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  canvas {
+    width: 100%;
+    max-width: 100px;
+    height: auto;
+  }
+</style>
+<body>
+<script>
+let t = async_test("Canvas width and height attributes are used to infer aspect-ratio");
+function assert_ratio(img, expected) {
+  let epsilon = 0.001;
+  assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
+}
+// Create and append a new canvas and immediately check the ratio.
+t.step(function() {
+  var canvas = document.createElement("canvas");
+  canvas.setAttribute("width", "250");
+  canvas.setAttribute("height", "100");
+  document.body.appendChild(canvas);
+  // Canvases always use the aspect ratio from their surface size.
+  assert_ratio(canvas, 2.5);
+
+  t.done();
+});
+</script>
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.tentative.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.tentative.html
@@ -9,7 +9,6 @@
     height: auto;
   }
 </style>
-<img src=broken width=100 height=125>
 <img src="/images/green.png">
 <img src="/images/green.png" width=100 height=125>
 <script>
@@ -18,10 +17,37 @@
   let epsilon = 0.001;
   assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
 }
+// 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], 0.8);
-  assert_ratio(images[2], 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], 1.266); // 1.266 is the original aspect ratio of blue.png
+  assert_ratio(images[1], 2.0); // 2.0 is the original aspect ratio of green.png
+  assert_ratio(images[0], 2.0); // Loaded image's aspect ratio, at least by default, overrides width / height ratio.
 });
 </script>
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<title>Video width and height attributes are not used to infer aspect-ratio</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/media.js"></script>
+<style>
+  video {
+    width: 100%;
+    max-width: 100px;
+    height: auto;
+  }
+</style>
+<body>
+<script>
+let t = async_test("Video width and height attributes are not used to infer aspect-ratio");
+function assert_ratio(img, expected) {
+  let epsilon = 0.001;
+  assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
+}
+// Create and append a new video 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/media.html#concept-media-load-algorithm
+t.step(function() {
+  var video = document.createElement("video");
+  video.setAttribute("width", "250");
+  video.setAttribute("height", "100");
+  video.src = getVideoURI('/media/2x2-green');
+  document.body.appendChild(video);
+  // Videos default to a size of 300x150px and calculate their aspect ratio
+  // based on that before the video is loaded. So this should be 2, ignoring
+  // the 2.5 that it would be based on the attributes.
+  assert_ratio(video, 2);
+
+  video.onloadeddata = t.step_func_done(function() {
+    // When loaded this video is square.
+    assert_ratio(video, 1);
+  });
+});
+</script>
