summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-viewport
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-viewport')
-rw-r--r--testing/web-platform/tests/css/css-viewport/computedStyle-zoom.html57
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/background-image-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/background-image.html13
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/basic-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/basic.html16
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/font-size-ref.html19
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/font-size.html19
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/green-square-100px.html3
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/image-intrinsic-size.html14
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/inherited-length.html15
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/inherited.html21
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/line-height-ref.html (renamed from testing/web-platform/tests/css/css-viewport/line-height-ref.html)0
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/line-height.html (renamed from testing/web-platform/tests/css/css-viewport/line-height.html)0
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-computed.html23
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-valid.html27
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent-ref.html4
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent.html13
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/relative-units.html42
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/scroll-corner-crash.html7
-rw-r--r--testing/web-platform/tests/css/css-viewport/zoom/scrollbar-crash.html2
20 files changed, 286 insertions, 29 deletions
diff --git a/testing/web-platform/tests/css/css-viewport/computedStyle-zoom.html b/testing/web-platform/tests/css/css-viewport/computedStyle-zoom.html
index 30ed78e30b..82af111bbe 100644
--- a/testing/web-platform/tests/css/css-viewport/computedStyle-zoom.html
+++ b/testing/web-platform/tests/css/css-viewport/computedStyle-zoom.html
@@ -5,23 +5,23 @@
<link rel="help" href="https://drafts.csswg.org/css-viewport/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
-<head>
- <style>
- div {
+<style>
+ div {
width: 64px;
height: 64px;
+ line-height: 64px;
+ text-indent: 64px;
background-color: blue
- }
- div.x4_zoom {
+ }
+ div.x4_zoom {
zoom: 4.0;
background-color: blueviolet;
- }
- div.x2_zoom {
+ }
+ div.x2_zoom {
background-color: chartreuse;
zoom: 2.0;
- }
-
- </style>
+ }
+</style>
</head>
<body>
<div id="no_zoom"></div>
@@ -29,7 +29,7 @@
<div class="x2_zoom" id="parent_div">
<div class="x4_zoom" id="nested_zoom"></div>
</div>
- <div class="x2_zoom" id="testing_set_style" style="height: 1px; width: 1px;"></div>
+ <div class="x2_zoom" id="testing_set_style" style="height: 1px; width: 1px; line-height: 1px; text-indent: 1px;"></div>
<script>
test(function() {
assert_true(!!no_zoom, "no zoom target exists");
@@ -37,38 +37,37 @@
assert_true(!!nested_zoom, "zoom target exists");
assert_true(!!parent_div, "parent div with zoom exists")
});
+ function assert_length_props(style, expected) {
+ for (let prop of ["width", "height", "line-height", "text-indent"]) {
+ assert_equals(style.getPropertyValue(prop), expected, prop);
+ }
+ }
test(function(){
- noZoomStyle = window.getComputedStyle(no_zoom);
- assert_equals(noZoomStyle.getPropertyValue("width"), "64px");
- assert_equals(noZoomStyle.getPropertyValue("height"), "64px");
+ let noZoomStyle = getComputedStyle(no_zoom);
+ assert_length_props(noZoomStyle, "64px");
assert_equals(noZoomStyle.getPropertyValue("zoom"), "1");
});
test(function(){
- withZoomStyle = window.getComputedStyle(with_zoom);
- assert_equals(withZoomStyle.getPropertyValue("width"), "64px");
- assert_equals(withZoomStyle.getPropertyValue("height"), "64px");
+ let withZoomStyle = getComputedStyle(with_zoom);
+ assert_length_props(withZoomStyle, "64px");
assert_equals(withZoomStyle.getPropertyValue("zoom"), "4");
});
test(function(){
- parentWithZoomStyle = window.getComputedStyle(parent_div);
- assert_equals(parentWithZoomStyle.getPropertyValue("width"), "64px");
- assert_equals(parentWithZoomStyle.getPropertyValue("height"), "64px");
+ let parentWithZoomStyle = getComputedStyle(parent_div);
+ assert_length_props(parentWithZoomStyle, "64px");
assert_equals(parentWithZoomStyle.getPropertyValue("zoom"), "2");
});
test(function(){
- nestedZoomStyle = window.getComputedStyle(nested_zoom);
- assert_equals(nestedZoomStyle.getPropertyValue("width"), "64px");
- assert_equals(nestedZoomStyle.getPropertyValue("height"), "64px");
+ nestedZoomStyle = getComputedStyle(nested_zoom);
+ assert_length_props(nestedZoomStyle, "64px");
assert_equals(nestedZoomStyle.getPropertyValue("zoom"), "4");
});
test(function(){
- testDivStyle = window.getComputedStyle(testing_set_style);
- assert_equals(testDivStyle.getPropertyValue("width"), "1px");
- assert_equals(testDivStyle.getPropertyValue("height"), "1px");
+ testDivStyle = getComputedStyle(testing_set_style);
+ assert_length_props(testDivStyle, "1px");
assert_equals(testDivStyle.getPropertyValue("zoom"), "2");
- window.testing_set_style.setAttribute("style", "width: 64px; height: 64px;");
- assert_equals(testDivStyle.getPropertyValue("width"), "64px");
- assert_equals(testDivStyle.getPropertyValue("height"), "64px");
+ testing_set_style.setAttribute("style", "width: 64px; height: 64px; line-height: 64px; text-indent: 64px;");
+ assert_length_props(testDivStyle, "64px");
assert_equals(testDivStyle.getPropertyValue("zoom"), "2");
});
</script>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/background-image-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/background-image-ref.html
new file mode 100644
index 0000000000..6fe548f343
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/background-image-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+div {
+ width: 10px;
+ height: 10px;
+ background-image: image-set(url("/images/pattern.png") 2x);
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/background-image.html b/testing/web-platform/tests/css/css-viewport/zoom/background-image.html
new file mode 100644
index 0000000000..805dad187d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/background-image.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>Zoom affects background-image intrinsic sizes</title>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<link rel="match" href="background-image-ref.html">
+<style>
+div {
+ width: 20px;
+ height: 20px;
+ zoom: 0.5;
+ background-image: url("/images/pattern.png"); /* 20x20 */
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/basic-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/basic-ref.html
new file mode 100644
index 0000000000..5de90caf7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/basic-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<style>
+div {
+ background-color: green;
+}
+</style>
+<div style="width: 100px; height: 100px"></div>
+<div style="width: 200px; height: 200px;"></div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/basic.html b/testing/web-platform/tests/css/css-viewport/zoom/basic.html
new file mode 100644
index 0000000000..580d3c83cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/basic.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>zoom property: basic test</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.com" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<link rel="match" href="basic-ref.html">
+<style>
+div {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+}
+</style>
+<div></div>
+<div style="zoom: 2"></div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/font-size-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/font-size-ref.html
new file mode 100644
index 0000000000..5714a878b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/font-size-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<style>CSS Test reference</style>
+<div style="font-size: 12px">
+ 12px text
+</div>
+
+<hr>
+
+<div style="font-size: 24px;">
+ 12px zoomed text
+</div>
+
+<hr>
+
+<div style="font-size: 12px">
+ <div style="font-size: 24px">
+ 12px zoomed inherited text
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/font-size.html b/testing/web-platform/tests/css/css-viewport/zoom/font-size.html
new file mode 100644
index 0000000000..e4b20c3c93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/font-size.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<style>CSS zoom applies to font-size when specified and inherited</style>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<link rel="match" href="font-size-ref.html">
+<div style="font-size: 12px">
+ 12px text
+</div>
+<hr>
+<div style="font-size: 12px; zoom: 2">
+ 12px zoomed text
+</div>
+<hr>
+<div style="font-size: 12px">
+ <div style="zoom:2">
+ 12px zoomed inherited text
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/green-square-100px.html b/testing/web-platform/tests/css/css-viewport/zoom/green-square-100px.html
new file mode 100644
index 0000000000..6677176230
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/green-square-100px.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<meta charset="utf-8">
+<div style="width: 100px; height: 100px; background-color: green"></div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/image-intrinsic-size.html b/testing/web-platform/tests/css/css-viewport/zoom/image-intrinsic-size.html
new file mode 100644
index 0000000000..d152bb24ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/image-intrinsic-size.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Zoom affects image intrinsic sizes</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<link rel="match" href="background-image-ref.html">
+<style>
+img {
+ vertical-align: top;
+ zoom: .5;
+}
+</style>
+<img src="/images/pattern.png">
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/inherited-length.html b/testing/web-platform/tests/css/css-viewport/zoom/inherited-length.html
new file mode 100644
index 0000000000..d83111a435
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/inherited-length.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>zoom property: inherited length into zoom</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.com" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<link rel="match" href="green-square-100px.html">
+<style>
+div {
+ background-color: green;
+}
+</style>
+<div style="width: 100px; height: 100px;">
+ <div style="zoom: 2; width: inherit;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/inherited.html b/testing/web-platform/tests/css/css-viewport/zoom/inherited.html
new file mode 100644
index 0000000000..2c8ad1694a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/inherited.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Effective zoom value is inherited</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.com" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<link rel="match" href="basic-ref.html">
+<style>
+.container {
+ zoom: 2;
+}
+.child {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+}
+</style>
+<div class="child"></div>
+<div class="container">
+ <div class="child"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-viewport/line-height-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/line-height-ref.html
index c75539243c..c75539243c 100644
--- a/testing/web-platform/tests/css/css-viewport/line-height-ref.html
+++ b/testing/web-platform/tests/css/css-viewport/zoom/line-height-ref.html
diff --git a/testing/web-platform/tests/css/css-viewport/line-height.html b/testing/web-platform/tests/css/css-viewport/zoom/line-height.html
index fa333be32f..fa333be32f 100644
--- a/testing/web-platform/tests/css/css-viewport/line-height.html
+++ b/testing/web-platform/tests/css/css-viewport/zoom/line-height.html
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-computed.html b/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-computed.html
new file mode 100644
index 0000000000..41fb1b24ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-computed.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: getComputedStyle().zoom</title>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("zoom", "normal", "1");
+
+test_computed_value("zoom", "1", "1");
+test_computed_value("zoom", "1.5", "1.5");
+test_computed_value("zoom", "0.75", "0.75");
+
+test_computed_value("zoom", "100%", "1");
+test_computed_value("zoom", "150%", "1.5");
+test_computed_value("zoom", "75%", "0.75");
+
+// Legacy crap, wat
+test_computed_value("zoom", "0", "1");
+test_computed_value("zoom", "0%", "1");
+</script>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-valid.html b/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-valid.html
new file mode 100644
index 0000000000..3f36508b8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-valid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: parsing zoom with valid and invalid values</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<body>
+<script>
+test_valid_value("zoom", "normal");
+test_valid_value("zoom", "1");
+test_valid_value("zoom", "100%");
+test_valid_value("zoom", "0");
+test_valid_value("zoom", "0%");
+test_valid_value("zoom", "1.5");
+test_valid_value("zoom", "150%")
+test_valid_value("zoom", "75%");
+test_valid_value("zoom", "0.5");
+
+test_invalid_value("zoom", "auto");
+test_invalid_value("zoom", "-100%");
+test_invalid_value("zoom", "-200%");
+test_invalid_value("zoom", "-1");
+test_invalid_value("zoom", "-2");
+</script>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent-ref.html
new file mode 100644
index 0000000000..4e7456ce71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<div style="font-size: 4em; line-height: 4lh">ABC</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent.html b/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent.html
new file mode 100644
index 0000000000..57df82b6f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1892676">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<link rel="match" href="relative-units-from-parent-ref.html">
+<!--
+ The font-size and line-height use the parent sizes, but should still
+ multiply by our own zoom.
+-->
+<div style="zoom: 2; font-size: 2em; line-height: 2lh">ABC</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/relative-units.html b/testing/web-platform/tests/css/css-viewport/zoom/relative-units.html
new file mode 100644
index 0000000000..8cfa27c93a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/relative-units.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1892676">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+ :root,
+ #zoomed {
+ font-size: 10px;
+ line-height: 10px;
+ zoom: 2;
+ }
+</style>
+<div id="outside"></div>
+<div id="zoomed">
+ <div id="inside"></div>
+</div>
+<script>
+ function test_unit(unit, outside, zoomed, inside = zoomed) {
+ test(function() {
+ let values = { outside, zoomed, inside };
+ for (let id of ["outside", "zoomed", "inside"]) {
+ let el = document.getElementById(id);
+ el.style.height = "1" + unit;
+ // approx_equals is needed because innerHeight / innerWidth round.
+ assert_approx_equals(el.getBoundingClientRect().height, values[id], 1, `${unit} in ${id}`);
+ el.style.height = "";
+ }
+ });
+ }
+
+ test_unit("em", 20, 40);
+ test_unit("rem", 20, 40);
+ test_unit("lh", 20, 40);
+ test_unit("rlh", 20, 40);
+ test_unit("vh", 2 * innerHeight / 100, 4 * innerHeight / 100);
+ test_unit("vw", 2 * innerWidth / 100, 4 * innerWidth / 100);
+</script>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/scroll-corner-crash.html b/testing/web-platform/tests/css/css-viewport/zoom/scroll-corner-crash.html
new file mode 100644
index 0000000000..0ec88deb74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/scroll-corner-crash.html
@@ -0,0 +1,7 @@
+<style>
+* {
+ overflow: scroll scroll;
+}
+</style>
+<h4 style="zoom: 3">
+<figure>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/scrollbar-crash.html b/testing/web-platform/tests/css/css-viewport/zoom/scrollbar-crash.html
new file mode 100644
index 0000000000..791022407f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/scrollbar-crash.html
@@ -0,0 +1,2 @@
+<textarea style="zoom: 0.20">
+