diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/fullscreen/rendering | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/fullscreen/rendering')
14 files changed, 422 insertions, 0 deletions
diff --git a/testing/web-platform/tests/fullscreen/rendering/backdrop-green-ref.html b/testing/web-platform/tests/fullscreen/rendering/backdrop-green-ref.html new file mode 100644 index 0000000000..3126fe1942 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/backdrop-green-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<body style="background: green"></body> diff --git a/testing/web-platform/tests/fullscreen/rendering/backdrop-iframe.html b/testing/web-platform/tests/fullscreen/rendering/backdrop-iframe.html new file mode 100644 index 0000000000..dbdf9c841a --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/backdrop-iframe.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>::backdrop for a fullscreen iframe element</title> +<link rel=match href="backdrop-green-ref.html"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6939"> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<style> +iframe::backdrop { + background: green; +} +</style> +<iframe></iframe> +<script> +document.addEventListener('fullscreenchange', () => { + document.documentElement.classList.remove('reftest-wait'); +}); +test_driver.bless('fullscreen', () => { + document.querySelector('iframe').requestFullscreen(); +}); +</script> diff --git a/testing/web-platform/tests/fullscreen/rendering/backdrop-inherit.html b/testing/web-platform/tests/fullscreen/rendering/backdrop-inherit.html new file mode 100644 index 0000000000..3a38dc4c81 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/backdrop-inherit.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>::backdrop inherits style from the fullscreen element</title> +<link rel=match href="backdrop-green-ref.html"> +<link rel=help href="https://github.com/whatwg/fullscreen/issues/124"> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<style> +body { + --bg: red; +} +div { + --bg: green; +} +div::backdrop { + background: var(--bg); +} +</style> +<div></div> +<script> +document.addEventListener('fullscreenchange', () => { + document.documentElement.classList.remove('reftest-wait'); +}); +test_driver.bless('fullscreen', () => { + document.querySelector('div').requestFullscreen(); +}); +</script> diff --git a/testing/web-platform/tests/fullscreen/rendering/backdrop-object-ref.html b/testing/web-platform/tests/fullscreen/rendering/backdrop-object-ref.html new file mode 100644 index 0000000000..6c7071a727 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/backdrop-object-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> +body { + background: blue; + margin: 0; +} +div { + position: fixed; + width: 100px; + height: 100px; + background: green; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/fullscreen/rendering/backdrop-object.html b/testing/web-platform/tests/fullscreen/rendering/backdrop-object.html new file mode 100644 index 0000000000..be285b7612 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/backdrop-object.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>::backdrop for a fullscreen object element</title> +<link rel=match href="backdrop-object-ref.html"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6939"> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<style> +object::backdrop { + background: blue; +} +</style> +<object width="200" type="image/svg+xml" data="../../images/100px-green-rect.svg"></object> +<script> +const object = document.querySelector("object"); +Promise.all([ + new Promise((resolve, reject) => document.addEventListener("fullscreenchange", resolve)), + new Promise((resolve, reject) => object.addEventListener("load", resolve)) +]).then(() => document.documentElement.classList.remove('reftest-wait')); + +test_driver.bless('fullscreen', () => object.requestFullscreen()); +</script> diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-invalidation.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-invalidation.html new file mode 100644 index 0000000000..e855d0c193 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-invalidation.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Invalidate :fullscreen based style</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<style> + #pass { + color: red; + } + :root:fullscreen #pass { + color: green; + } +</style> +<div id="pass">Should be green</div> +<script> + async_test(t => { + document.onfullscreenchange = t.step_func_done(() => { + assert_equals(document.fullscreenElement, document.documentElement); + assert_equals(getComputedStyle(pass).color, "rgb(0, 128, 0)", "Green when :root is fullscreened."); + }); + document.documentElement.addEventListener('click', t.step_func(() => { + document.documentElement.requestFullscreen(); + }), {once: true}); + assert_equals(getComputedStyle(pass).color, "rgb(255, 0, 0)", "Initially red."); + test_driver.click(document.documentElement); + }); +</script> diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-transition.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-transition.html new file mode 100644 index 0000000000..b494dc04e6 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-transition.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Transitions should not be stopped by going fullscreen</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<style> + #trans { + transition: color steps(1, end) 100s; + color: green; + } +</style> +<div id="trans">Should be green</div> +<script> + async_test(t => { + document.onfullscreenchange = t.step_func_done(() => { + assert_equals(document.fullscreenElement, trans); + assert_equals(getComputedStyle(trans).color, "rgb(0, 128, 0)", "Transition is in progress - still green"); + }); + trans.addEventListener('click', t.step_func(() => { + trans.style.color = "red"; + trans.offsetTop; + trans.requestFullscreen(); + }), {once: true}); + test_driver.click(trans); + }); +</script> diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class-support.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class-support.html new file mode 100644 index 0000000000..fb2ff318b9 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class-support.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>:fullscreen pseudo-class support</title> +<link rel="help" href="https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class"> +<link rel="help" href="https://dom.spec.whatwg.org/#dom-element-matches"> +<link rel="help" href="https://dom.spec.whatwg.org/#dom-parentnode-queryselector"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<script> +// This is a separate test so that support for :fullscreen can be detected +// without actually going fullscreen. If it were not supported, then this test +// would fail. +test(t => { + // precondition is to throw for unknown pseudo-classes: + assert_throws_dom("SyntaxError", () => document.body.matches(':halfscreen')); + assert_throws_dom("SyntaxError", () => document.querySelector(':halfscreen')); + // the actual test: + assert_false(document.body.matches(':fullscreen')); + assert_equals(document.querySelector(':fullscreen'), null); +}); +</script> diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class.html new file mode 100644 index 0000000000..5b02c32ef3 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title>:fullscreen pseudo-class</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="../trusted-click.js"></script> +<div><div></div></div> +<script> + promise_test(async (t) => { + t.add_cleanup(() => { + if (document.fullscreenElement) { + return document.exitFullscreen(); + } + }); + const outer = document.querySelector("div"); + const inner = outer.firstChild; + + // First request fullscreen for the outer element. + await trusted_request(outer); + await fullScreenChange(); + assert_equals(document.fullscreenElement, outer); + assert_true( + outer.matches(":fullscreen"), + "outer:fullscreen in simple fullscreen" + ); + assert_false( + inner.matches(":fullscreen"), + "inner:fullscreen in simple fullscreen" + ); + + // Then request fullscreen for the inner element. + await trusted_request(inner); + // Although inner is the fullscreen element, both elements match the + // selector, as both have their fullscreen flag set. + assert_equals(document.fullscreenElement, inner); + assert_true( + inner.matches(":fullscreen"), + "inner:fullscreen in nested fullscreen" + ); + assert_true( + outer.matches(":fullscreen"), + "outer:fullscreen in nested fullscreen" + ); + }); +</script> diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-scroll.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-scroll.html new file mode 100644 index 0000000000..87147b42e0 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-scroll.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<style> + body { + height: 10000px; + background: grey; + } +</style> +<title>fullscreen root block scrolling</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="../trusted-click.js"></script> +<body> +<div> + This page tests that entering fullscreen doesn't adjust the scroll offset +</div> +<script> + promise_test(async (t) => { + t.add_cleanup(() => { + if (document.fullscreenElement) { + return document.exitFullscreen(); + } + }); + await trusted_click(); + document.scrollingElement.scrollTop = 300; + await document.documentElement.requestFullscreen(); + await fullScreenChange(); + + assert_equals(document.fullscreenElement, document.documentElement); + assert_not_equals(document.scrollingElement.scrollTop, 0); + document.scrollingElement.scrollTop = 0; + }); +</script> diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-size.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-size.html new file mode 100644 index 0000000000..5138494d5d --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-size.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<style> + html, + body { + margin: 0px; + } +</style> +<title>fullscreen root block sizing</title> +<!-- This page intentionally has no content. It needs to have +no width or height. This is to ensure that the root element +gets sizing in fullscreen mode as it does in as it does not +in fullscreen mode. +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="../trusted-click.js"></script> +<body></body> +<script> + promise_test(async (t) => { + t.add_cleanup(() => { + if (document.fullscreenElement) { + return document.exitFullscreen(); + } + }); + await trusted_click(); + await document.documentElement.requestFullscreen(); + await fullScreenChange(); + assert_equals(document.fullscreenElement, document.documentElement); + assert_true(document.documentElement.getBoundingClientRect().width > 0); + }); +</script> diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page-ref.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page-ref.html new file mode 100644 index 0000000000..b2bf13557a --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <style> + html, body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + } + + body { + background-color: green; + } + </style> +</head> +<body></body> +</html> diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page.html new file mode 100644 index 0000000000..e2a6217346 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> + <link rel="match" href="fullscreen-root-fills-page-ref.html"> + <style> + html { + background-color: red; + height: 100%; + overflow: hidden; + + /* These should be no-op */ + top: 200px; + left: 200px; + right: 200px; + bottom: 200px; + } + + html, body { + margin: 0; + padding: 0; + } + + body, #cover { + height: 100%; + width: 100%; + } + + #cover { + background-color: green; + } + </style> +</head> + +<body> + <div id="cover"></div> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script> + document.addEventListener("fullscreenchange", () => { + document.documentElement.classList.remove("reftest-wait"); + }); + test_driver.bless("fullscreen") + .then(() => document.documentElement.requestFullscreen()) + </script> +</body> +</html> diff --git a/testing/web-platform/tests/fullscreen/rendering/ua-style-iframe.html b/testing/web-platform/tests/fullscreen/rendering/ua-style-iframe.html new file mode 100644 index 0000000000..dcf1656e00 --- /dev/null +++ b/testing/web-platform/tests/fullscreen/rendering/ua-style-iframe.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<title>User-agent levels style sheet defaults for iframe</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="../trusted-click.js"></script> +<style> + iframe { + border: 1px solid blue; + padding: 1px; + /* transform is also tested because of https://crbug.com/662393 */ + transform: scale(0.5); + } +</style> +<div id="log"></div> +<div id="ancestor"><iframe></iframe></div> +<script> + function assert_dir_properties(style, propBase, value, state) { + for (let dir of ["Top", "Right", "Bottom", "Left"]) { + let prop = propBase.replace("{}", dir); + assert_equals(style[prop], value, `${state} ${prop} style`); + } + } + + promise_test(async (t) => { + t.add_cleanup(() => { + if (document.fullscreenElement) { + return document.exitFullscreen(); + } + }); + const ancestor = document.getElementById("ancestor"); + const iframe = ancestor.firstChild; + + const initialStyle = getComputedStyle(iframe); + assert_dir_properties(initialStyle, "border{}Width", "1px", "initial"); + assert_dir_properties(initialStyle, "border{}Style", "solid", "initial"); + assert_dir_properties( + initialStyle, + "border{}Color", + "rgb(0, 0, 255)", + "initial" + ); + assert_dir_properties(initialStyle, "padding{}", "1px", "initial"); + assert_equals( + initialStyle.transform, + "matrix(0.5, 0, 0, 0.5, 0, 0)", + "initial transform style" + ); + + await trusted_request(iframe); + await fullScreenChange(); + + const fullscreenStyle = getComputedStyle(iframe); + assert_dir_properties( + fullscreenStyle, + "border{}Width", + "0px", + "fullscreen" + ); + assert_dir_properties( + fullscreenStyle, + "border{}Style", + "none", + "fullscreen" + ); + assert_dir_properties( + fullscreenStyle, + "border{}Color", + "rgb(0, 0, 0)", + "fullscreen" + ); + assert_dir_properties(fullscreenStyle, "padding{}", "0px", "fullscreen"); + assert_equals( + fullscreenStyle.transform, + "none", + "fullscreen transform style" + ); + }); +</script> |