Diff
Modified: trunk/LayoutTests/ChangeLog (279803 => 279804)
--- trunk/LayoutTests/ChangeLog 2021-07-10 05:21:36 UTC (rev 279803)
+++ trunk/LayoutTests/ChangeLog 2021-07-10 05:35:51 UTC (rev 279804)
@@ -1,3 +1,48 @@
+2021-07-09 Tim Nguyen <n...@apple.com>
+
+ Import blink reference tests for <dialog> element
+ https://bugs.webkit.org/show_bug.cgi?id=227802
+
+ Reviewed by Simon Fraser.
+
+ From third_party/blink/web_tests/html/dialog/ in the Chromium repo.
+ Only imported reference tests.
+
+ * TestExpectations:
+ * imported/blink/dialog/backdrop-descendant-selector-expected.html: Added.
+ * imported/blink/dialog/backdrop-descendant-selector.html: Added.
+ * imported/blink/dialog/backdrop-does-not-inherit-expected.html: Added.
+ * imported/blink/dialog/backdrop-does-not-inherit.html: Added.
+ * imported/blink/dialog/backdrop-dynamic-style-change-expected.html: Added.
+ * imported/blink/dialog/backdrop-dynamic-style-change.html: Added.
+ * imported/blink/dialog/backdrop-in-flow-expected.html: Added.
+ * imported/blink/dialog/backdrop-in-flow.html: Added.
+ * imported/blink/dialog/backdrop-stacking-order-expected.html: Added.
+ * imported/blink/dialog/backdrop-stacking-order.html: Added.
+ * imported/blink/dialog/element-removed-from-top-layer-has-original-position-expected.html: Added.
+ * imported/blink/dialog/element-removed-from-top-layer-has-original-position.html: Added.
+ * imported/blink/dialog/inert-node-is-not-highlighted-expected.html:
+ * imported/blink/dialog/modal-dialog-backdrop-expected.html: Added.
+ * imported/blink/dialog/modal-dialog-backdrop.html: Added.
+ * imported/blink/dialog/modal-dialog-generated-content-expected.html: Added.
+ * imported/blink/dialog/modal-dialog-generated-content.html: Added.
+ * imported/blink/dialog/removed-element-is-removed-from-top-layer-expected.html: Added.
+ * imported/blink/dialog/removed-element-is-removed-from-top-layer.html: Added.
+ * imported/blink/dialog/resources/dialog.css: Added.
+ (.pseudodialog):
+ * imported/blink/dialog/top-layer-containing-block-expected.html: Added.
+ * imported/blink/dialog/top-layer-containing-block.html: Added.
+ * imported/blink/dialog/top-layer-display-none-expected.html: Added.
+ * imported/blink/dialog/top-layer-display-none.html: Added.
+ * imported/blink/dialog/top-layer-nesting-expected.html: Added.
+ * imported/blink/dialog/top-layer-nesting.html: Added.
+ * imported/blink/dialog/top-layer-stacking-correct-order-remove-readd-expected.html: Added.
+ * imported/blink/dialog/top-layer-stacking-correct-order-remove-readd.html: Added.
+ * imported/blink/dialog/top-layer-stacking-dynamic-expected.html: Added.
+ * imported/blink/dialog/top-layer-stacking-dynamic.html: Added.
+ * imported/blink/dialog/top-layer-stacking-expected.html: Added.
+ * imported/blink/dialog/top-layer-stacking.html: Added.
+
2021-07-09 Ryosuke Niwa <rn...@webkit.org>
ResizeObserver / IntersectionObserver memory leak on detached & out of reference elements
Modified: trunk/LayoutTests/TestExpectations (279803 => 279804)
--- trunk/LayoutTests/TestExpectations 2021-07-10 05:21:36 UTC (rev 279803)
+++ trunk/LayoutTests/TestExpectations 2021-07-10 05:35:51 UTC (rev 279804)
@@ -2306,11 +2306,29 @@
imported/blink/fast/multicol/outlines-at-column-boundaries.html [ ImageOnlyFailure ]
fast/multicol/multicol-with-child-renderLayer-for-input.html [ ImageOnlyFailure ]
-# Modal <dialog> in top layer
+# ::backdrop
+webkit.org/b/227801 imported/blink/dialog/backdrop-descendant-selector.html [ ImageOnlyFailure ]
+webkit.org/b/227801 imported/blink/dialog/backdrop-does-not-inherit.html [ ImageOnlyFailure ]
+webkit.org/b/227801 imported/blink/dialog/backdrop-dynamic-style-change.html [ ImageOnlyFailure ]
+webkit.org/b/227801 imported/blink/dialog/backdrop-in-flow.html [ ImageOnlyFailure ]
+webkit.org/b/227801 imported/blink/dialog/backdrop-stacking-order.html [ ImageOnlyFailure ]
+
+# Top layer tests
+webkit.org/b/84796 imported/blink/dialog/dont-share-style-to-top-layer.html [ ImageOnlyFailure ]
+webkit.org/b/84796 imported/blink/dialog/modal-dialog-backdrop.html [ ImageOnlyFailure ]
+webkit.org/b/84796 imported/blink/dialog/modal-dialog-generated-content.html [ ImageOnlyFailure ]
webkit.org/b/84796 imported/blink/dialog/modal-dialog-in-replaced-renderer.html [ ImageOnlyFailure ]
webkit.org/b/84796 imported/blink/dialog/modal-dialog-in-table-column.html [ ImageOnlyFailure ]
-webkit.org/b/84796 imported/blink/dialog/dont-share-style-to-top-layer.html [ ImageOnlyFailure ]
+webkit.org/b/84796 imported/blink/dialog/removed-element-is-removed-from-top-layer.html [ ImageOnlyFailure ]
+webkit.org/b/84796 imported/blink/dialog/top-layer-containing-block.html [ ImageOnlyFailure ]
+webkit.org/b/84796 imported/blink/dialog/top-layer-nesting.html [ ImageOnlyFailure ]
+webkit.org/b/84796 imported/blink/dialog/top-layer-stacking-correct-order-remove-readd.html [ ImageOnlyFailure ]
+webkit.org/b/84796 imported/blink/dialog/top-layer-stacking-dynamic.html [ ImageOnlyFailure ]
+webkit.org/b/84796 imported/blink/dialog/top-layer-stacking.html [ ImageOnlyFailure ]
+# inert subtrees
+webkit.org/b/110952 imported/blink/dialog/inert-node-is-not-highlighted.html [ ImageOnlyFailure ]
+
# Assertion failure in MessagePort::contextDestroyed, usually attributed to later tests
webkit.org/b/94458 http/tests/security/MessagePort/event-listener-context.html [ Skip ]
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-descendant-selector-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-descendant-selector-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-descendant-selector-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.backdrop {
+ position: absolute;
+ height: 100px;
+ width: 100px;
+ background: green;
+}
+</style>
+</head>
+<body>
+Test ::backdrop used in descendant selectors. The test passes if there are two green boxes and no red.
+<div class="backdrop" style="top: 100px; left: 100px"></div>
+<div class="backdrop" style="top: 100px; left: 300px"></div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-descendant-selector.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-descendant-selector.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-descendant-selector.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+ visibility: hidden;
+}
+
+::backdrop {
+ position: absolute;
+ height: 100px;
+ width: 100px;
+ background: red;
+}
+
+/* This shouldn't be matched, dialog is not the parent of ::backdrop.
+ * It is given high specificity so we actually test something.
+ */
+#dialog-parent > #dialog > ::backdrop,
+#dialog-parent > #dialog ::backdrop {
+ background: red;
+}
+
+#dialog-parent > ::backdrop {
+ top: 100px;
+ left: 100px;
+ background: green;
+}
+
+#backdrop-ancestor ::backdrop {
+ top: 100px;
+ left: 300px;
+ background: green;
+}
+</style>
+</head>
+<body>
+Test ::backdrop used in descendant selectors. The test passes if there are two green boxes and no red.
+
+<div id="dialog-parent">
+ <dialog id="dialog"></dialog>
+</div>
+<div id="backdrop-ancestor">
+ <p><span><dialog></dialog></span></p>
+</div>
+<script>
+var dialogs = document.querySelectorAll('dialog');
+for (var i = 0; i < dialogs.length; ++i)
+ dialogs[i].showModal();
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-does-not-inherit-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-does-not-inherit-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-does-not-inherit-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+#backdrop {
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ height: 100px;
+ width: 100px;
+ background: green;
+}
+</style>
+<body>
+Test that ::backdrop does not inherit from anything. The test passes if there is
+a green box and no red.
+<div id="backdrop"></div>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-does-not-inherit.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-does-not-inherit.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-does-not-inherit.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<style>
+dialog {
+ visibility: inherit;
+ background: red;
+}
+
+dialog::backdrop {
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ height: 100px;
+ width: 100px;
+ visibility: inherit;
+ background: green;
+}
+</style>
+<body>
+Test that ::backdrop does not inherit from anything. The test passes if there is
+a green box and no red.
+<div style="visibility: hidden">
+ <dialog></dialog>
+</div>
+<script>
+document.querySelector('dialog').showModal();
+</script>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-dynamic-style-change-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-dynamic-style-change-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-dynamic-style-change-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.backdrop {
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ height: 100px;
+ width: 100px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+Test dynamic changes to ::backdrop style. The test passes if there is a green box below.
+<div class="backdrop"></div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-dynamic-style-change.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-dynamic-style-change.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-dynamic-style-change.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+ visibility: hidden;
+}
+
+::backdrop {
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ height: 100px;
+ width: 100px;
+ background-color: red;
+}
+
+.green::backdrop {
+ background-color: green;
+}
+</style>
+</head>
+<body>
+Test dynamic changes to ::backdrop style. The test passes if there is a green box below.
+<dialog></dialog>
+<script>
+dialog = document.querySelector('dialog');
+dialog.showModal();
+dialog.classList.add('green');
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-in-flow-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-in-flow-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-in-flow-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+#backdrop {
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ height: 100px;
+ width: 100px;
+ background: green;
+}
+</style>
+<body>
+Test that position 'static' or 'relative' for ::backdrop computes to 'absolute'.
+The test passes if there is a single green box.
+<div id="backdrop"></div>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-in-flow.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-in-flow.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-in-flow.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+dialog {
+ visibility: hidden;
+}
+
+dialog::backdrop {
+ height: 100px;
+ width: 50px;
+}
+
+#left::backdrop {
+ position: static;
+ top: 100px;
+ left: 100px;
+ background: green;
+}
+
+#right::backdrop {
+ position: relative;
+ background: green;
+ top: 100px;
+ left: 150px;
+}
+</style>
+<body>
+Test that position 'static' or 'relative' for ::backdrop computes to 'absolute'.
+The test passes if there is a single green box.
+<dialog id="left"></dialog>
+<dialog id="right"></dialog>
+</div>
+<script>
+document.querySelector('#left').showModal();
+document.querySelector('#right').showModal();
+</script>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-stacking-order-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-stacking-order-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-stacking-order-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<style>
+div {
+ position: absolute;
+}
+
+#bottom-backdrop {
+ top: 100px;
+ left: 100px;
+ height: 300px;
+ width: 300px;
+ background-color: rgb(0, 50, 0);
+}
+
+#bottom {
+ top: 125px;
+ left: 125px;
+ height: 250px;
+ width: 250px;
+ background-color: rgb(0, 90, 0);
+}
+
+#middle-backdrop {
+ top: 150px;
+ left: 150px;
+ height: 200px;
+ width: 200px;
+ background-color: rgb(0, 130, 0);
+}
+
+#middle {
+ top: 175px;
+ left: 175px;
+ height: 150px;
+ width: 150px;
+ background-color: rgb(0, 170, 0);
+}
+
+#top-backdrop {
+ top: 200px;
+ left: 200px;
+ height: 100px;
+ width: 100px;
+ background-color: rgb(0, 210, 0);
+}
+
+#top {
+ top: 225px;
+ left: 225px;
+ height: 50px;
+ width: 50px;
+ background-color: rgb(0, 255, 0);
+}
+</style>
+<body>
+Test for dialog::backdrop stacking order. The test passes if there are 6
+boxes enclosed in each other, becoming increasingly smaller and brighter
+green.
+<div id="bottom-backdrop"></div>
+<div id="bottom"></div>
+<div id="middle-backdrop"></div>
+<div id="middle"></div>
+<div id="top-backdrop"></div>
+<div id="top"></div>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/backdrop-stacking-order.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/backdrop-stacking-order.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/backdrop-stacking-order.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<style>
+dialog {
+ padding: 0px;
+ border: none;
+ margin: 0px;
+}
+
+#bottom::backdrop {
+ top: 100px;
+ left: 100px;
+ height: 300px;
+ width: 300px;
+ background-color: rgb(0, 50, 0);
+ z-index: 100; /* z-index has no effect. */
+}
+
+#bottom {
+ top: 125px;
+ left: 125px;
+ height: 250px;
+ width: 250px;
+ background-color: rgb(0, 90, 0);
+}
+
+#middle::backdrop {
+ top: 150px;
+ left: 150px;
+ height: 200px;
+ width: 200px;
+ background-color: rgb(0, 130, 0);
+ z-index: -100; /* z-index has no effect. */
+}
+
+#middle {
+ top: 175px;
+ left: 175px;
+ height: 150px;
+ width: 150px;
+ background-color: rgb(0, 170, 0);
+}
+
+#top::backdrop {
+ top: 200px;
+ left: 200px;
+ height: 100px;
+ width: 100px;
+ background-color: rgb(0, 210, 0);
+ z-index: 0; /* z-index has no effect. */
+}
+
+#top {
+ top: 225px;
+ left: 225px;
+ height: 50px;
+ width: 50px;
+ background-color: rgb(0, 255, 0);
+ z-index: -1000; /* z-index has no effect. */
+}
+</style>
+<body>
+Test for dialog::backdrop stacking order. The test passes if there are 6
+boxes enclosed in each other, becoming increasingly smaller and brighter
+green.
+<dialog id="top"></dialog>
+<dialog id="middle"></dialog>
+<dialog id="bottom"></dialog>
+<script>
+var topDialog = document.getElementById('top');
+var middleDialog = document.getElementById('middle');
+var bottomDialog = document.getElementById('bottom');
+topDialog.showModal();
+bottomDialog.showModal();
+topDialog.close(); // Just to shuffle the top layer order around a little.
+middleDialog.showModal();
+topDialog.showModal();
+</script>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/element-removed-from-top-layer-has-original-position-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/element-removed-from-top-layer-has-original-position-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/element-removed-from-top-layer-has-original-position-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.green {
+ color: green;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="" Top layer fails for inline elements</p>
+<p>This tests that position 'static' no longer computes to 'absolute' for an
+element that has been removed from the top layer. The test passes if you see
+a single line of text.</p>
+<span class="green">This is the span.</span>
+<span class="green">This is the dialog following it.</span>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/element-removed-from-top-layer-has-original-position.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/element-removed-from-top-layer-has-original-position.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/element-removed-from-top-layer-has-original-position.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.green {
+ color: green;
+}
+
+#right-dialog {
+ display: inline;
+ position: static;
+ border: none;
+ padding: 0;
+ margin: 0;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="" Top layer fails for inline elements</p>
+<p>This tests that position 'static' no longer computes to 'absolute' for an
+element that has been removed from the top layer. The test passes if you see
+a single line of text.</p>
+<span class="green">This is the span.</span>
+<dialog class="green" id="right-dialog">This is the dialog following it.</dialog>
+<script>
+var dialog = document.getElementById('right-dialog');
+dialog.showModal();
+dialog.close();
+dialog.show();
+</script>
+</body>
+</html>
Modified: trunk/LayoutTests/imported/blink/dialog/inert-node-is-not-highlighted-expected.html (279803 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/inert-node-is-not-highlighted-expected.html 2021-07-10 05:21:36 UTC (rev 279803)
+++ trunk/LayoutTests/imported/blink/dialog/inert-node-is-not-highlighted-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -2,12 +2,9 @@
<html>
<head>
<style>
-/*
- // FIXME: Once dialog element is fully implemented, we should uncomment this.
body p, span {
-webkit-user-select: none;
}
- */
::backdrop {
display: none;
@@ -31,13 +28,8 @@
<script>
dialog = document.querySelector('dialog');
dialog.showModal();
-
- // FIXME: Once dialog element is fully implemented, we should replace this line with the commented lines.
-document.execCommand('SelectAll');
-/*
selectable = document.querySelector('#selectable');
window.getSelection().selectAllChildren(selectable);
- */
</script>
</body>
</html>
Added: trunk/LayoutTests/imported/blink/dialog/modal-dialog-backdrop-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/modal-dialog-backdrop-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/modal-dialog-backdrop-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<style>
+.dialog-default-ua-style {
+ position: absolute;
+ overflow: auto;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ border: solid;
+ padding: 1em;
+ background: white;
+ color: black;
+}
+
+#dialog {
+ margin: auto;
+ height: 100px;
+ width: 100px;
+ top: 100px;
+ z-index: 1000;
+ background: green;
+}
+
+#backdrop {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0,0,0,0.1);
+ z-index: 100;
+}
+</style>
+<body>
+Test for the default user agent style of dialog::backdrop. The test passes if
+there is a green box, above a very lightly translucent gray box spanning the
+viewport.
+<div id="backdrop"></div>
+<div class="dialog-default-ua-style" id="dialog"></div>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/modal-dialog-backdrop.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/modal-dialog-backdrop.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/modal-dialog-backdrop.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+dialog {
+ top: 100px;
+ height: 100px;
+ width: 100px;
+ background: green;
+}
+</style>
+<body>
+Test for the default user agent style of dialog::backdrop. The test passes if
+there is a green box, above a very lightly translucent gray box spanning the
+viewport.
+<dialog></dialog>
+<script>
+document.querySelector('dialog').showModal();
+</script>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/modal-dialog-generated-content-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/modal-dialog-generated-content-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/modal-dialog-generated-content-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<style>
+#dialog {
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ height: 100px;
+ width: 100px;
+ background: green;
+}
+
+#dialog-before {
+ position: absolute;
+ top: 0px;
+}
+
+#dialog-after {
+ position: absolute;
+ bottom: 0px;
+}
+
+#dialog-backdrop {
+ position: absolute;
+ top: 100px;
+ left: 300px;
+ height: 100px;
+ width: 100px;
+ background: green;
+}
+</style>
+<body>
+Test for a modal dialog with ::before, ::after, and ::backdrop. The test passes
+if there are two green boxes, one with the texts "::before" and "::after" in it.
+<div id="dialog">
+ <div id="dialog-before">::before</div>
+ <div id="dialog-after">::after</div>
+</div>
+<div id="dialog-backdrop"></div>
+<script>
+document.querySelector('dialog').showModal();
+</script>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/modal-dialog-generated-content.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/modal-dialog-generated-content.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/modal-dialog-generated-content.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<style>
+dialog {
+ padding: 0px;
+ border: none;
+ margin: 0px;
+ top: 100px;
+ left: 100px;
+ height: 100px;
+ width: 100px;
+ background: green;
+}
+
+dialog::before {
+ content: '::before';
+ position: absolute;
+ top: 0px;
+}
+
+dialog::after {
+ content: '::after';
+ position: absolute;
+ bottom: 0px;
+}
+
+dialog::backdrop {
+ position: absolute;
+ top: 100px;
+ left: 300px;
+ height: 100px;
+ width: 100px;
+ background: green;
+ content: 'THIS TEXT SHOULD NOT BE SEEN';
+}
+
+dialog::backdrop::before {
+ content: '::backdrop::before';
+ position: absolute;
+ top: 0px;
+ background: red;
+}
+dialog::backdrop::after {
+ content: '::backdrop::after';
+ position: absolute;
+ bottom: 0px;
+ background: red;
+}
+</style>
+<body>
+Test for a modal dialog with ::before, ::after, and ::backdrop. The test passes
+if there are two green boxes, one with the texts "::before" and "::after" in it.
+<dialog></dialog>
+<script>
+document.querySelector('dialog').showModal();
+</script>
+</body>
Added: trunk/LayoutTests/imported/blink/dialog/removed-element-is-removed-from-top-layer-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/removed-element-is-removed-from-top-layer-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/removed-element-is-removed-from-top-layer-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href=""
+<style>
+.pseudodialog {
+ height: 100px;
+ width: 100px;
+}
+
+#bottomDialog {
+ background-color: blue;
+ top: 0px;
+}
+
+#topDialog {
+ background-color: green;
+ top: 50px;
+ left: 50px;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="" Elements must be reattached when inserted/removed from top layer
+<p>The test passes if you see a green rectangle stacked on top of a blue rectangle.
+<div id="bottomDialog" class="pseudodialog"></div>
+<div id="topDialog" class="pseudodialog"></div>
+</body>
+</html>
+
Added: trunk/LayoutTests/imported/blink/dialog/removed-element-is-removed-from-top-layer.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/removed-element-is-removed-from-top-layer.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/removed-element-is-removed-from-top-layer.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+ height: 100px;
+ width: 100px;
+}
+
+::backdrop {
+ display: none;
+}
+
+#bottomDialog {
+ background-color: blue;
+ top: 231px;
+}
+
+#topDialog {
+ background-color: green;
+ top: 50px;
+ left: 50px;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="" Elements must be reattached when inserted/removed from top layer
+<p>The test passes if you see a green rectangle stacked on top of a blue rectangle.
+<dialog id="bottomDialog"></dialog>
+<dialog id="topDialog"></dialog>
+<script>
+document.getElementById('topDialog').showModal();
+var bottomDialog = document.getElementById('bottomDialog');
+bottomDialog.showModal();
+bottomDialog.offsetTop; // force a layout
+var parent = bottomDialog.parentNode;
+parent.removeChild(bottomDialog);
+parent.appendChild(bottomDialog);
+</script>
+</body>
+</html>
+
Added: trunk/LayoutTests/imported/blink/dialog/resources/dialog.css (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/resources/dialog.css (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/resources/dialog.css 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,14 @@
+.pseudodialog {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: -webkit-fit-content;
+ height: -webkit-fit-content;
+ margin: auto;
+ border: solid;
+ padding: 1em;
+ background: white;
+ color: black;
+}
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-containing-block-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-containing-block-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-containing-block-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href=""
+</head>
+<body>
+<p>
+This tests that a modal dialog's containing block is in the initial containing block and that it is unaffected by
+ancestor elements with overflow or opacity.
+<div class="pseudodialog" style="position: absolute; top: 100px; height: 250px; width: 90%; background-color: yellow">
+ This dialog should be onscreen with a width of 90% of the page. It is the child of an narrow element
+ positioned off screen, but the containing block of a top layer element is the initial containing block, so its
+ position and percent lengths are relative to that.
+</div>
+<div class="pseudodialog" style="position: absolute; top: 200px; left: 0px; height: 100px; background-color: cyan">
+ This dialog should be unaffected by its ancestor with overflow. It should not be clipped.
+</div>
+<div class="pseudodialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta">
+ This dialog should be unaffected by its ancestor with opacity.
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-containing-block.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-containing-block.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-containing-block.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+::backdrop {
+ display: none;
+}
+</style>
+</head>
+<body>
+<p>
+This tests that a modal dialog's containing block is in the initial containing block and that it is unaffected by
+ancestor elements with overflow or opacity.
+<div style="position: absolute; top: 400px; opacity: 0.3">
+ <dialog id="opaqueDialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta">
+ This dialog should be unaffected by its ancestor with opacity.
+ </dialog>
+</div>
+<div style="position: absolute; overflow: hidden; width: 500px; height: 150px; top: 400px; left: 300px">
+ <dialog id="unclippedDialog" style="position: absolute; top: 200px; left: 0px; height: 100px; background-color: cyan">
+ This dialog should be unaffected by its ancestor with overflow. It should not be clipped.
+ </dialog>
+</div>
+<div style="position: absolute; top: 1000px; left: 1000px; width: 20px;">
+ <dialog id="bottomDialog" style="position: absolute; top: 100px; height: 250px; width: 90%; background-color: yellow">
+ This dialog should be onscreen with a width of 90% of the page. It is the child of an narrow element
+ positioned off screen, but the containing block of a top layer element is the initial containing block, so its
+ position and percent lengths are relative to that.
+ </dialog>
+</div>
+<script>
+document.getElementById('bottomDialog').showModal();
+document.getElementById('unclippedDialog').showModal();
+document.getElementById('opaqueDialog').showModal();
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-display-none-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-display-none-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-display-none-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href=""
+<style>
+.pseudodialog {
+ height: 150px;
+ width: 150px;
+}
+</style>
+</head>
+<body>
+This tests that a top layer element is not rendered if it, or an ancestor, has display: none.
+It passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
+
+<div class="pseudodialog" style="top: 50px; background-color: blue"></div>
+<div class="pseudodialog" style="top: 100px; left: 50px; background-color: green"></div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-display-none.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-display-none.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-display-none.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+ height: 150px;
+ width: 150px;
+}
+
+::backdrop {
+ display: none;
+}
+
+.red {
+ background-color: red;
+ top: 200px;
+}
+
+#bottomDialog {
+ background-color: blue;
+ top: 50px;
+ display: none;
+}
+
+#topDialog {
+ background-color: green;
+ top: 100px;
+ left: 50px;
+}
+</style>
+</head>
+<body>
+This tests that a top layer element is not rendered if it, or an ancestor, has display: none.
+It passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
+
+<dialog id="hiddenDialog" class="red" style="display: none;"></dialog>
+<div id="container">
+ <div>
+ <dialog id="displayNoneChild1" class="red"></dialog>
+ <dialog id="displayNoneChild2" class="red"></dialog>
+ </div>
+</div>
+<dialog id="bottomDialog"></dialog>
+<dialog id="topDialog"></dialog>
+<script>
+document.getElementById('hiddenDialog').showModal();
+document.getElementById('displayNoneChild1').showModal();
+document.getElementById('container').style.display = 'none';
+document.getElementById('displayNoneChild2').showModal();
+
+// Test that stacking works even if an element is added to the top layer when it has no renderer.
+document.getElementById('bottomDialog').showModal();
+document.getElementById('topDialog').showModal();
+document.getElementById('bottomDialog').style.display = 'block';
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-nesting-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-nesting-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-nesting-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.pseudodialog {
+ height: 150px;
+ width: 150px;
+ position: absolute;
+ top: 0; right: 0; bottom: 0; left: 0;
+ margin: auto;
+ border: solid;
+ padding: 1em;
+ background: white;
+ color: black;
+}
+</style>
+</head>
+<body>
+This tests that top layer elements are stacked correctly even if nested in the DOM tree.
+The test passes if you see no red rectangles and see 3 rectangles stacked in the following order (from bottom to top): yellow, blue, green.
+
+<div class="pseudodialog" style="top: 100px; background-color: yellow"></div>
+<div class="pseudodialog" style="top: 150px; left: 50px; background-color: blue"></div>
+<div class="pseudodialog" style="top: 200px; left: 100px; background-color: green"></div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-nesting.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-nesting.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-nesting.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+ height: 150px;
+ width: 150px;
+}
+
+::backdrop {
+ display: none;
+}
+
+#bottomDialog {
+ background-color: yellow;
+ top: 100px;
+ z-index: 1000;
+}
+
+#middleDialog {
+ background-color: blue;
+ top: 150px;
+ left: 50px;
+ z-index: -500;
+}
+
+#topDialog {
+ background-color: green;
+ top: 200px;
+ left: 100px;
+ z-index: -1000;
+}
+
+.red {
+ background-color: red;
+ top: 250px;
+ left: 0px;
+}
+</style>
+</head>
+<body>
+This tests that top layer elements are stacked correctly even if nested in the DOM tree.
+The test passes if you see no red rectangles and see 3 rectangles stacked in the following order (from bottom to top): yellow, blue, green.
+
+<dialog id="topDialog">
+ <dialog id="middleDialog">
+ <dialog id="bottomDialog">
+ <dialog id="hiddenDialog" class="red">
+ <dialog id="hiddenDialogChild" class="red"></dialog>
+ </dialog>
+ </dialog>
+ </dialog>
+</dialog>
+<script>
+document.getElementById('hiddenDialogChild').showModal();
+document.getElementById('hiddenDialog').showModal();
+document.getElementById('bottomDialog').showModal();
+document.getElementById('middleDialog').showModal();
+document.getElementById('topDialog').showModal();
+document.getElementById('hiddenDialog').close();
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-correct-order-remove-readd-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-correct-order-remove-readd-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-correct-order-remove-readd-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href=""
+<style>
+.pseudodialog {
+ height: 100px;
+ width: 100px;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="" Elements must be reattached when inserted/removed from top layer
+<p>The test passes if you see a green rectangle stacked on top of a blue rectangle.
+
+<div class="pseudodialog" style="top: 100px; background-color: blue"></div>
+<div class="pseudodialog" style="top: 150px; left: 50px; background-color: green"></div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-correct-order-remove-readd.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-correct-order-remove-readd.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-correct-order-remove-readd.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+ height: 100px;
+ width: 100px;
+}
+
+::backdrop {
+ display: none;
+}
+
+#bottomDialog {
+ background-color: blue;
+ top: 100px;
+}
+
+#topDialog {
+ background-color: green;
+ top: 150px;
+ left: 50px;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="" Elements must be reattached when inserted/removed from top layer
+<p>The test passes if you see a green rectangle stacked on top of a blue rectangle.
+
+<dialog id="topDialog"></dialog>
+<dialog id="bottomDialog"></dialog>
+<script>
+var topDialog = document.getElementById('topDialog');
+var bottomDialog = document.getElementById('bottomDialog');
+topDialog.showModal();
+bottomDialog.showModal();
+topDialog.offsetTop; // force a layout
+topDialog.close();
+topDialog.showModal();
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-dynamic-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-dynamic-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-dynamic-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href=""
+<style>
+.pseudodialog {
+ height: 150px;
+ width: 150px;
+}
+</style>
+</head>
+<body>
+This tests top layer element stacking order after dynamically calling show/close and removal from the DOM tree.
+The test passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
+
+<div class="pseudodialog" style="top: 50px; background-color: blue"></div>
+<div class="pseudodialog" style="top: 100px; left: 50px; background-color: green"></div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-dynamic.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-dynamic.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-dynamic.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+ height: 150px;
+ width: 150px;
+}
+
+::backdrop {
+ display: none;
+}
+
+.red {
+ background-color: red;
+ top: 200px;
+}
+
+#bottomDialog {
+ background-color: blue;
+ top: 50px;
+}
+
+#topDialog {
+ background-color: green;
+ top: 100px;
+ left: 50px;
+}
+</style>
+</head>
+<body>
+This tests top layer element stacking order after dynamically calling show/close and removal from the DOM tree.
+The test passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
+
+<dialog id="topDialog"></dialog>
+<dialog id="bottomDialog"></dialog>
+<dialog id="removedDialog" class="red">
+ <dialog id="removedDialogChild" class="red"></dialog>
+</dialog>
+<script>
+document.getElementById('topDialog').showModal();
+var removedDialog = document.getElementById('removedDialog');
+removedDialog.showModal();
+document.getElementById('bottomDialog').showModal();
+document.getElementById('removedDialogChild').showModal();
+removedDialog.parentNode.removeChild(removedDialog);
+document.getElementById('topDialog').close();
+document.getElementById('topDialog').showModal();
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-expected.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-expected.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-stacking-expected.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href=""
+</head>
+<style>
+.box {
+ height: 150px;
+ width: 150px;
+}
+.container {
+ -webkit-perspective: 500px;
+ border: 1px solid black;
+ background-color: magenta;
+}
+.transformed {
+ transform: rotateY(45deg);
+ background-color: cyan;
+}
+</style>
+<body>
+<div class="pseudodialog" style="position: fixed; top: 10px; z-index:3000">
+ This white box is the topmost modal dialog. It should be on top of everything.
+</div>
+<div style="position: absolute; top: 0px; z-index: 3; background-color: red; left: 0; right: 0; height: 200px;"></div>
+<div class="pseudodialog" style="position: absolute; top: 50px; background-color: green; width: 75%; height: 400px; z-index:2000; overflow: auto;">
+ This green box is also a modal dialog. It should be rendered above the red and yellow regions.
+ <div class="container box">
+ <div class="transformed box">A transform within the dialog's subtree.</div>
+ </div>
+ <div class="box" style="position: absolute; top:300px; z-index: 2; background-color: cyan">
+ This shows z-index stacking within the dialog's subtree. The cyan box should be on top of the magenta one.
+ </div>
+ <div class="box" style="position: absolute; top:350px; left:50px; z-index: 1; background-color: magenta"></div>
+ <div style="position: fixed; top: 90px; left: 30px; background-color: green">This is part of the green dialog.</div>
+</div>
+<div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em; background-color: yellow; z-index:1000">
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/blink/dialog/top-layer-stacking.html (0 => 279804)
--- trunk/LayoutTests/imported/blink/dialog/top-layer-stacking.html (rev 0)
+++ trunk/LayoutTests/imported/blink/dialog/top-layer-stacking.html 2021-07-10 05:35:51 UTC (rev 279804)
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- This tests that top layer elements are rendered above z-indexed elements
+and stacked in the correct order amongst themselves. Also, layer features like
+transforms and z-index are tested inside a top layer element subtree. -->
+<html>
+<head>
+<style>
+.box {
+ height:150px;
+ width:150px;
+}
+
+::backdrop {
+ display: none;
+}
+
+.container {
+ -webkit-perspective: 500px;
+ border: 1px solid black;
+ background-color: magenta;
+}
+.transformed {
+ transform: rotateY(45deg);
+ background-color: cyan;
+}
+</style>
+</head>
+<body>
+<dialog id="hiddenDialog" style="display: none; color: red">This should not be displayed.</dialog>
+<dialog id="topDialog" style="position: fixed; top: 10px; z-index: -10;">
+ This white box is the topmost modal dialog. It should be on top of everything.
+</dialog>
+<div style="position: absolute; top: 0px; z-index: 3; background-color: red; left: 0; right: 0; height: 200px;">
+ <dialog id="bottomDialog" style="position: absolute; top: 50px; background-color: green; width: 75%; height: 400px;">
+ This green box is also a modal dialog. It should be rendered above the red and yellow regions.
+ <div class="container box">
+ <div class="transformed box">A transform within the dialog's subtree.</div>
+ </div>
+ <div class="box" style="position: absolute; top:300px; z-index: 2; background-color: cyan">
+ This shows z-index stacking within the dialog's subtree. The cyan box should be on top of the magenta one.
+ </div>
+ <div class="box" style="position: absolute; top:350px; left:50px; z-index: 1; background-color: magenta"></div>
+ <div style="position: fixed; top: 90px; left: 30px; background-color: green">This is part of the green dialog.</div>
+ </dialog>
+</div>
+<div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em; background-color: yellow; z-index:1000">
+</div>
+<script>
+document.getElementById('bottomDialog').showModal();
+document.getElementById('topDialog').showModal();
+document.getElementById('hiddenDialog').showModal();
+</script>
+</body>
+</html>
