diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-viewport')
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"> + |