Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Gecko Bug 1700640] Map width and height to aspect-ratio in <canvas>, <input type=image>, and <video>. #28229

Merged
merged 1 commit into from Mar 26, 2021
Merged

[Gecko Bug 1700640] Map width and height to aspect-ratio in <canvas>, <input type=image>, and <video>. #28229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 17 additions & 15 deletions ...ing/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html
View file
Open in desktop
@@ -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>
28 changes: 14 additions & 14 deletions ...dering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html
View file
Open in desktop
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>
24 changes: 16 additions & 8 deletions ...ng/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js
View file
Open in desktop
@@ -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)}`);
}
29 changes: 14 additions & 15 deletions ...ring/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html
View file
Open in desktop
@@ -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>