From b72540b1cc135f11f5fbde43ccae6311981feba5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Wed, 24 Mar 2021 22:23:33 +0000
Subject: [PATCH] Map width and height to aspect-ratio in <canvas>, <input
 type=image>, and <video>.

As per https://html.spec.whatwg.org/#attributes-for-embedded-content-and-images:

> The width and height attributes map to the aspect-ratio property on
> img, canvas, and video elements, and input elements with a type
> attribute in the Image Button state.

See https://github.com/whatwg/html/issues/6527 for the parsing issue
with canvas and zero. For now allow both behaviors in the tests.

We also remove the width-and-height-map-to-aspect-ratio pref, as it is
true everywhere and has been for a while.

Differential Revision: https://phabricator.services.mozilla.com/D109618

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1700640
gecko-commit: 985b66b916980b78328063dfdccdc5e5b71318e5
gecko-reviewers: boris
---
 .../canvas-aspect-ratio.html                  | 32 ++++++++++---------
 .../img-aspect-ratio.html                     | 28 ++++++++--------
 .../resources/aspect-ratio.js                 | 24 +++++++++-----
 .../video-aspect-ratio.html                   | 29 ++++++++---------
 4 files changed, 61 insertions(+), 52 deletions(-)
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 816d84e4447816..8768a050b1094f 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
@@ -1,5 +1,5 @@
 <!doctype html>
-<title>Canvas width and height attributes are used as the surface size</title>
+<title>Canvas width and height attributes are used as the surface size, and also to infer aspect ratio</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="resources/aspect-ratio.js"></script>
@@ -37,20 +37,22 @@
   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_computed_style("10", "20", "auto 10 / 20");
+// These are invalid per spec, but see
+// https://github.com/whatwg/html/issues/4961
+test_computed_style("0", "1", ["auto", "auto 0 / 1"]);
+test_computed_style("1", "0", ["auto", "auto 1 / 0"]);
+test_computed_style("0", "0", ["auto", "auto 0 / 0"]);
 
-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");
+// See https://github.com/whatwg/html/issues/4961:
+// https://html.spec.whatwg.org/#attr-canvas-width
+// https://html.spec.whatwg.org/#rules-for-parsing-non-negative-integers
+test_computed_style("0.5", "1.5", ["auto 0 / 1", "auto 0.5 / 1.5"]);
+test_computed_style("10%", "20", ["auto", "auto 10 / 20"]);
+
+test_computed_style(null, null, "auto");
+test_computed_style("10", null, "auto");
+test_computed_style(null, "20", "auto");
+test_computed_style("xx", "20", "auto");
 
 </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 dd163fdf294709..77fbd9c7dfb56e 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
@@ -68,20 +68,20 @@
   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_computed_style("10", "20", "auto 10 / 20");
+// These are invalid per spec, but see
+// https://github.com/whatwg/html/issues/4961
+test_computed_style("0", "1", "auto 0 / 1");
+test_computed_style("1", "0", "auto 1 / 0");
+test_computed_style("0", "0", "auto 0 / 0");
+// https://html.spec.whatwg.org/#map-to-the-aspect-ratio-property
+// https://html.spec.whatwg.org/#rules-for-parsing-non-zero-dimension-values
+test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
 
-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");
+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");
 
 </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
index 53226c38f5c9ac..a7b16a0bd5db5f 100644
--- 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
@@ -1,10 +1,18 @@
 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);
+  test(function() {
+    var elem = document.createElement(tag);
+    for (name in attributes) {
+      let val = attributes[name];
+      if (val !== null)
+        elem.setAttribute(name, val);
+    }
+    document.body.appendChild(elem);
+    let aspectRatio = getComputedStyle(elem).aspectRatio;
+    if (Array.isArray(expected)) {
+      assert_in_array(aspectRatio, expected);
+    } else {
+      assert_equals(aspectRatio, expected);
+    }
+    elem.remove();
+  }, `${tag} with ${JSON.stringify(attributes)}`);
 }
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 bfa91081e26ac8..22c79050bc0c8e 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
@@ -1,5 +1,5 @@
 <!doctype html>
-<title>Video width and height attributes are not used to infer aspect-ratio</title>
+<title>Video 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="/common/media.js"></script>
@@ -50,20 +50,19 @@
   });
 }, "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_computed_style("10", "20", "auto 10 / 20");
+test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
 
-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");
+// These are invalid per spec, but see
+// https://github.com/whatwg/html/issues/4961
+test_computed_style("0", "1", ["auto", "auto 0 / 1"]);
+test_computed_style("1", "0", ["auto", "auto 1 / 0"]);
+test_computed_style("0", "0", ["auto", "auto 0 / 0"]);
+
+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");
 
 </script>
