diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-viewport/zoom')
19 files changed, 305 insertions, 0 deletions
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/zoom/line-height-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/line-height-ref.html new file mode 100644 index 0000000000..c75539243c --- /dev/null +++ b/testing/web-platform/tests/css/css-viewport/zoom/line-height-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style>CSS zoom applies to line-height when specified and inherited</style> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/"> +<div style="line-height: 12px; font-size: 12px"> + Double-spaced<br>12px font text +</div> + +<hr> + +<div style="line-height: 24px; font-size: 24px;"> + Double-spaced<br>12px font zoomed text +</div> + +<hr> + +<div style="line-height: 12px; font-size: 12px"> + <div style="line-height: 24px; font-size: 24px"> + Double-spaced<br>12px font zoomed inherited text + </div> +</div> + +<hr> diff --git a/testing/web-platform/tests/css/css-viewport/zoom/line-height.html b/testing/web-platform/tests/css/css-viewport/zoom/line-height.html new file mode 100644 index 0000000000..fa333be32f --- /dev/null +++ b/testing/web-platform/tests/css/css-viewport/zoom/line-height.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style>CSS zoom applies to line-height when specified and inherited</style> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/"> +<link rel="match" href="line-height-ref.html"> +<div style="line-height: 12px; font-size: 12px"> + Double-spaced<br>12px font text +</div> + +<hr> + +<div style="line-height: 12px; font-size: 12px; zoom: 2"> + Double-spaced<br>12px font zoomed text +</div> + +<hr> + +<div style="line-height: 12px; font-size: 12px"> + <div style="zoom:2"> + Double-spaced<br>12px font zoomed inherited text + </div> +</div> + +<hr> 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"> + |