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 @@
-Canvas width and height attributes are used as the surface size
+Canvas width and height attributes are used as the surface size, and also to infer aspect ratio
@@ -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");
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");
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 @@
-Video width and height attributes are not used to infer aspect-ratio
+Video width and height attributes are used to infer aspect-ratio
@@ -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");