From f7b2a8684eeb5dcf9e87b7a58eeb29cf4adb8f55 Mon Sep 17 00:00:00 2001
From: Christian Biesinger <cbiesinger@chromium.org>
Date: Fri, 12 Feb 2021 16:26:34 +0000
Subject: [PATCH] Bug 1692252 [wpt PR 27527] - Add tests for mapping of
 width/height to aspect-ratio, a=testonly

Automatic update from web-platform-tests
Add tests for mapping of width/height to aspect-ratio

This covers video, img and canvas.

This is for https://github.com/whatwg/html/pull/6032. See also
https://github.com/web-platform-tests/wpt/pull/26010.

R=masonfreed@chromium.org, yoavweiss@chromium.org

Bug: 1137004
Change-Id: I38d690412af67836e4fdede11c5b4938e47f138f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2679289
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#853156}

--

wpt-commits: 87acfece9dfcb016236468d1710c626e92128a57
wpt-pr: 27527
---
 .../canvas-aspect-ratio.html                       | 22 +++++++++++++++++++++
 .../img-aspect-ratio.html                          | 23 ++++++++++++++++++++++
 .../resources/aspect-ratio.js                      | 10 ++++++++++
 .../video-aspect-ratio.html                        | 22 +++++++++++++++++++++
 4 files changed, 77 insertions(+)
 create mode 100644 testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js

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
index 91fdc6c86c55..816d84e44478 100644
--- 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
@@ -2,6 +2,7 @@
 <title>Canvas width and height attributes are used as the surface size</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="resources/aspect-ratio.js"></script>
 <style>
   canvas {
     width: 100%;
@@ -17,6 +18,10 @@ function assert_ratio(img, expected) {
   assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
 }
 
+function test_computed_style(width, height, expected) {
+  test_computed_style_aspect_ratio("canvas", {width: width, height: height}, expected);
+}
+
 test(function() {
   canvas = document.getElementById("contained");
   assert_ratio(canvas, 2.5);
@@ -31,4 +36,21 @@ test(function() {
   // Canvases always use the aspect ratio from their surface size.
   assert_ratio(canvas, 2.5);
 }, "Canvas width and height attributes are used as the surface size");
+
+test(function() {
+  test_computed_style("10", "20", "auto 10 / 20");
+  test_computed_style("0", "1", "auto 0 / 1");
+  test_computed_style("1", "0", "auto 1 / 0");
+  test_computed_style("0", "0", "auto 0 / 0");
+  test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
+}, "Computed style");
+
+test(function() {
+  test_computed_style(null, null, "auto");
+  test_computed_style("10", null, "auto");
+  test_computed_style(null, "20", "auto");
+  test_computed_style("xx", "20", "auto");
+  test_computed_style("10%", "20", "auto");
+}, "Computed style for invalid ratios");
+
 </script>
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html
index af4542e55fde..79a9becca69c 100644
--- a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html
+++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html
@@ -2,6 +2,7 @@
 <title>Image width and height attributes are used to infer aspect-ratio</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="resources/aspect-ratio.js"></script>
 <style>
   img {
     width: 100%;
@@ -22,6 +23,11 @@ function assert_ratio(img, expected, description) {
   assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10),
                        expected, epsilon, description);
 }
+
+function test_computed_style(width, height, expected) {
+  test_computed_style_aspect_ratio("img", {width: width, height: height}, expected);
+}
+
 // 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
@@ -58,4 +64,21 @@ onload = t.step_func_done(function() {
   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(function() {
+  test_computed_style("10", "20", "auto 10 / 20");
+  test_computed_style("0", "1", "auto 0 / 1");
+  test_computed_style("1", "0", "auto 1 / 0");
+  test_computed_style("0", "0", "auto 0 / 0");
+  test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
+}, "Computed style");
+
+test(function() {
+  test_computed_style(null, null, "auto");
+  test_computed_style("10", null, "auto");
+  test_computed_style(null, "20", "auto");
+  test_computed_style("xx", "20", "auto");
+  test_computed_style("10%", "20", "auto");
+}, "Computed style for invalid ratios");
+
 </script>
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js
new file mode 100644
index 000000000000..53226c38f5c9
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js
@@ -0,0 +1,10 @@
+function test_computed_style_aspect_ratio(tag, attributes, expected) {
+  var elem = document.createElement(tag);
+  for (name in attributes) {
+    let val = attributes[name];
+    if (val !== null)
+      elem.setAttribute(name, val);
+  }
+  document.body.appendChild(elem);
+  assert_equals(getComputedStyle(elem).aspectRatio, expected);
+}
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
index c81b70dbf4ea..bfa91081e26a 100644
--- 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
@@ -3,6 +3,7 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/common/media.js"></script>
+<script src="resources/aspect-ratio.js"></script>
 <style>
   video {
     width: 100%;
@@ -19,6 +20,10 @@ function assert_ratio(img, expected) {
   assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
 }
 
+function test_computed_style(width, height, expected) {
+  test_computed_style_aspect_ratio("video", {width: width, height: height}, expected);
+}
+
 t.step(function() {
   var video = document.getElementById("contained");
   video.src = getVideoURI('/media/2x2-green');
@@ -44,4 +49,21 @@ t.step(function() {
     assert_ratio(video, 1);
   });
 }, "aspect ratio for regular video");
+
+test(function() {
+  test_computed_style("10", "20", "auto 10 / 20");
+  test_computed_style("0", "1", "auto 0 / 1");
+  test_computed_style("1", "0", "auto 1 / 0");
+  test_computed_style("0", "0", "auto 0 / 0");
+  test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
+}, "Computed style");
+
+test(function() {
+  test_computed_style(null, null, "auto");
+  test_computed_style("10", null, "auto");
+  test_computed_style(null, "20", "auto");
+  test_computed_style("xx", "20", "auto");
+  test_computed_style("10%", "20", "auto");
+}, "Computed style for invalid ratios");
+
 </script>
-- 
2.11.4.GIT