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
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2679289
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#853156}
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 91fdc6c..816d84e 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 af4542e..79a9bec 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 0000000..53226c3
--- /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 c81b70d..bfa9108 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>
