Test custom properties with fullscreen's ::backdrop (web-platform-tes…

…ts#43445) Fixes whatwg/fullscreen#124.
Tobias710219 · Jan 10, 2024 · 6ee66f9 · 6ee66f9
1 parent 5f34e57
commit 6ee66f9
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/...screen/rendering/backdrop-iframe-ref.html → fullscreen/rendering/backdrop-green-ref.html b/...screen/rendering/backdrop-iframe-ref.html → fullscreen/rendering/backdrop-green-ref.html
diff --git a/fullscreen/rendering/backdrop-iframe.html b/fullscreen/rendering/backdrop-iframe.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <title>::backdrop for a fullscreen iframe element</title>
-<link rel=match href="backdrop-iframe-ref.html">
+<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>

diff --git a/fullscreen/rendering/backdrop-inherit.html b/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>