Skip to content

Commit

Permalink
Map width and height to aspect-ratio in <canvas>, <input type=image>,…
Browse files Browse the repository at this point in the history
… 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 whatwg/html#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
  • Loading branch information
emilio authored and moz-wptsync-bot committed Mar 26, 2021
1 parent 8e9b781 commit 1bf1089
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 52 deletions.
@@ -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>
Expand Down Expand Up @@ -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>
Expand Up @@ -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>
@@ -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)}`);
}
@@ -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>
Expand Down Expand Up @@ -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>

0 comments on commit 1bf1089

Please sign in to comment.