Don't render top layer elements in non-renderable subtrees

In [1] we started rendering modal dialog elements even if they were in non-renderable subtrees. In [2] this was overturned by the other browsers, so this patch stops rendering them again. [1] https://bugs.webkit.org/attachment.cgi?id=181812&action=review [2] b64788f Fixed: 1301716 Change-Id: I16b7eaf867848d144a7eab743e8ce0af416ce49c
web-platform-tests · Jun 22, 2022 · b0ea540 · b0ea540
1 parent dc468be
commit b0ea540
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 0 deletions.
diff --git a/fullscreen/rendering/backdrop-iframe-ref.html b/fullscreen/rendering/backdrop-iframe-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<body style="background: green"></body>
diff --git a/fullscreen/rendering/backdrop-iframe.html b/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-iframe-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/fullscreen/rendering/backdrop-object-ref.html b/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/fullscreen/rendering/backdrop-object.html b/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/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-iframe-ref.html b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-iframe-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<iframe></iframe>
diff --git a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-iframe.html b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-iframe.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Modal dialog inside iframe should not generate box</title>
+<link rel=match href="modal-dialog-in-iframe-ref.html">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6939">
+<link rel=help href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+dialog {
+  background: red;
+  border-color: red;
+}
+</style>
+<iframe></iframe>
+<script>
+  const iframe = document.querySelector('iframe');
+  const dialog = document.createElement('dialog');
+  iframe.appendChild(dialog);
+  dialog.showModal();
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-object-ref.html b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-object-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<object width="200" type="image/svg+xml" data="../../../../images/100px-green-rect.svg"></object>
diff --git a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-object.html b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-object.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Modal dialog inside object should not generate box</title>
+<link rel=match href="modal-dialog-in-object-ref.html">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6939">
+<link rel=help href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+dialog {
+  background: green;
+  border-color: green;
+}
+</style>
+<object width="200" type="image/svg+xml" data="../../../../images/100px-green-rect.svg">
+  <dialog id="dialog"></dialog>
+</object>
+<script>
+document.getElementById('dialog').showModal();
+</script>
diff --git a/images/100px-green-rect.svg b/images/100px-green-rect.svg