From cb3caf21eeed0b7de961be41334437635d2d2dc3 Mon Sep 17 00:00:00 2001
From: Christian Biesinger <cbiesinger@chromium.org>
Date: Thu, 11 Feb 2021 08:07:34 -0800
Subject: [PATCH] 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
---
 .../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 html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js

diff --git a/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html b/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html
index 91fdc6c86c5559..816d84e4447816 100644
--- a/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html
+++ b/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 @@
   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 @@
   // 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/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html b/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html
index af4542e55fde52..79a9becca69c27 100644
--- a/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html
+++ b/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 @@
   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 @@
   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/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js b/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js
new file mode 100644
index 00000000000000..53226c38f5c9ac
--- /dev/null
+++ b/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/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html b/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html
index c81b70dbf4ea64..bfa91081e26ac8 100644
--- a/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html
+++ b/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 @@
   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 @@
     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>