Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
134 files changed, 5834 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout.html
new file mode 100644
index 0000000000..77ed29ce56
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<meta name="viewport" content="user-scalable=no">
+<title>Tests layout of absolutely positioned modal dialogs.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+/* Remove body margin and dialog styles for easier positioning expected values */
+body {
+    height: 10000px;
+    margin: 0;
+}
+
+dialog {
+    border: 0;
+    padding: 0;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#absolute-div {
+    position: absolute;
+    top: 800px;
+    height: 50px;
+    width: 90%;
+}
+
+#relative-div {
+    position: relative;
+    top: 20px;
+    height: 30px;
+}
+</style>
+</head>
+<dialog >It is my dialog.</dialog>
+<div id="absolute-div">
+    <div id="relative-div"></div>
+</div>
+<script>
+"use strict";
+
+function checkVerticallyCentered(dialog) {
+    var centeredTop = (document.documentElement.clientHeight - dialog.offsetHeight) / 2;
+    // Using approx equals because getBoundingClientRect() and centeredTop
+    // are calculated by different parts of the engine. Due to the loss
+    // of precision, the numbers might not equal exactly.
+    assert_approx_equals(dialog.getBoundingClientRect().top, centeredTop, 1);
+}
+
+function reset() {
+    document.body.style.width = "auto";
+    dialog.style.top = null;
+    dialog.style.height = null;
+    if (dialog.open)
+        dialog.close();
+    dialog.remove();
+    document.body.appendChild(dialog);
+    window.scroll(0, 500);
+}
+
+var dialog = document.querySelector('dialog');
+var absoluteContainer = document.querySelector('#absolute-div');
+var relativeContainer = document.querySelector('#relative-div');
+reset();
+
+test(function() {
+    this.add_cleanup(reset);
+
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+}, "showModal() should center in the viewport");
+
+test(function() {
+    this.add_cleanup(reset);
+
+    dialog.showModal();
+    dialog.close();
+    window.scroll(0, 2 * window.scrollY);
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+}, "Dialog should be recentered if showModal() is called after close()");
+
+test(function() {
+    this.add_cleanup(reset);
+
+    dialog.showModal();
+    var expectedTop = dialog.getBoundingClientRect().top;
+    window.scroll(0, window.scrollY * 2);
+
+    // Trigger relayout
+    document.body.offsetHeight;
+
+    window.scroll(0, window.scrollY / 2);
+    assert_equals(dialog.getBoundingClientRect().top, expectedTop);
+}, "Dialog should not recenter on relayout.");
+
+test(function() {
+    this.add_cleanup(reset);
+
+    dialog.style.height = '20000px';
+    dialog.showModal();
+    assert_equals(dialog.getBoundingClientRect().top, 0);
+}, "A tall dialog should be positioned at the top of the viewport.");
+
+test(function() {
+    this.add_cleanup(reset);
+
+    document.body.style.width = '4000px';
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+
+}, "The dialog should be centered regardless of the presence of a horizontal scrollbar.");
+
+test(function() {
+    this.add_cleanup(reset);
+
+    dialog.remove();
+    absoluteContainer.appendChild(dialog);
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+    dialog.close();
+
+    dialog.remove();
+    relativeContainer.appendChild(dialog);
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+}, "Centering should work when dialog is inside positioned containers.");
+
+test(function() {
+    this.add_cleanup(reset);
+
+    dialog.showModal();
+    var expectedTop = dialog.getBoundingClientRect().top;
+    relativeContainer.style.display = 'none';
+    relativeContainer.style.display = 'block';
+    assert_equals(dialog.getBoundingClientRect().top, expectedTop);
+}, "A centered dialog's position should survive becoming display:none temporarily.");
+
+test(function() {
+    this.add_cleanup(reset);
+
+    // Remove and reinsert so that the document position isn't changed by the second remove and reinsert
+    dialog.remove();
+    relativeContainer.appendChild(dialog);
+
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+    dialog.remove();
+
+    relativeContainer.appendChild(dialog);
+    assert_equals(relativeContainer.getBoundingClientRect().top, dialog.getBoundingClientRect().top);
+}, "Dialog should not still be centered when removed, and re-added to the document.");
+
+test(function() {
+    this.add_cleanup(reset);
+
+    dialog.showModal();
+    dialog.style.top = '0px';
+    var expectedTop = dialog.getBoundingClientRect().top;
+    dialog.close();
+    dialog.showModal();
+    assert_equals(dialog.getBoundingClientRect().top, expectedTop);
+}, "Dialog's specified position should survive after close() and showModal().");
+
+test(function() {
+    this.add_cleanup(reset);
+
+    dialog.showModal();
+    dialog.removeAttribute('open');
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+}, "Dialog should be recentered if showModal() is called after removing 'open'.");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-descendant-selector-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-descendant-selector-ref.html
new file mode 100644
index 0000000000..70d84c21ff
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-descendant-selector-ref.html
@@ -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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-descendant-selector.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-descendant-selector.html
new file mode 100644
index 0000000000..3e2ac6afa1
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-descendant-selector.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="backdrop-descendant-selector-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-does-not-inherit-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-does-not-inherit-ref.html
new file mode 100644
index 0000000000..bdc84186f6
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-does-not-inherit-ref.html
@@ -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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-does-not-inherit.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-does-not-inherit.html
new file mode 100644
index 0000000000..44085b9c31
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-does-not-inherit.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="match" href="backdrop-does-not-inherit-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-display-none-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-display-none-ref.html
new file mode 100644
index 0000000000..c49a11d416
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-display-none-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<title>Reference: Test that adding display: none; dynamically on ::backdrop makes it disappear</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<p>Test passes if there is no red.</p>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-display-none.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-display-none.html
new file mode 100644
index 0000000000..bcf100b368
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-display-none.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<title>Test that adding display: none; dynamically on ::backdrop makes it disappear</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="backdrop-dynamic-display-none-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<p>Test passes if there is no red.</p>
+<dialog></dialog>
+<style>
+dialog { visibility: hidden; }
+::backdrop { background-color: red; }
+.hidden-backdrop::backdrop {
+    display: none;
+}
+</style>
+<script>
+dialog = document.querySelector("dialog");
+dialog.showModal();
+requestAnimationFrame(() => {
+    dialog.classList.add("hidden-backdrop");
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-style-change-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-style-change-ref.html
new file mode 100644
index 0000000000..01cb93d2ab
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-style-change-ref.html
@@ -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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-style-change.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-style-change.html
new file mode 100644
index 0000000000..19297b8c17
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-style-change.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="backdrop-dynamic-style-change-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-in-flow-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-in-flow-ref.html
new file mode 100644
index 0000000000..4857557bf8
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-in-flow-ref.html
@@ -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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-in-flow.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-in-flow.html
new file mode 100644
index 0000000000..7201ebbc02
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-in-flow.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link rel="match" href="backdrop-in-flow-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-receives-element-events.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-receives-element-events.html
new file mode 100644
index 0000000000..31c3c6ce3c
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-receives-element-events.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<title>Test that ::backdrop receives events for the associated element</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<body>
+<style>
+/* ::backdrop takes up whole screen, actual <dialog> is hidden */
+dialog {
+    visibility: hidden;
+    pointer-events: none;
+}
+
+dialog::backdrop {
+    background-color: red;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+dialog.clicked::backdrop {
+    background-color: green;
+}
+</style>
+<dialog></dialog>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script>
+setup({ single_test: true });
+
+const dialog = document.querySelector("dialog");
+dialog.showModal();
+dialog.addEventListener("click", () => {
+    // Change style for debugging purposes, done() actually makes the test pass
+    dialog.className = "clicked";
+    done();
+});
+new test_driver.Actions()
+    .pointerMove(0, 0, {origin: "viewport"})
+    .pointerDown()
+    .pointerUp()
+    .send();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order-ref.html
new file mode 100644
index 0000000000..d3f82de181
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order-ref.html
@@ -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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
new file mode 100644
index 0000000000..57cc63aab4
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<link rel="match" href="backdrop-stacking-order-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/centering-iframe.sub.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/centering-iframe.sub.html
new file mode 100644
index 0000000000..6ffd72296d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/centering-iframe.sub.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>dialog element centered frame</title>
+<style>
+  html {
+    writing-mode: {{GET[html-writing-mode]}}
+  }
+
+  #container {
+    writing-mode: {{GET[container-writing-mode]}}
+  }
+
+  dialog {
+    writing-mode: {{GET[dialog-writing-mode]}};
+    border: none;
+    padding: 0;
+    max-width: initial;
+    max-height: initial;
+    width: {{GET[dialog-width]}};
+    height: {{GET[dialog-height]}};
+  }
+</style>
+
+<div id="container">
+  <dialog>X</dialog>
+</div>
+
+<script>
+"use strict";
+document.querySelector("dialog").showModal();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/centering.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/centering.html
new file mode 100644
index 0000000000..2dc6ce3edf
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/centering.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>dialog element: centered alignment</title>
+<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
+<link rel="help" href="https://html.spec.whatwg.org/#flow-content-3">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+
+<script>
+"use strict";
+
+// Be sure to sync with centering-iframe.html
+const dialogWidth = 20;
+const dialogHeight = 10;
+
+testDialogCentering("horizontal-tb", "", "", "tall viewport", 40, 100);
+testDialogCentering("horizontal-tb", "", "", "wide viewport", 100, 40);
+testDialogCentering("horizontal-tb", "", "", "square viewport", 100, 100);
+testDialogCentering("horizontal-tb", "", "", "dialog and viewport match", dialogWidth, dialogHeight);
+
+testDialogCentering("vertical-rl", "", "", "tall viewport", 40, 100);
+testDialogCentering("vertical-lr", "", "", "tall viewport", 40, 100);
+
+testDialogCentering("vertical-rl", "", "horizontal-tb", "tall viewport", 40, 100);
+testDialogCentering("vertical-lr", "", "horizontal-tb", "tall viewport", 40, 100);
+
+testDialogCentering("horizontal-tb", "vertical-rl", "", "tall viewport", 40, 100);
+testDialogCentering("vertical-rl", "horizontal-tb", "", "tall viewport", 40, 100);
+
+testDialogCentering("horizontal-tb", "vertical-rl", "horizontal-tb", "tall viewport", 40, 100);
+testDialogCentering("vertical-rl", "horizontal-tb", "vertical-rl", "tall viewport", 40, 100);
+
+function testDialogCentering(writingMode, containerWritingMode, dialogWritingMode, label, iframeWidth, iframeHeight) {
+  const dialogSizesToTest = [["", ""], [dialogWidth.toString()+'px', dialogHeight.toString()+'px']];
+  for (const dialogSizes of dialogSizesToTest) {
+    const isDefaultSize = dialogSizes[0] == "";
+    // This test doesn't make sense if the dialog sizes are default
+    if (isDefaultSize && label == "dialog and viewport match") {
+      continue;
+    }
+
+    async_test(t => {
+      const iframe = document.createElement("iframe");
+      iframe.src = `centering-iframe.sub.html?html-writing-mode=${writingMode}&container-writing-mode=${containerWritingMode}&dialog-writing-mode=${dialogWritingMode}&dialog-width=${dialogSizes[0]}&dialog-height=${dialogSizes[1]}`;
+      iframe.width = iframeWidth;
+      iframe.height = iframeHeight;
+      iframe.onload = t.step_func_done(() => {
+        const dialog = iframe.contentDocument.querySelector("dialog");
+        const dialogRect = dialog.getBoundingClientRect();
+
+        const expectedLeftOffset = iframeWidth / 2 - dialogRect.width / 2;
+        const expectedTopOffset = Math.max(iframeHeight / 2 - dialogRect.height / 2, 0);
+
+        if (isDefaultSize) {
+          assert_approx_equals(dialogRect.left, expectedLeftOffset, 1/60);
+          assert_approx_equals(dialogRect.top, expectedTopOffset, 1/60);
+        } else {
+          assert_equals(dialogRect.left, expectedLeftOffset);
+          assert_equals(dialogRect.top, expectedTopOffset);
+        }
+      });
+      document.body.appendChild(iframe);
+    }, writingMode + (containerWritingMode ? ` (container ${containerWritingMode})` : "") +
+       (dialogWritingMode ? ` (dialog ${dialogWritingMode})` : "") + `: ${label}` + `, default-sizes: ${isDefaultSize}`);
+
+  }
+}
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/closed-dialog-does-not-block-mouse-events.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/closed-dialog-does-not-block-mouse-events.html
new file mode 100644
index 0000000000..9d9856962d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/closed-dialog-does-not-block-mouse-events.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=110952">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+#div {
+    height: 100px;
+    width: 100px;
+    background: red;
+}
+</style>
+<div id=div></div>
+<dialog id="dialog"></dialog>
+<dialog></dialog>
+
+<script>
+promise_test(async () => {
+  const dialog = document.getElementById('dialog');
+  dialog.showModal();
+  dialog.close();
+
+  const div = document.getElementById('div');
+  div.addEventListener('click', function(event) {
+    div.firedOn = true;
+    div.style.backgroundColor = 'green';
+  });
+
+  var absoluteTop = 0;
+  var absoluteLeft = 0;
+  for (var parentNode = div; parentNode; parentNode = parentNode.offsetParent) {
+    absoluteLeft += parentNode.offsetLeft;
+    absoluteTop += parentNode.offsetTop;
+  }
+
+  const x = absoluteLeft + div.offsetWidth / 2;
+  const y = absoluteTop + div.offsetHeight / 2;
+  const actions = new test_driver.Actions()
+    .pointerMove(x, y)
+    .pointerDown()
+    .pointerUp()
+    .pointerMove(0, 0);
+  await actions.send();
+  assert_true(div.firedOn, 'div should have gotten a click event.');
+}, 'Ensure that closed dialogs do not block mouse events. To test manually, click the red box. The test succeeds if the red box turns green.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/default-color.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/default-color.html
new file mode 100644
index 0000000000..5a6e6b21fb
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/default-color.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test for dialog element colors</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+:root { background-color: Canvas; color: CanvasText; }
+#light { color-scheme: light }
+#dark { color-scheme: dark }
+</style>
+<dialog id="dialog" open>
+  This is a dialog
+</dialog>
+<dialog id="light" open>
+  This is a dialog
+</dialog>
+<dialog id="dark" open>
+  This is a dialog
+</dialog>
+<script>
+test(function() {
+  let dialog = document.getElementById("dialog");
+  let cs = getComputedStyle(dialog);
+  let rootCs = getComputedStyle(document.documentElement);
+  assert_equals(cs.color, rootCs.color, "Dialog color should match CanvasText");
+  assert_equals(cs.backgroundColor, rootCs.backgroundColor, "Dialog background should match Canvas");
+}, "<dialog> color and background match default")
+
+test(function() {
+  let lightCs = getComputedStyle(document.getElementById("light"));
+  let darkCs = getComputedStyle(document.getElementById("dark"));
+  assert_not_equals(lightCs.color, darkCs.color, "Dialog color should react to color-scheme");
+  assert_not_equals(lightCs.backgroundColor, darkCs.backgroundColor, "Dialog background should react to color-scheme");
+}, "<dialog> colors react to dark mode")
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-audio-video-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-audio-video-crash.html
new file mode 100644
index 0000000000..c8c1ab2826
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-audio-video-crash.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1206122">
+
+<body onload=dlg.show()>
+<dialog id="dlg">
+  <audio></audio>
+  <video></video>
+</dialog>
+
+This test passes if it does not crash.
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-autofocus-just-once.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-autofocus-just-once.html
new file mode 100644
index 0000000000..894efd59dc
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-autofocus-just-once.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/interaction/focus/the-autofocus-attribute/resources/utils.js"></script>
+<body>
+<dialog>
+<input>
+<input autofocus>
+</dialog>
+<script>
+// https://github.com/whatwg/html/issues/4788
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  dialog.show();
+  assert_equals(document.activeElement, dialog.querySelector('[autofocus]'),
+      'dialog.show() should set focus on a descendant element with an ' +
+      'autofocus attribute.');
+  document.activeElement.blur();
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, document.body,
+      'Non-dialog autofocus processing should be skipped.');
+}, 'An autofocus element in a dialog element should not try to get focus twice.');
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-autofocus-multiple-times.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-autofocus-multiple-times.html
new file mode 100644
index 0000000000..ff9ebd7d28
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-autofocus-multiple-times.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/common.js"></script>
+<script>
+promise_test(() => {
+  return waitUntilLoadedAndAutofocused().then(() => {
+        assert_equals(document.activeElement, document.getElementById("outer-button"));
+
+        var focusCount = 0;
+        var dlg = document.getElementById("dlg");
+        var input1 = document.getElementById("input1");
+        var input2 = document.getElementById("input2");
+        input2.onfocus = function() { focusCount += 1 };
+
+        var expectedFocusCount = 3;
+        for (i = 0; i < expectedFocusCount; i++) {
+            dlg.show();
+            assert_equals(document.activeElement, input2);
+            input1.focus();
+            assert_equals(document.activeElement,input1);
+            dlg.close();
+        }
+
+        assert_equals(focusCount.toString(), expectedFocusCount.toString());
+  });
+}, "autofocus is run every time a dialog is opened");
+</script>
+</head>
+<body>
+<button id="outer-button" autofocus></button>
+<dialog id="dlg">
+    <!-- Unfocusable elements with [autofocus] should be ignored. -->
+    <input autofocus disabled>
+    <textarea autofocus hidden></textarea>
+    <input id="input1"></input>
+    <input id="input2" autofocus></input>
+</dialog>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-autofocus.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-autofocus.html
new file mode 100644
index 0000000000..149a53eacf
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-autofocus.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/common.js"></script>
+<script>
+promise_test(() => {
+  return waitUntilLoadedAndAutofocused().then(() => {
+        assert_equals(document.activeElement, document.getElementById("outer-button"));
+
+        var dialog = document.getElementById('dialog');
+        dialog.showModal();
+
+        autofocusButton = document.getElementById('autofocus-button');
+        assert_equals(document.activeElement, autofocusButton);
+
+        anotherButton = document.getElementById('another-button');
+        anotherButton.focus();
+        assert_equals(document.activeElement, anotherButton);
+
+        // Test that recreating layout does not give focus back to a previously autofocused element.
+        autofocusButton.style.display = 'none';
+        document.body.offsetHeight;
+        autofocusButton.style.display = 'block';
+        document.body.offsetHeight;
+        assert_equals(document.activeElement, anotherButton);
+
+        // Test that reinserting does not give focus back to a previously autofocused element.
+        var parentNode = autofocusButton.parentNode;
+        parentNode.removeChild(autofocusButton);
+        document.body.offsetHeight;
+        parentNode.appendChild(autofocusButton);
+        document.body.offsetHeight;
+        assert_equals(document.activeElement, anotherButton);
+
+        dialog.close();
+        // Test that dialog focusing steps run when a dialog is reopened.
+        dialog.showModal();
+        assert_equals(document.activeElement, autofocusButton);
+        dialog.close();
+  });
+}, "autofocus when a modal dialog is opened");
+</script>
+</head>
+<body>
+<button id="outer-button" autofocus></button>
+<dialog id="dialog">
+    <button></button>
+    <!-- Unfocusable elements with [autofocus] should be ignored. -->
+    <input autofocus disabled>
+    <textarea autofocus hidden></textarea>
+    <dialog>
+        <button autofocus></button>
+    </dialog>
+    <div>
+        <span>
+            <button id="autofocus-button" autofocus></button>
+        </span>
+    </div>
+    <button id="another-button" autofocus></button>
+</dialog>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-events-closewatcher.tentative.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-events-closewatcher.tentative.html
new file mode 100644
index 0000000000..5b1da9a2e3
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-events-closewatcher.tentative.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test cancel event is fired when the dialog is closed by user interaction</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>
+  <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test cancel event is fired when the dialog is closed by user interaction</p>
+<dialog>
+  <p>Hello World</p>
+  <button>user activation button</button>
+</dialog>
+<script>
+  setup({ single_test: true });
+
+  var hasCancelEventFired = false;
+  var hasCloseEventFired = false;
+
+  const dialog = document.querySelector("dialog");
+
+  dialog.addEventListener("cancel", function(event) {
+    assert_true(true, "cancel event is fired");
+    assert_true(event.cancelable, "cancel event should be cancelable");
+    assert_false(hasCancelEventFired, "cancel event should only be fired once");
+    assert_false(hasCloseEventFired, "close event should be fired after cancel event");
+    hasCancelEventFired = true;
+  });
+
+  dialog.addEventListener("close", function() {
+    assert_true(true, "close event is fired");
+    assert_false(hasCloseEventFired, "close event should only be fired once");
+    assert_true(hasCancelEventFired, "cancel event should be fired before close event");
+    hasCloseEventFired = true;
+    done();
+  });
+
+  dialog.showModal();
+
+  (async () => {
+    // Pressing escape on the dialog needs user activation or else the cancel event won't be fired.
+    const button = dialog.querySelector('button');
+    const buttonClickPromise = new Promise(resolve => button.onclick = resolve);
+    await test_driver.click(button);
+    await buttonClickPromise;
+
+    test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
+  })();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-events.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-events.html
new file mode 100644
index 0000000000..03caab54ba
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-events.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test cancel event is fired when the dialog is closed by user interaction</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>
+  <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test cancel event is fired when the dialog is closed by user interaction</p>
+<dialog>
+  <p>Hello World</p>
+</dialog>
+<script>
+  setup({ single_test: true });
+
+  var hasCancelEventFired = false;
+  var hasCloseEventFired = false;
+
+  const dialog = document.querySelector("dialog");
+
+  dialog.addEventListener("cancel", function(event) {
+    assert_true(true, "cancel event is fired");
+    assert_true(event.cancelable, "cancel event should be cancelable");
+    assert_false(hasCancelEventFired, "cancel event should only be fired once");
+    assert_false(hasCloseEventFired, "close event should be fired after cancel event");
+    hasCancelEventFired = true;
+  });
+
+  dialog.addEventListener("close", function() {
+    assert_true(true, "close event is fired");
+    assert_false(hasCloseEventFired, "close event should only be fired once");
+    assert_true(hasCancelEventFired, "cancel event should be fired before close event");
+    hasCloseEventFired = true;
+    done();
+  });
+
+  dialog.showModal();
+  test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-preventDefault-closewatcher.tentative.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-preventDefault-closewatcher.tentative.html
new file mode 100644
index 0000000000..ef99578ca9
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-preventDefault-closewatcher.tentative.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test cancel event with preventDefault on cancel event for dialog element</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>
+  <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test cancel event with preventDefault on cancel event for dialog element</p>
+<dialog>
+  <p>Hello World</p>
+  <button>user activation button</button>
+</dialog>
+<script>
+  setup({ single_test: true });
+
+  var hasCancelEventFired = false;
+
+  const dialog = document.querySelector("dialog");
+
+  const verify = () => {
+    assert_true(hasCancelEventFired, "cancel is fired");
+    done();
+  };
+
+  dialog.addEventListener("cancel", function(event) {
+    hasCancelEventFired = true;
+    event.preventDefault();
+    step_timeout(function() {
+      verify();
+    }, 0)
+  });
+
+  dialog.addEventListener("close", function() {
+    assert_true(false, "close event should not be fired");
+  });
+
+  dialog.showModal();
+
+  (async () => {
+    // Pressing escape on the dialog needs user activation or else the cancel event won't be fired.
+    const button = dialog.querySelector('button');
+    const buttonClickPromise = new Promise(resolve => button.onclick = resolve);
+    await test_driver.click(button);
+    await buttonClickPromise;
+
+    test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
+  })();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-preventDefault.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-preventDefault.html
new file mode 100644
index 0000000000..79728b649f
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-preventDefault.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test cancel event with preventDefault on cancel event for dialog element</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>
+  <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test cancel event with preventDefault on cancel event for dialog element</p>
+<dialog>
+  <p>Hello World</p>
+</dialog>
+<script>
+  setup({ single_test: true });
+
+  var hasCancelEventFired = false;
+
+  const dialog = document.querySelector("dialog");
+
+  const verify = () => {
+    assert_true(hasCancelEventFired, "cancel is fired");
+    done();
+  };
+
+  dialog.addEventListener("cancel", function(event) {
+    hasCancelEventFired = true;
+    event.preventDefault();
+    step_timeout(function() {
+      verify();
+    }, 0)
+  });
+
+  dialog.addEventListener("close", function() {
+    assert_true(false, "close event should not be fired");
+  });
+
+  dialog.showModal();
+  test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-input.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-input.html
new file mode 100644
index 0000000000..153d434317
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-input.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test dialog modal is closed by escape key with input focused</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>
+  <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test dialog modal is closed by escape key with input focused</p>
+<dialog id="dialog">
+  <p>Hello World</p>
+</dialog>
+
+<dialog id="dialogWithAutofocus">
+  <input autofocus/>
+</dialog>
+
+<script>
+  setup({ single_test: true });
+
+  const triggerEscKey = () => {
+    test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
+  };
+
+  /* Make sure we still cancel the dialog even if the input element is focused */
+  function runTestCancelWhenInputFocused() {
+    const dialog = document.getElementById("dialogWithAutofocus");
+    const input = document.querySelector("input");
+
+    dialog.addEventListener("close", function() {
+      assert_false(dialog.open, "dialog with input autofocused is closed");
+      done();
+    });
+    dialog.showModal();
+    assert_true(input == document.activeElement, "input element should be focused");
+
+    triggerEscKey();
+  }
+
+  const dialog = document.getElementById("dialog");
+
+  dialog.addEventListener("close", function() {
+    assert_false(dialog.open, "dialog closed");
+    step_timeout(function() {
+      runTestCancelWhenInputFocused();
+    }, 0);
+  });
+
+  dialog.showModal();
+  triggerEscKey();
+</script>
+</pre>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-select.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-select.html
new file mode 100644
index 0000000000..178d5a2711
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-select.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test dialog modal is closed by escape key with select focused</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>
+  <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test dialog modal is closed by escape key with select focused</p>
+<dialog id="dialog">
+  <select>
+    <option value="one">one</option>
+    <option value="two">two</option>
+  </select>
+</dialog>
+
+<script>
+  setup({ single_test: true });
+
+  const dialog = document.getElementById("dialog");
+  const select = document.querySelector("select");
+
+  dialog.addEventListener("close", function() {
+    assert_false(dialog.open, "dialog with select is closed");
+    done();
+  });
+  dialog.showModal();
+  assert_true(select == document.activeElement, "select element should be focused");
+
+  test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-canceling.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-canceling.html
new file mode 100644
index 0000000000..fc003d29d1
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-canceling.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=253357">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<!--
+To test manually, hit Escape once to see the topmost dialog turn green
+then once again to close it. Repeat for the remaining dialog.
+-->
+
+<style>
+#bottom {
+  top: 100px;
+  left: 100px;
+  height: 300px;
+  width: 300px;
+  margin: 0;
+  background: cyan;
+}
+
+#top {
+  top: 150px;
+  left: 150px;
+  height: 200px;
+  width: 200px;
+  margin: 0;
+  background: yellow;
+}
+</style>
+
+<dialog id="bottom">
+  <span></span>
+  <div>You can't Escape when this textbox has focus: <input id="swallow-input" type="text"></div>
+  <div>You can Escape even if this textbox has focus: <input id="normal-input" type="text"></div>
+</dialog>
+<dialog id="top">
+  <span></span>
+</dialog>
+
+<script>
+async function pressEscape() {
+  const actions = new test_driver.Actions()
+    .keyDown('\uE00C')
+    .keyUp('\uE00C');
+  await actions.send();
+}
+
+function handleCancel(event) {
+  this.style.background = 'green';
+  this.querySelector('span').textContent = 'I blocked the cancel! Try again to close me.';
+  event.preventDefault();
+  this.removeEventListener('cancel', handleCancel);
+}
+
+promise_test(async () => {
+  bottomDialog = document.getElementById('bottom');
+  bottomDialog.addEventListener('cancel', handleCancel);
+
+  topDialog = document.getElementById('top');
+  topDialog.addEventListener('cancel', handleCancel);
+
+  normalInput = document.getElementById('normal-input');
+  swallowInput = document.getElementById('swallow-input');
+  swallowInput.addEventListener('keydown', function(event) {
+    event.preventDefault();
+  });
+
+  bottomDialog.showModal();
+  topDialog.showModal();
+
+  await pressEscape();
+  assert_true(topDialog.open, 'Top dialog event listener should prevent closing.');
+  assert_true(bottomDialog.open, 'Top dialog event listener should prevent closing.');
+
+  await pressEscape();
+  assert_false(topDialog.open, 'Top dialog should close.');
+  assert_true(bottomDialog.open, 'Top dialog should close.');
+
+  swallowInput.focus();
+  await pressEscape();
+  await pressEscape();
+  await pressEscape();
+  assert_false(topDialog.open, 'Input should swallow Escape mechanism.');
+  assert_true(bottomDialog.open, 'Input should swallow Escape mechanism.');
+
+  normalInput.focus();
+  await pressEscape();
+  assert_false(topDialog.open, 'Bottom dialog event listener should prevent closing.');
+  assert_true(bottomDialog.open, 'Bottom dialog event listener should prevent closing.');
+
+  await pressEscape();
+  assert_false(topDialog.open, 'Bottom dialog should close.');
+  assert_false(bottomDialog.open, 'Bottom dialog should close.');
+
+  await pressEscape();
+  assert_false(topDialog.open, 'Pressing Escape now should do nothing.');
+  assert_false(bottomDialog.open, 'Pressing Escape now should do nothing.');
+
+  bottomDialog.remove();
+  topDialog.remove();
+}, 'Modal dialogs should close when the escape key is pressed.');
+
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-event-async.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-event-async.html
new file mode 100644
index 0000000000..0f8d40aa2c
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-event-async.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<title>dialog element: close()</title>
+<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<dialog id="d1" open>
+  <p>foobar</p>
+  <button>OK</button>
+</dialog>
+<script>
+  var d1 = document.getElementById('d1'),
+      t = async_test("close() fires a close event"),
+      was_queued = false;
+
+  d1.onclose = t.step_func_done(function(e) {
+    assert_true(was_queued, "close event should be queued");
+    assert_true(e.isTrusted, "close event is trusted");
+    assert_false(e.bubbles, "close event doesn't bubble");
+    assert_false(e.cancelable, "close event is not cancelable");
+  });
+
+  t.step(function() {
+    d1.close();
+    was_queued = true;
+  })
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-event.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-event.html
new file mode 100644
index 0000000000..b7903ed461
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-event.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=276785">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<dialog></dialog>
+
+<script>
+async_test(t => {
+  document.addEventListener('close', t.step_func_done(() => {
+    t.assert_unreached(`The 'close' event unexpectedly bubbled.`);
+  }));
+
+  closedCount = 0;
+  dialog = document.querySelector('dialog');
+  dialog.addEventListener('close', function(event) {
+    const selfDialog = this;
+    t.step(() => {
+      closedCount++;
+      assert_equals(selfDialog, dialog);
+      assert_false(dialog.open);
+      assert_false(event.cancelable);
+      event.preventDefault();
+
+      if (closedCount == 1) {
+        dialog.show();
+        dialog.close();
+        assert_equals(closedCount, 1, `dialog's close event handler shouldn't be called synchronously.`);
+      } else if (closedCount == 2) {
+        t.done();
+      }
+    });
+  });
+
+  dialog.show();
+  dialog.close();
+
+  // Verify that preventDefault() didn't cancel closing.
+  assert_false(dialog.open);
+
+  // dialog's close event handler shouldn't be called synchronously.
+  assert_equals(closedCount, 0);
+}, "Test that dialog receives a close event upon closing.");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close.html
new file mode 100644
index 0000000000..9029612b24
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>dialog element: close()</title>
+<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<dialog id="d1">
+  <p>foobar</p>
+  <button>OK</button>
+</dialog>
+<dialog id="d2" open>
+  <p>foobar</p>
+  <button>OK</button>
+</dialog>
+<dialog id="d3" open>
+  <p>foobar</p>
+  <button>OK</button>
+</dialog>
+<dialog id="d4" open>
+  <p>foobar</p>
+  <button>OK</button>
+</dialog>
+<dialog id="d5" open>
+  <p>foobar</p>
+  <button>OK</button>
+</dialog>
+<script>
+  var d1 = document.getElementById('d1'),
+      d2 = document.getElementById('d2'),
+      d3 = document.getElementById('d3'),
+      d4 = document.getElementById('d4'),
+      d5 = document.getElementById('d5'),
+      t = async_test("close() fires a close event"),
+      was_queued = false;
+
+  test(function(){
+    d1.close("closedialog");
+    assert_equals(d1.returnValue, "");
+  }, "close() on a <dialog> that doesn't have an open attribute aborts the steps");
+
+  test(function(){
+    assert_true(d2.open);
+    assert_equals(d2.returnValue, "");
+    d2.close("closedialog");
+    assert_false(d2.hasAttribute("open"));
+    assert_equals(d2.returnValue, "closedialog");
+  }, "close() removes the open attribute and set the returnValue to the first argument");
+
+  test(function(){
+    assert_true(d3.open);
+    assert_equals(d3.returnValue, "");
+    d3.returnValue = "foobar";
+    d3.close();
+    assert_false(d3.hasAttribute("open"));
+    assert_equals(d3.returnValue, "foobar");
+  }, "close() without argument removes the open attribute and there's no returnValue");
+
+  d4.onclose = t.step_func_done(function(e) {
+    assert_true(was_queued, "close event should be queued");
+    assert_true(e.isTrusted, "close event is trusted");
+    assert_false(e.bubbles, "close event doesn't bubble");
+    assert_false(e.cancelable, "close event is not cancelable");
+  });
+
+  t.step(function() {
+    d4.close();
+    was_queued = true;
+  })
+
+  test(function(){
+    Object.defineProperty(HTMLDialogElement.prototype, 'returnValue', { set: function(v) { assert_unreached('JS-defined setter returnValue on the prototype was invoked'); }, configurable:true });
+    Object.defineProperty(d5, 'returnValue', { set: function(v) { assert_unreached('JS-defined setter returnValue on the instance was invoked'); }, configurable:true });
+     d5.close('foo');
+  }, "close() should set the returnValue IDL attribute but not the JS property");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-enabled.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-enabled.html
new file mode 100644
index 0000000000..87a130c6f0
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-enabled.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<dialog></dialog>
+<script>
+test(function() {
+  dialog = document.querySelector('dialog')
+  assert_true(dialog instanceof HTMLDialogElement);
+}, "The DIALOG element should be recognized");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-double-nested.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-double-nested.html
new file mode 100644
index 0000000000..2cd63eb796
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-double-nested.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>dialog focusing delegation: with two nested shadow trees</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<dialog>
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <template class="turn-into-shadow-tree delegates-focus">
+      <button tabindex="-1">Focusable</button>
+      <button tabindex="-1" autofocus>Focusable</button>
+      <button tabindex="-1">Focusable</button>
+    </template>
+    <button tabindex="-1">Focusable</button>
+  </template>
+  <button tabindex="-1">Focusable</button>
+</dialog>
+
+<script>
+function turnIntoShadowTree(template) {
+  for (const subTemplate of template.content.querySelectorAll(".turn-into-shadow-tree")) {
+    turnIntoShadowTree(subTemplate);
+  }
+
+  const div = document.createElement("div");
+  div.attachShadow({ mode: "open", delegatesFocus: template.classList.contains("delegates-focus") });
+  div.shadowRoot.append(template.content);
+  template.replaceWith(div);
+}
+
+for (const template of document.querySelectorAll(".turn-into-shadow-tree")) {
+  turnIntoShadowTree(template);
+}
+
+for (const method of ["show", "showModal"]) {
+  test(t => {
+    const dialog = document.querySelector("dialog");
+    dialog[method]();
+    t.add_cleanup(() => dialog.close());
+
+    const shadowHostOuter = dialog.querySelector("div");
+    assert_equals(document.activeElement, shadowHostOuter, "document.activeElement");
+
+    const shadowHostInner = shadowHostOuter.shadowRoot.querySelector("div");
+    assert_equals(shadowHostOuter.shadowRoot.activeElement, shadowHostInner, "shadowHostOuter.shadowRoot.activeElement");
+
+    const button = shadowHostInner.shadowRoot.querySelector("[autofocus]");
+    assert_equals(shadowHostInner.shadowRoot.activeElement, button, "shadowHostInner.shadowRoot.activeElement");
+  }, `${method}()`);
+}
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
new file mode 100644
index 0000000000..e9ea15516e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>dialog focus delegation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<!--
+  We focus this one between each test, to ensure that for non-modal dialogs,
+  if there is no focus delegate, it stays focused (instead of causing focus to reset to the body).
+-->
+<button tabindex="-1" id="focus-between-tests">Focus between tests</button>
+
+<dialog data-description="No autofocus, no delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="No autofocus, no delegatesFocus, sibling before">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="No autofocus, no delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="No autofocus, yes delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="No autofocus, yes delegatesFocus, sibling before">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="No autofocus, yes delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus before, no delegatesFocus">
+  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus before, yes delegatesFocus">
+  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus after, no delegatesFocus">
+  <template class="turn-into-shadow-tree">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus after, yes delegatesFocus">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, yes delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree delegates-focus autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling before">
+  <button tabindex="-1">Focusable</button>
+  <template class="turn-into-shadow-tree delegates-focus autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree delegates-focus autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, no delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling before">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree autofocus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling before">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1">Focusable</button>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, no siblings">
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling before">
+  <button tabindex="-1" class="focus-me">Focusable</button>
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling after">
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1">Focusable</button>
+    <button tabindex="-1" autofocus>Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="Two shadow trees, both delegatesFocus, first tree doesn't have autofocus element, second does">
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button disabled>Non-focusable</button>
+    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button disabled>Non-focusable</button>
+  </template>
+  <template class="turn-into-shadow-tree delegates-focus">
+    <button tabindex="-1" autofocus>Focusable</button>
+  </template>
+</dialog>
+
+<dialog data-description="No autofocus, no delegatesFocus, slotted target">
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1">Focusable</button>
+    <slot></slot>
+    <button tabindex="-1">Focusable</button>
+  </template>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="Shadowroot on child, no autofocus, no delegatesFocus">
+  <div>
+    <template class="turn-into-shadow-tree">
+      <button tabindex="-1">Focusable</button>
+    </template>
+  </div>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
+<script>
+for (const template of document.querySelectorAll(".turn-into-shadow-tree")) {
+  const div = document.createElement("div");
+  div.attachShadow({ mode: "open", delegatesFocus: template.classList.contains("delegates-focus")  });
+
+  if (template.classList.contains("autofocus")) {
+    div.setAttribute("autofocus", true);
+  }
+  div.shadowRoot.append(template.content);
+  template.replaceWith(div);
+}
+
+const focusBetweenTests = document.querySelector("#focus-between-tests");
+
+for (const dialog of document.querySelectorAll("dialog")) {
+  for (const method of ["show", "showModal"]) {
+    test(t => {
+      focusBetweenTests.focus();
+
+      dialog[method]();
+      t.add_cleanup(() => dialog.close());
+
+      const expectedFocusOutsideShadowTree = dialog.querySelector(".focus-me");
+      if (expectedFocusOutsideShadowTree) {
+        assert_equals(document.activeElement, expectedFocusOutsideShadowTree);
+      } else {
+        const shadowHost = dialog.querySelector("div");
+        const expectedFocusInsideShadowTree = shadowHost.shadowRoot.querySelector(".focus-me");
+        if (expectedFocusInsideShadowTree) {
+          assert_equals(document.activeElement, shadowHost);
+          assert_equals(shadowHost.shadowRoot.activeElement, expectedFocusInsideShadowTree);
+        } else {
+          // There is no focus delegate. Expected result depends on show() vs. showModal().
+          if (method === "show") {
+            assert_equals(document.activeElement, focusBetweenTests);
+          } else {
+            assert_equals(document.activeElement, document.body);
+          }
+        }
+      }
+    }, `${method}: ${dialog.dataset.description}`);
+  }
+}
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-disconnected.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-disconnected.html
new file mode 100644
index 0000000000..bf621b640b
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-disconnected.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Test focusing steps when dialog is disconnected</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<input>
+<script>
+test(function() {
+  const outerInput = document.querySelector("input");
+  outerInput.focus();
+  assert_equals(document.activeElement, outerInput,
+    "Focus should be on element we just focused");
+
+  const dialog = document.createElement("dialog");
+  assert_false(dialog.open, "Dialog should initially be closed");
+  assert_false(dialog.hasAttribute('open'), "Dialog should initially be closed");
+
+  const innerInput = document.createElement("input");
+  innerInput.autofocus = true;
+  dialog.append(innerInput);
+
+  dialog.show();
+  this.add_cleanup(() => { dialog.close(); });
+  assert_true(dialog.open, "Disconnected dialog can still be open");
+
+
+  assert_equals(document.activeElement, outerInput, "Focusing steps should not change focus");
+}, "dialog.show(): focusing steps should not change focus on disconnected <dialog>");
+
+test(function() {
+  assert_throws_dom("InvalidStateError", () => {
+    document.createElement("dialog").showModal();
+  });
+}, "dialog.showModal() should throw on disconnected <dialog>");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-inert.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-inert.html
new file mode 100644
index 0000000000..003c456179
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-inert.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Test focusing steps when dialog is inert</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<input id="outer-input">
+<dialog>
+  <input autofocus>
+</dialog>
+<script>
+function test_focusing_steps_with_inert_dialog(test, isModal) {
+  const outerInput = document.querySelector("#outer-input");
+  outerInput.focus();
+  assert_equals(document.activeElement, outerInput,
+    "Focus should be on element we just focused");
+
+  const dialog = document.querySelector("dialog");
+  assert_false(dialog.open, "Dialog should initially be closed");
+
+  dialog.inert = true;
+  test.add_cleanup(() => { dialog.inert = false; });
+
+  if (isModal) {
+    dialog.showModal();
+    test.add_cleanup(() => { dialog.close(); });
+    assert_equals(document.activeElement, document.body,
+      "dialog.showModal(): focusing steps should apply focus fixup rule when dialog is inert");
+  } else {
+    dialog.show();
+    test.add_cleanup(() => { dialog.close(); });
+    assert_equals(document.activeElement, outerInput,
+      "dialog.show(): focusing steps should not change focus when dialog is inert");
+  }
+}
+
+test(function() {
+  test_focusing_steps_with_inert_dialog(this, false);
+}, "dialog.show(): focusing steps should not change focus when dialog is inert");
+
+test(function() {
+  test_focusing_steps_with_inert_dialog(this, true);
+}, "dialog.showModal(): focusing steps should apply focus fixup rule when dialog is inert");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
new file mode 100644
index 0000000000..2e8563f761
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/interaction/focus/the-autofocus-attribute/resources/utils.js"></script>
+<body>
+<dialog></dialog>
+<script>
+// https://github.com/whatwg/html/issues/4788
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  dialog.show();
+  dialog.close();
+  const input = document.createElement('input');
+  input.autofocus = true;
+  document.body.insertBefore(input, dialog);
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, document.body,
+      'Non-dialog autofocus processing should be skipped.');
+}, 'After showing a dialog, non-dialog autofocus processing won\'t work.');
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html
new file mode 100644
index 0000000000..5934485087
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<meta charset=urf-8>
+<meta name=viewport content="width=device-width,initial-scale=1">
+<title>Test dialog form submission</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<body>
+<dialog id="favDialog">
+  <form id="dialogForm" method="dialog">
+    <button id="confirmBtn" value="default">Confirm</button>
+    <input id="confirmImgBtn" src="./resources/submit.jpg" width="41"
+    height="41" type="image" alt="Hello">
+  </form>
+  <form method="post">
+    <input id="confirmImgBtn2" src="./resources/submit.jpg" width="41"
+    formmethod="dialog" height="41" type="image" alt="Hello">
+  </form>
+</dialog>
+<script>
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  dialog.showModal();
+
+  const button = document.querySelector('button');
+  button.click();
+
+  assert_false(dialog.open, "dialog should be closed now");
+  assert_equals(dialog.returnValue, "default", "Return the default value");
+}, 'click the form submission button should close the dialog');
+
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  dialog.showModal();
+
+  const button = document.querySelector('button');
+  button.value = "sushi";
+  button.click();
+
+  assert_false(dialog.open, "dialog should be closed now");
+  assert_equals(dialog.returnValue, "sushi", "Return the updated value");
+}, 'form submission should return correct value');
+
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  dialog.showModal();
+
+  const button = document.querySelector('button');
+  button.removeAttribute("value");
+  button.click();
+  assert_false(dialog.open, "dialog should be closed now");
+  assert_not_equals(dialog.returnValue, undefined, "returnValue should not be set");
+}, "no returnValue when there's no result.");
+
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  dialog.showModal();
+
+  const button = document.querySelector('input');
+  let expectedReturnValue = "";
+  button.addEventListener('click', function(event) {
+    expectedReturnValue = event.offsetX + "," + event.offsetY;
+  });
+  await test_driver.click(button);
+
+  assert_false(dialog.open, "dialog should be closed now");
+  assert_not_equals(dialog.returnValue, "", "returnValue shouldn't be empty string");
+  assert_equals(dialog.returnValue, expectedReturnValue, "returnValue should be the offsets of the click");
+}, "input image button should return the coordinates");
+
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  dialog.showModal();
+  const button = document.getElementById('confirmImgBtn2');
+  await test_driver.click(button);
+  assert_false(dialog.open, "dialog should be closed now");
+}, "formmethod attribute should use dialog form submission");
+
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  dialog.returnValue = "";
+  dialog.showModal();
+
+  const button = document.querySelector('button');
+  button.value = "sushi";
+
+  const dialogForm = document.getElementById('dialogForm');
+  dialogForm.onsubmit = function() {
+    dialog.close();
+  }
+
+  button.click();
+  assert_false(dialog.open, "dialog should be closed now");
+  // If the submission request got processed, the returnValue should change
+  // to "sushi" because that's the value of the submitter
+  assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same");
+}, "closing the dialog while submitting should stop the submission");
+
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  dialog.returnValue = undefined;
+  dialog.showModal();
+
+  let submitEvent = false;
+  const dialogForm = document.getElementById('dialogForm');
+  dialogForm.onsubmit = function() {
+    submitEvent = true;
+    assert_false(dialog.open, "dialog should be closed");
+    assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same");
+  };
+
+  const button = document.querySelector('button');
+  button.value = "sushi";
+  button.onclick = function() {
+    dialogForm.submit();
+    assert_false(dialog.open, "dialog should be closed now");
+    // The returnValue should be "" because there is no submitter
+    assert_equals(dialog.returnValue, "", "returnValue shouldn be empty string");
+  };
+
+  button.click();
+  assert_true(submitEvent, "Should have submit event");
+  assert_false(dialog.open, "dialog should be closed");
+  assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same");
+}, "calling form.submit() in click handler of submit button should start the submission synchronously");
+
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.html
new file mode 100644
index 0000000000..864420b9d2
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta charset=utf-8>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  body { margin: 0 }
+  dialog {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+    padding: 0;
+  }
+  dialog::backdrop {
+    display: none;
+  }
+</style>
+<dialog id=dialog>Something</dialog>
+<script>
+test(function() {
+  let dialog = document.getElementById("dialog");
+  dialog.showModal();
+  assert_equals(
+    document.elementFromPoint(10, 10),
+    dialog,
+    "Dialog is hittable by default",
+  );
+  dialog.inert = true;
+  assert_not_equals(
+    document.elementFromPoint(10, 10),
+    dialog,
+    "Dialog becomes inert dynamically",
+  );
+  dialog.close();
+  dialog.showModal();
+  assert_not_equals(
+    document.elementFromPoint(10, 10),
+    dialog,
+    "Dialog remains inert after open",
+  );
+});
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-keydown-preventDefault.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-keydown-preventDefault.html
new file mode 100644
index 0000000000..4a50b13c87
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-keydown-preventDefault.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test cancel event with preventDefault on keydown event for dialog element</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>
+  <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test cancel event with preventDefault on keydown event for dialog element</p>
+<dialog>
+  <p>Hello World</p>
+</dialog>
+<script>
+  setup({ single_test: true });
+
+  var hasCancelEventFired = false;
+
+  const dialog = document.querySelector("dialog");
+
+  const verify = () => {
+    assert_false(hasCancelEventFired, "cancel should not be fired");
+    assert_true(hasKeydownEventFired, "document level keydown event should be fired");
+    done();
+  };
+
+  dialog.addEventListener("cancel", function(event) {
+    hasCancelEventFired = true;
+  });
+
+  document.addEventListener("keydown", function(event) {
+    hasKeydownEventFired = true;
+    event.preventDefault();
+    step_timeout(function() {
+      verify();
+    }, 0);
+  });
+  dialog.showModal();
+  test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-not-in-tree-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-not-in-tree-crash.html
new file mode 100644
index 0000000000..fe3fab8ebb
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-not-in-tree-crash.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<script>
+  const dialog = document.createElement("dialog");
+  dialog.show();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open-2.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open-2.html
new file mode 100644
index 0000000000..79120d07eb
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=90931">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<dialog id=mydialog>It's my dialog.</dialog>
+
+<script>
+test(() => {
+  const dialog = document.getElementById('mydialog');
+  let computedStyle = window.getComputedStyle(dialog, null);
+  assert_equals(computedStyle.getPropertyValue('display'), 'none');
+
+  dialog.show();
+  computedStyle = window.getComputedStyle(dialog, null);
+  assert_equals(computedStyle.getPropertyValue('display'), 'block');
+
+  dialog.close();
+  computedStyle = window.getComputedStyle(dialog, null);
+
+  assert_equals(computedStyle.getPropertyValue('display'), 'none');
+  dialog.close();
+}, "Tests that dialog is visible after show() is called and not visible after close() is called.");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open.html
new file mode 100644
index 0000000000..e1f4c6ab82
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>dialog element: open</title>
+<link rel=help href="https://html.spec.whatwg.org/multipage/forms.html#dom-dialog-open">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<dialog id="d1">
+  <p>foobar</p>
+  <button>OK</button>
+</dialog>
+<dialog id="d2" open>
+  <p>foobar</p>
+  <button>OK</button>
+</dialog>
+<script>
+  var d1 = document.getElementById('d1');
+  var d2 = document.getElementById('d2');
+
+  test(function(){
+    assert_false(d1.open);
+    assert_true(d2.open);
+  }, "On getting, the IDL open attribute must return true if the content open attribute is set, and false if it is absent.");
+
+  test(function(){
+    d1.open = true;
+    assert_true(d1.hasAttribute("open"));
+    d2.open = false;
+    assert_false(d2.hasAttribute("open"));
+  }, "On setting, the content open attribute must be removed if the IDL open attribute is set to false, and must be present if the IDL open attribute is set to true.");
+
+  async_test(function(t){
+    d2.open = true;
+    assert_true(d2.hasAttribute("open"));
+    d2.onclose = t.unreached_func("close event should not be fired when just setting the open attribute");
+    d2.open = false;
+    assert_false(d2.hasAttribute("open"));
+
+    // close event is async, give it a chance to be fired
+    t.step_timeout(function() {
+      t.done();
+    }, 0);
+  }, "On setting it to false, the close event should not be fired");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-return-value.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-return-value.html
new file mode 100644
index 0000000000..2a80de65a1
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-return-value.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<dialog></dialog>
+<script>
+test(function() {
+    dialog = document.querySelector('dialog');
+    assert_equals(dialog.returnValue, '');
+
+    dialog.returnValue = 'Setting value directly';
+    assert_equals(dialog.returnValue, 'Setting value directly');
+
+    dialog.returnValue = null;
+    assert_equals(dialog.returnValue, 'null');
+
+    dialog.returnValue = '';
+    assert_equals(dialog.returnValue, '');
+
+    dialog.returnValue = 7;
+    assert_equals(dialog.returnValue, '7');
+
+    dialog.show();
+    dialog.close('Return value set from close()');
+    assert_equals(dialog.returnValue, 'Return value set from close()');
+
+    dialog.show();
+    dialog.close('');
+    assert_equals(dialog.returnValue, '');
+
+    dialog.show();
+    dialog.close(null);
+    assert_equals(dialog.returnValue, 'null');
+
+    dialog.returnValue = 'Should not change because no argument to close()';
+    dialog.show();
+    dialog.close();
+    assert_equals(dialog.returnValue, 'Should not change because no argument to close()');
+
+    dialog.returnValue = 'Should not change because of undefined argument to close()';
+    dialog.show();
+    dialog.close(undefined);
+    assert_equals(dialog.returnValue, 'Should not change because of undefined argument to close()');
+
+    dialog.returnValue = 'Should not change because of no-op close()';
+    dialog.close('blah');
+    assert_equals(dialog.returnValue, 'Should not change because of no-op close()');
+}, "Tests dialog.returnValue is settable and returns the last value set.");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-inert-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-inert-crash.html
new file mode 100644
index 0000000000..54c2edab6b
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-inert-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<iframe id="frame"></iframe>
+<script>
+  async_test(function(t) {
+    onload = t.step_func(() => {
+      const host = document.createElement("div");
+      frame.appendChild(host);
+      frame.contentDocument.body.innerHTML = "<dialog></dialog>";
+      document.body.offsetTop;
+      const root = host.attachShadow({mode: 'open'});
+      root.innerHTML = "<content>";
+      const dialog = frame.contentDocument.querySelector("dialog");
+      dialog.showModal();
+      t.done();
+    });
+  }, "Dialog.showModal() called when we have a dirty shadow distribution should not crash.");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-remove.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-remove.html
new file mode 100644
index 0000000000..c2350c3042
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-remove.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<title>dialog element: removing from document after showModal()</title>
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#dom-dialog-showmodal">
+<link rel=help href="https://fullscreen.spec.whatwg.org/#removing-steps">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<dialog></dialog>
+<script>
+async_test(t => {
+  const dialog = document.querySelector('dialog')
+  dialog.showModal()
+  assert_true(dialog.open)
+  // The dialog element is now in top layer. Removing it should synchronously
+  // remove it from top layer, but should leave it in a strange limbo state.
+  dialog.addEventListener('close', t.unreached_func('close event'))
+  dialog.remove()
+  assert_true(dialog.open)
+  // if an event was queued, it would fire before this timeout
+  step_timeout(t.step_func_done(() => {
+    assert_true(dialog.open)
+    // pass if no close event was fired
+  }))
+})
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
new file mode 100644
index 0000000000..c511631f9f
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>dialog element: showModal()</title>
+<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<button id="b0">OK</button>
+<dialog id="d1">
+  <p>foobar</p>
+  <button id="b1">OK</button>
+</dialog>
+<dialog id="d2" open>
+  <p>foobar</p>
+  <button>OK</button>
+</dialog>
+<dialog id="d3">
+  <p>foobar</p>
+  <button id="b3">OK</button>
+</dialog>
+<dialog id="d4">
+  <p>foobar</p>
+  <button id="b4">OK</button>
+</dialog>
+<dialog id="d5">
+  <p>foobar</p>
+  <button id="b5">OK</button>
+</dialog>
+<dialog id="d6"></dialog>
+<dialog id="d7">
+  <input id="i71" value="foobar">
+  <input id="i72" value="foobar">
+  <button id="b7">OK</button>
+</dialog>
+<dialog id="d8">
+  <input id="i81" value="foobar">
+  <input id="i82" value="foobar" autofocus>
+  <button id="b8">OK</button>
+</dialog>
+<dialog id="d9"></dialog>
+<dialog id="d10"></dialog>
+<dialog id="d11"></dialog>
+<script>
+  var d1 = document.getElementById('d1'),
+      d2 = document.getElementById('d2'),
+      d3 = document.getElementById('d3'),
+      d4 = document.getElementById('d4'),
+      d5 = document.getElementById('d5'),
+      d6 = document.getElementById('d6'),
+      d7 = document.getElementById('d7'),
+      d8 = document.getElementById('d8'),
+      d9 = document.getElementById('d9'),
+      d10 = document.getElementById('d10'),
+      d11 = document.getElementById('d11'),
+      b0 = document.getElementById('b0'),
+      b1 = document.getElementById('b1'),
+      b3 = document.getElementById('b3'),
+      b4 = document.getElementById('b4'),
+      b5 = document.getElementById('b5');
+
+  test(function(){
+    assert_false(d1.open);
+    assert_false(d1.hasAttribute("open"));
+    assert_equals(getComputedStyle(d1).display, "none");
+    d1.showModal();
+    this.add_cleanup(function() { d1.close(); });
+    assert_true(d1.open);
+    assert_equals(d1.getAttribute("open"), "");
+    assert_equals(getComputedStyle(d1).display, "block");
+    assert_equals(document.activeElement, b1);
+  });
+
+  test(function(){
+    this.add_cleanup(function() { d2.close(); });
+    assert_throws_dom("INVALID_STATE_ERR", function() {
+      d2.showModal();
+    });
+  }, "showModal() on a <dialog> that already has an open attribute throws an InvalidStateError exception");
+
+  test(function(){
+    d9.showModal();
+    this.add_cleanup(function() { d9.close(); });
+    assert_true(d9.open);
+    d9.removeAttribute("open");
+    assert_false(d9.open);
+    d9.showModal();
+    assert_true(d9.open);
+  }, "showModal() on a <dialog> after initial showModal() and removing the open attribute");
+
+  test(function(){
+    var d = document.createElement("dialog");
+    this.add_cleanup(function() { d.close(); });
+    assert_throws_dom("INVALID_STATE_ERR", function() {
+      d.showModal();
+    });
+  }, "showModal() on a <dialog> not in a Document throws an InvalidStateError exception");
+
+  test(function(){
+    assert_false(d3.open);
+    assert_false(d4.open);
+    assert_false(d5.open);
+    d3.showModal();
+    this.add_cleanup(function() { d3.close(); });
+    d4.showModal();
+    this.add_cleanup(function() { d4.close(); });
+    d5.showModal();
+    this.add_cleanup(function() { d5.close(); });
+    assert_true(d3.open);
+    assert_true(d4.open);
+    assert_true(d5.open);
+  }, "when opening multiple dialogs, only the newest one is non-inert");
+
+  test(function(){
+    assert_false(d6.open);
+    d6.showModal();
+    this.add_cleanup(function() { d6.close(); });
+    assert_true(d6.open);
+    assert_equals(document.activeElement, document.body);
+  }, "opening dialog without focusable children");
+
+  test(function(){
+    assert_false(d7.open);
+    d7.showModal();
+    this.add_cleanup(function() { d7.close(); });
+    assert_true(d7.open);
+    assert_equals(document.activeElement, document.getElementById("i71"));
+  }, "opening dialog with multiple focusable children");
+
+  test(function(){
+    assert_false(d8.open);
+    d8.showModal();
+    this.add_cleanup(function() { d8.close(); });
+    assert_true(d8.open);
+    assert_equals(document.activeElement, document.getElementById("i82"));
+  }, "opening dialog with multiple focusable children, one having the autofocus attribute");
+
+  test(function(){
+    assert_false(d10.open);
+    assert_false(d11.open);
+    d10.showModal();
+    this.add_cleanup(function() { d10.close(); });
+    d11.showModal();
+    this.add_cleanup(function() { d11.close(); });
+    var rect10 = d10.getBoundingClientRect();
+    var rect11 = d11.getBoundingClientRect();
+
+    // The two <dialog>s are both in top layer, with the same position/size.
+    assert_equals(rect10.left, rect11.left);
+    assert_equals(rect10.top, rect11.top);
+    assert_equals(rect10.width, rect11.width);
+    assert_equals(rect10.height, rect11.height);
+
+    var pointX = rect10.left + rect10.width / 2,
+        pointY = rect10.top + rect10.height / 2;
+    function topElement() {
+      return document.elementFromPoint(pointX, pointY);
+    }
+
+    // d11 was most recently openened, and thus on top.
+    assert_equals(topElement(), d11);
+
+    // Removing the open attribute and running through the showModal() algorithm
+    // again should not promote d10 to the top.
+    d10.removeAttribute("open");
+    assert_equals(topElement(), d11);
+    d10.showModal();
+    assert_equals(topElement(), d11);
+
+    // Closing d11 with close() should cause d10 to be the topmost element.
+    d11.close();
+    assert_equals(topElement(), d10);
+  }, "when opening multiple dialogs, the most recently opened is rendered on top");
+
+  test(function() {
+    assert_false(d11.open);
+    d11.parentNode.removeChild(d11);
+    assert_throws_dom("INVALID_STATE_ERR", () => d11.showModal());
+
+    const doc = document.implementation.createHTMLDocument();
+    doc.body.appendChild(d11);
+    this.add_cleanup(() => document.body.append(d11));
+    assert_false(d11.open);
+    d11.showModal();
+    assert_true(d11.open);
+    this.add_cleanup(() => d11.close());
+  }, "Although the document is not attached to any pages, showModal() should execute as normal.");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialogs-with-no-backdrop-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialogs-with-no-backdrop-ref.html
new file mode 100644
index 0000000000..4b31dc7062
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialogs-with-no-backdrop-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<body>
+Test that ::backdrop is not shown for non-open or non-modal dialogs.
+The test passes if there is no red shown.
+</body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialogs-with-no-backdrop.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialogs-with-no-backdrop.html
new file mode 100644
index 0000000000..fec4ba8587
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialogs-with-no-backdrop.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<link rel="match" href="dialogs-with-no-backdrop-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
+<style>
+dialog::backdrop {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+    height: 100px;
+    width: 100px;
+    background: red;
+}
+
+#display-none-backdrop::backdrop {
+    display: none;
+}
+</style>
+<body>
+Test that ::backdrop is not shown for non-open or non-modal dialogs.
+The test passes if there is no red shown.
+<dialog id="never-opened-dialog"></dialog>
+<dialog id="display-none-dialog" style="display: none"></dialog>
+<dialog id="non-modal-dialog" style="visibility: hidden"></dialog>
+<dialog id="display-none-backdrop" style="visibility: hidden"></dialog>
+<dialog id="closed-dialog"></dialog>
+<dialog id="removed-dialog"></dialog>
+<script>
+document.getElementById('display-none-dialog').showModal();
+document.getElementById('non-modal-dialog').show();
+document.getElementById('display-none-backdrop').showModal();
+
+var closedDialog = document.getElementById('closed-dialog');
+closedDialog.showModal();
+closedDialog.close();
+
+var removedDialog = document.getElementById('removed-dialog');
+removedDialog.showModal();
+removedDialog.parentNode.removeChild(removedDialog);
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html
new file mode 100644
index 0000000000..535ac93560
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+#non-modal {
+    position: static;
+}
+</style>
+<p>Test that a non-top layer element doesn't share style with a top layer
+element. The test passes if you see two boxes.</p>
+<dialog id="non-modal" open></dialog>
+<dialog id="modal"></dialog>
+<script>
+document.querySelector('#modal').showModal();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html
new file mode 100644
index 0000000000..efbbab010a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<link rel="match" href="dont-share-style-to-top-layer-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+dialog {
+  position: static;
+}
+</style>
+<p>Test that a non-top layer element doesn't share style with a top layer
+element. The test passes if you see two boxes.</p>
+<dialog open></dialog>
+<dialog id="modal"></dialog>
+<script>
+document.querySelector('#modal').showModal();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position-ref.html
new file mode 100644
index 0000000000..c0b64e68bd
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.green {
+    color: green;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="http://webkit.org/b/106538">106538</a>: 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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html
new file mode 100644
index 0000000000..d78051a9b3
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="element-removed-from-top-layer-has-original-position-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+.green {
+    color: green;
+}
+
+#right-dialog {
+    display: inline;
+    position: static;
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="http://webkit.org/b/106538">106538</a>: 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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html
new file mode 100644
index 0000000000..98835cb795
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<title>Test that a fixed positioned child of a dialog is aligned to the viewport</title>
+<head>
+<link rel="match" href="fixed-position-child-with-fixed-position-cb-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+::backdrop {
+    display: none;
+}
+</style>
+</head>
+<body>
+<div style="contain: layout">
+    <dialog id="dialog">
+        Dialog should be centered.
+        <div style="position: fixed; top: 0px; left: 0px">This fixed positioned element is aligned to viewport top-left.</div>
+    </dialog>
+</div>
+<script>
+dialog.showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fixed-position-cb-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fixed-position-cb-ref.html
new file mode 100644
index 0000000000..d973c0876d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fixed-position-cb-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>Test that a fixed positioned child of a dialog is aligned to the viewport</title>
+<head>
+<link rel="stylesheet" href="resources/dialog.css">
+</head>
+<style>
+</style>
+<body>
+<div class="pseudodialog" style="position: fixed">
+Dialog should be centered.
+</div>
+<div style="position: fixed; top: 0px; left: 0px">This fixed positioned element is aligned to viewport top-left.</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html
new file mode 100644
index 0000000000..fe625f1c9b
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<title>Test that a fixed positioned child of a dialog is aligned to the viewport</title>
+<head>
+<link rel="match" href="fixed-position-child-with-fixed-position-cb-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+::backdrop {
+    display: none;
+}
+</style>
+</head>
+<body>
+<svg>
+  <foreignObject>
+    <dialog id="dialog">
+        Dialog should be centered.
+        <div style="position: fixed; top: 0px; left: 0px">This fixed positioned element is aligned to viewport top-left.</div>
+    </dialog>
+  </foreignObject>
+</svg>
+<script>
+dialog.showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html
new file mode 100644
index 0000000000..58627443da
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<title>Test that a fixed positioned child of a dialog is aligned to the viewport</title>
+<head>
+<link rel="match" href="fixed-position-child-with-fixed-position-cb-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+::backdrop {
+    display: none;
+}
+</style>
+</head>
+<body>
+<div style="scale: 1">
+    <dialog id="dialog">
+        Dialog should be centered.
+        <div style="position: fixed; top: 0px; left: 0px">This fixed positioned element is aligned to viewport top-left.</div>
+    </dialog>
+</div>
+<script>
+dialog.showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html
new file mode 100644
index 0000000000..14f4391e6b
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<title>Test that a fixed positioned child of a dialog is aligned to the viewport</title>
+<head>
+<link rel="match" href="fixed-position-child-with-fixed-position-cb-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+::backdrop {
+    display: none;
+}
+</style>
+</head>
+<body>
+<div style="will-change: transform">
+    <dialog id="dialog">
+        Dialog should be centered.
+        <div style="position: fixed; top: 0px; left: 0px">This fixed positioned element is aligned to viewport top-left.</div>
+    </dialog>
+</div>
+<script>
+dialog.showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/focus-after-close.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/focus-after-close.html
new file mode 100644
index 0000000000..d66d45527a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/focus-after-close.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Test focus is moved to the previously focused element when dialog is closed</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<body>
+<input />
+<dialog>
+    <button id="button1">This is a button1</button>
+    <button id="button2">This is a button2</button>
+    <button id="button3">This is a button3</button>
+</dialog>
+<script>
+
+// Test focus is moved to the previously focused element
+function test_move_to_previously_focused(showModal) {
+  const input = document.querySelector("input");
+  input.focus();
+  const dialog = document.querySelector("dialog");
+  if (showModal) {
+    dialog.showModal();
+  } else {
+    dialog.show();
+  }
+  dialog.close();
+
+  assert_equals(document.activeElement, input);
+}
+
+// Test focus is moved to the previously focused element with some complex dialog usage
+async function test_move_to_previously_focused_with_complex_dialog_usage(showModal) {
+  const input = document.querySelector("input");
+  input.focus();
+  const dialog = document.querySelector("dialog");
+  if (showModal) {
+    dialog.showModal();
+  } else {
+    dialog.show();
+  }
+
+  const button1 = document.getElementById("button1");
+  const button2 = document.getElementById("button2");
+  const button3 = document.getElementById("button3");
+
+  await test_driver.click(button1);
+  await test_driver.click(button2);
+  await test_driver.click(button3);
+
+  dialog.close();
+
+  assert_equals(document.activeElement, input);
+}
+
+// Test focus is moved to the previously focused element even if that element moved in between
+function test_element_move_in_between_show_close(showModal) {
+  const input = document.querySelector("input");
+  input.focus();
+  const dialog = document.querySelector("dialog");
+
+  assert_equals(input.nextElementSibling, dialog, "Element is in correct position");
+
+  if (showModal) {
+    dialog.showModal();
+  } else {
+    dialog.show();
+  }
+
+  document.body.appendChild(input);
+  assert_not_equals(input.nextElementSibling, dialog, "Element should have moved");
+
+  dialog.close();
+  assert_equals(document.activeElement, input, "Focus should be restored to previously focused input");
+
+  // Clean up
+  document.body.insertBefore(input, dialog);
+}
+
+// Test focus is moved to the previously focused element even if that element moved to shadow root in between
+function test_element_move_to_shadow_root_in_between_show_close(showModal) {
+  const input = document.querySelector("input");
+  input.focus();
+  const dialog = document.querySelector("dialog");
+
+  assert_equals(input.nextElementSibling, dialog, "Element is in correct position");
+
+  if (showModal) {
+    dialog.showModal();
+  } else {
+    dialog.show();
+  }
+
+  const shadowHost = document.createElement("div");
+  const shadowRoot = shadowHost.attachShadow({mode: "open"});
+  shadowRoot.appendChild(input);
+  document.body.appendChild(shadowHost);
+
+  assert_not_equals(input.nextElementSibling, dialog, "Element should have moved");
+
+  dialog.close();
+  assert_equals(shadowRoot.activeElement, input, "Focus should be restored to previously focused input");
+  assert_equals(document.activeElement, shadowHost, "document.activeElement should be previously focused input's shadow DOM host");
+
+  // Clean up
+  document.body.insertBefore(input, dialog);
+  shadowHost.remove();
+}
+
+// Test focus is moved to <body> if the previously focused
+// element can't be focused
+function test_move_to_body_if_fails(showModal) {
+  const input = document.querySelector("input");
+  input.focus();
+  const dialog = document.querySelector("dialog");
+  if (showModal) {
+    dialog.showModal();
+  } else {
+    dialog.show();
+  }
+  dialog.close();
+  input.remove();
+  assert_equals(document.activeElement, document.body);
+
+  // Clean up
+  document.body.insertBefore(input, dialog);
+}
+
+// Test focus is moved to shadow host if the previously
+// focused element is a shadow node.
+function test_move_to_shadow_host(showModal) {
+  const shadowHost = document.createElement("div");
+
+  const shadowRoot = shadowHost.attachShadow({mode: "open"});
+  shadowRoot.appendChild(document.createElement("input"));
+
+  document.body.appendChild(shadowHost);
+  const inputElement = shadowRoot.querySelector("input");
+  inputElement.focus();
+
+  assert_equals(document.activeElement, shadowHost);
+  assert_equals(shadowRoot.activeElement, inputElement);
+
+  const dialog = document.querySelector("dialog");
+  if (showModal) {
+    dialog.showModal();
+  } else {
+    dialog.show();
+  }
+  dialog.close();
+
+  assert_equals(document.activeElement, shadowHost);
+  assert_equals(shadowRoot.activeElement, inputElement);
+
+  // Clean up
+  shadowHost.remove();
+}
+
+// Test moving the focus doesn't scroll the viewport
+async function test_move_focus_dont_scroll_viewport(showModal) {
+  const outViewPortButton = document.createElement("button");
+  outViewPortButton.style.top = (window.innerHeight + 10).toString() + "px";
+  outViewPortButton.style.position = "absolute";
+  document.body.appendChild(outViewPortButton);
+
+  await new Promise(resolve => {
+    document.addEventListener("scroll", () => step_timeout(resolve, 0));
+    outViewPortButton.focus();
+  });
+
+  // Since the outViewPortButton is focused, so the viewport should be
+  // scrolled to it
+  assert_true(document.documentElement.scrollTop > 0 );
+
+  const dialog = document.querySelector("dialog");
+  if (showModal) {
+    dialog.showModal();
+  } else {
+    dialog.show();
+  }
+
+  window.scrollTo(0, 0);
+  assert_equals(document.documentElement.scrollTop, 0);
+
+  dialog.close();
+  assert_equals(document.documentElement.scrollTop, 0);
+
+  assert_equals(document.activeElement, outViewPortButton);
+}
+
+test(() => {
+  test_move_to_previously_focused(true);
+  test_move_to_previously_focused(false);
+}, "Focus should be moved to the previously focused element (Simple dialog usage)");
+
+promise_test(async () => {
+  await test_move_to_previously_focused_with_complex_dialog_usage(true);
+  await test_move_to_previously_focused_with_complex_dialog_usage(false);
+}, "Focus should be moved to the previously focused element (Complex dialog usage)");
+
+test(() => {
+  test_element_move_in_between_show_close(true);
+  test_element_move_in_between_show_close(false);
+}, "Focus should be moved to the previously focused element even if it has moved in between show/close");
+
+test(() => {
+  test_element_move_to_shadow_root_in_between_show_close(true);
+  test_element_move_to_shadow_root_in_between_show_close(false);
+}, "Focus should be moved to the previously focused element even if it has moved to shadow DOM root in between show/close");
+
+test(() => {
+  test_move_to_body_if_fails(true);
+  test_move_to_body_if_fails(false);
+}, "Focus should be moved to the body if the previously focused element is removed");
+
+test(() => {
+  test_move_to_shadow_host(true);
+  test_move_to_shadow_host(false);
+}, "Focus should be moved to the shadow DOM host if the previouly focused element is a shadow DOM node");
+
+promise_test(async () => {
+  await test_move_focus_dont_scroll_viewport(true);
+  await test_move_focus_dont_scroll_viewport(false);
+}, "Focus should not scroll if the previously focused element is outside the viewport");
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/green-dialog-and-backdrop.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/green-dialog-and-backdrop.html
new file mode 100644
index 0000000000..cd23c32a06
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/green-dialog-and-backdrop.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="resources/dialog.css">
+<style>
+body { background: red; }
+
+.backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.backdrop,
+.pseudodialog {
+    background: green;
+}
+</style>
+<body>
+<div class="backdrop"></div>
+<div class="pseudodialog">PASS if no red shows</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-does-not-match-disabled-selector.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-does-not-match-disabled-selector.html
new file mode 100644
index 0000000000..b3b0c0a929
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-does-not-match-disabled-selector.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+button {
+    color: green;
+}
+
+button:disabled {
+    color: red;
+}
+
+.trigger-style-recalc {
+    /* No change, we just need a new style recalculation. */
+    font-weight:bold;
+}
+</style>
+</head>
+<body style="color: green">
+<button>The test passes if this is in green.</button>
+<dialog></dialog>
+<script>
+"use strict";
+test(function() {
+    document.querySelector('dialog').showModal();
+    var button = document.querySelector('button');
+    button.classList.add('trigger-style-recalc');
+    var color = document.defaultView.getComputedStyle(button).getPropertyValue('color');
+    assert_equals(color, 'rgb(0, 128, 0)');
+}, "Tests inert elements do not match the :disabled selector.");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-focus-in-frames.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-focus-in-frames.html
new file mode 100644
index 0000000000..2ccc133285
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-focus-in-frames.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=242848">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<iframe height=400 width=600 id="main-iframe">
+  <frameset rows="*" cols="50,50">
+    <frame src="resources/inert-focus-in-frames-frame1.html">
+    <frame src="resources/inert-focus-in-frames-frame2.html">
+  </frameset>
+</iframe>
+
+<script>
+let framesLoadedResolver = null;
+const framesLoadedPromise = new Promise(resolve => framesLoadedResolver = resolve);
+framesLoaded = 0;
+numFrames = 4;
+
+function frameLoaded() {
+  framesLoaded++;
+  if (framesLoaded == numFrames)
+    framesLoadedResolver();
+}
+var mainIframe = document.getElementById('main-iframe');
+mainIframe.contentDocument.write(mainIframe.textContent);
+mainIframe.contentDocument.close();
+mainIframe.contentWindow.frames[1].window.onload = frameLoaded;
+window.onload = frameLoaded;
+
+promise_test(async () => {
+  await framesLoadedPromise;
+
+  function testFocus(element, expectFocus) {
+    let focusedElement = null;
+    element.addEventListener('focus', function() { focusedElement = element; }, false);
+    element.focus();
+    if (expectFocus) {
+      assert_equals(focusedElement, element, element.id);
+    } else {
+      assert_not_equals(focusedElement, element, element.id);
+    }
+  }
+
+  // Opening a modal dialog in frame1. It blocks other nodes in its document.
+  const frame1 = mainIframe.contentWindow.frames[0].document;
+  frame1.querySelector('dialog').showModal();
+
+  testFocus(frame1.querySelector('.target'), false);
+  const iframe = frame1.querySelector('#iframe1').contentDocument;
+  testFocus(iframe.querySelector('.target'), true);
+
+  // Even a modal dialog in the iframe is blocked by the modal dialog in the parent frame1.
+  iframe.querySelector('dialog').showModal();
+  testFocus(iframe.querySelector('button'), false);
+
+  // An iframe within a modal dialog can still be focused.
+  var dialogIframe = frame1.querySelector('#iframe-in-dialog').contentDocument;
+  testFocus(dialogIframe.querySelector('.target'), true);
+
+  // A modal dialog does not block nodes in a sibling frame.
+  var frame2 = mainIframe.contentWindow.frames[1].document;
+  testFocus(frame2.querySelector('.target'), true);
+
+  // Closing the dialog in frame1. The modal dialog in the iframe does not block nodes in its parent.
+  frame1.querySelector('dialog').close();
+  testFocus(iframe.querySelector('.target'), false);
+  testFocus(frame1.querySelector('.target'), true);
+
+}, 'Tests inert node focusing across frames and iframes.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html
new file mode 100644
index 0000000000..5ee4113985
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=241699">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<p>
+To test manually, click on all the "Click me"s.
+The test fails if you see red.
+</p>
+
+<style>
+dialog {
+  width: 50px;
+}
+</style>
+
+<a id="a" href="javascript:void(0)">Click me</a>
+<button id="button">Click me</button>
+<div id="div" style="background-color: blue; width: 50px; height: 50px">Click meeee</div>
+<span id="span">Click me</span>
+<div id="dialog-parent" style="width: 50px; height: 50px">
+  <span id="dialog-sibling">Click meeee</span>
+  <dialog></dialog>
+</div>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    let absoluteTop = 0;
+    let absoluteLeft = 0;
+    for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
+      absoluteLeft += parentNode.offsetLeft;
+      absoluteTop += parentNode.offsetTop;
+    }
+
+    const x = Math.round(absoluteLeft + element.offsetWidth / 2);
+    const y = Math.round(absoluteTop + element.offsetHeight / 2);
+    const actions = new test_driver.Actions()
+      .pointerMove(x, y)
+      .pointerDown()
+      .pointerUp()
+      .pointerMove(0, 0);
+    await actions.send();
+  }
+
+  function eventFiredOnInertElement(e) {
+    e.target.style.background = 'red';
+    inertElementFiredOn = true;
+  }
+
+  inertElements = ['a', 'button', 'div', 'span']
+  inertElements.forEach(function(id) {
+    element = document.getElementById(id);
+    element.addEventListener('click', eventFiredOnInertElement);
+    element.addEventListener('mousemove', eventFiredOnInertElement);
+  });
+
+  document.addEventListener('click', function(e) {
+    document.firedOn = true;
+  });
+
+  document.getElementById('dialog-parent').addEventListener('click', function(e) {
+    e.target.firedOn = true;
+  });
+
+  document.querySelector('dialog').showModal();
+  for (const id of inertElements) {
+    expectedTarget = document;
+    if (id == 'dialog-sibling')
+      expectedTarget = document.getElementById('dialog-parent')
+    element = document.getElementById(id);
+    inertElementFiredOn = false;
+    expectedTarget.firedOn = false;
+    await clickOn(element);
+    assert_false(inertElementFiredOn, 'clicking on ' + id);
+    assert_true(expectedTarget.firedOn, 'clicking on ' + id);
+  }
+}, 'Tests that inert inlines do not receive mouse events.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
new file mode 100644
index 0000000000..05f4069d78
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=242848">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<label for="submit">Label for Submit</label>
+<dialog>
+  <input id="text" type="text">
+  <input id="submit" type="submit">
+</dialog>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    let absoluteTop = 0;
+    let absoluteLeft = 0;
+    for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
+      absoluteLeft += parentNode.offsetLeft;
+      absoluteTop += parentNode.offsetTop;
+    }
+
+    const x = Math.round(absoluteLeft + element.offsetWidth / 2);
+    const y = Math.round(absoluteTop + element.offsetHeight / 2);
+    const actions = new test_driver.Actions()
+      .pointerMove(x, y)
+      .pointerDown()
+      .pointerUp()
+      .pointerMove(0, 0);
+    await actions.send();
+  }
+
+  document.querySelector('dialog').showModal();
+  document.querySelector('#text').focus();
+
+  label = document.querySelector('label');
+  label.focus();
+  assert_equals(document.activeElement, document.querySelector('#submit'),
+    'label.focus() should send focus to the target.');
+
+  await clickOn(label);
+  assert_equals(document.activeElement, document.body,
+    'Clicking the label should be the same as clicking the document body.');
+}, 'Tests focusing of an inert label for a non-inert target.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-not-highlighted-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-not-highlighted-ref.html
new file mode 100644
index 0000000000..1b757ecf62
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-not-highlighted-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body p, span {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+::backdrop {
+    display: none;
+}
+</style>
+</head>
+<body>
+<p>Test that inert nodes are not painted as being selected. The test passes if
+none of the text outside the dialog is highlighted when selected.</p>
+
+<p>Although not shown as selected, the inert nodes are in window.getSelection()
+and copied to the clipboard, which is the same behavior as user-select:
+none (crbug.com/147490).</p>
+
+<br><span>This text shouldn't be highlighted as selected.</span>
+
+<dialog>
+    <div id="selectable">I'm selectable.</div>
+</dialog>
+
+<script>
+dialog = document.querySelector('dialog');
+dialog.showModal();
+selectable = document.querySelector('#selectable');
+window.getSelection().selectAllChildren(selectable);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-not-highlighted.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-not-highlighted.html
new file mode 100644
index 0000000000..f6db38ed72
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-not-highlighted.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="inert-node-is-not-highlighted-ref.html">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert-subtrees">
+<style>
+::backdrop {
+    display: none;
+}
+</style>
+</head>
+<body>
+<p>Test that inert nodes are not painted as being selected. The test passes if
+none of the text outside the dialog is highlighted when selected.</p>
+
+<p>Although not shown as selected, the inert nodes are in window.getSelection()
+and copied to the clipboard, which is the same behavior as user-select:
+none (crbug.com/147490).</p>
+
+<br>  <!-- Needed to the trigger the bug. -->
+This text shouldn't be highlighted as selected.
+
+<dialog>
+    <div id="selectable">I'm selectable.</div>
+</dialog>
+
+<script>
+dialog = document.querySelector('dialog');
+dialog.showModal();
+document.execCommand('SelectAll');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-uneditable.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-uneditable.html
new file mode 100644
index 0000000000..9141a383b0
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-uneditable.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=252071">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<span id="not-editable" contenteditable>I'm not editable while the dialog is showing.</span>
+<dialog>
+  <span id="editable" contenteditable>I'm editable.</span>
+</dialog>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    let absoluteTop = 0;
+    let absoluteLeft = 0;
+    for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
+      absoluteLeft += parentNode.offsetLeft;
+      absoluteTop += parentNode.offsetTop;
+    }
+
+    const x = Math.round(absoluteLeft + element.offsetWidth / 2);
+    const y = Math.round(absoluteTop + element.offsetHeight / 2);
+    const actions = new test_driver.Actions()
+      .pointerMove(x, y)
+      .pointerDown()
+      .pointerUp()
+      .pointerMove(0, 0);
+    await actions.send();
+  }
+
+  dialog = document.querySelector('dialog');
+  dialog.showModal();
+  notEditable = document.querySelector('#not-editable');
+  editable = document.querySelector('#editable');
+
+  await clickOn(notEditable);
+  oldValue = notEditable.textContent;
+  await (new test_driver.Actions().keyDown('a').keyUp('a').send());
+  assert_equals(notEditable.textContent, oldValue);
+
+  await clickOn(editable);
+  oldValue = editable.textContent;
+  await (new test_driver.Actions().keyDown('a').keyUp('a').send());
+  assert_not_equals(editable.textContent, oldValue);
+
+  notEditable.remove();
+  editable.remove();
+}, 'Test that inert nodes cannot be edited. The test passes if the only text you can edit is in the dialog.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
new file mode 100644
index 0000000000..56f31f3592
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html id="html" tabindex="1">
+<head>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#blocked-by-a-modal-dialog">
+<meta name="assert" content="Checks that, when opening modal dialogs, inert nodes are not focusable.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body id="body" tabindex="1">
+<dialog id="top-dialog" tabindex="1" style="width: 100px; top: 30px"><button id="top-dialog-button">I get focus</button></dialog>
+<dialog id="bottom-dialog" tabindex="-1" style="width: 100px; bottom: 30px"><button id="bottom-dialog-button">I don't get focus.</button></dialog>
+<div id="container">
+    <input id="text" type="text">
+    <input id="datetime" type="datetime">
+    <input id="color" type="color">
+    <select id="select">
+        <optgroup id="optgroup">
+            <option id="option">Option</option>
+        </optgroup>
+    </select>
+    <div id="contenteditable-div" contenteditable>I'm editable</div>
+    <span id="tabindex-span" tabindex="0">I'm tabindexed.</div>
+    <embed id="embed" type="application/x-blink-test-plugin" width=100 height=100></embed>
+    <a id="anchor" href="">Link</a>
+</div>
+<script>
+"use strict";
+// The test passses if only the topmost dialog and its button are focusable.
+
+function testFocus(element, expectFocus) {
+    test(function() {
+        var focusedElement = null;
+        element.addEventListener('focus', function() { focusedElement = element; }, false);
+        element.focus();
+        var theElement = element;
+        if (expectFocus) {
+            assert_equals(focusedElement, theElement);
+        } else {
+            assert_not_equals(focusedElement, theElement);
+        }
+    }, `#${CSS.escape(element.id)} is ${expectFocus ? "" : "not "} focusable`);
+}
+
+function testTree(element, expectFocus) {
+    if (element.nodeType == Node.ELEMENT_NODE)
+        testFocus(element, expectFocus);
+    var childNodes = element.childNodes;
+    for (var i = 0; i < childNodes.length; i++)
+        testTree(childNodes[i], expectFocus);
+}
+
+var bottomDialog = document.getElementById('bottom-dialog');
+var topDialog = document.getElementById('top-dialog');
+setup(function() {
+    bottomDialog.showModal();
+    topDialog.showModal();
+    add_completion_callback(function() {
+        topDialog.close();
+        bottomDialog.close();
+    });
+});
+
+testFocus(document.documentElement, false);
+testFocus(document.body, false);
+testTree(topDialog, true);
+testTree(bottomDialog, false);
+testTree(document.getElementById('container'), false);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unselectable.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unselectable.html
new file mode 100644
index 0000000000..2889e1e90a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unselectable.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=252071">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+Here is a text node you can't select while the dialog is open.
+<dialog>I'm selectable.</dialog>
+
+<script>
+test(() => {
+  const dialog = document.querySelector('dialog');
+  dialog.showModal();
+  document.execCommand('SelectAll');
+  assert_equals(window.getSelection().toString(), "I'm selectable.");
+}, 'Test that inert nodes cannot be selected. The test passes if the only text you can select is inside the dialog.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-svg-hittest.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-svg-hittest.html
new file mode 100644
index 0000000000..579aca7775
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-svg-hittest.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Hit-testing with SVG made inert by modal dialog</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert">
+<meta assert="assert" content="SVG made inert by modal dialog should be unreachable with hit-testing">
+<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="/resources/testdriver-actions.js"></script>
+
+<div id="wrapper">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+        <rect width="500" height="500" id="target" fill="red">
+    </svg>
+</div>
+
+<dialog id="dialog">Content behind the open modal dialog should not be clickable</dialog>
+
+<style>
+dialog::backdrop {
+    display: none;
+}
+</style>
+
+<script>
+const dialog = document.getElementById("dialog");
+const wrapper = document.getElementById("wrapper");
+const target = document.getElementById("target");
+
+promise_test(async function() {
+    dialog.showModal();
+    this.add_cleanup(() => dialog.close());
+
+    let reachedTarget = false;
+    target.addEventListener("mousedown", () => {
+        reachedTarget = true;
+    }, { once: true });
+
+    let wrapperRect = wrapper.getBoundingClientRect();
+    await new test_driver.Actions()
+        .pointerMove(wrapperRect.x + 1, wrapperRect.y + 1, { origin: "viewport" })
+        .pointerDown()
+        .send();
+
+    assert_false(target.matches(":active"), "target is not active");
+    assert_false(target.matches(":hover"), "target is not hovered");
+    assert_false(reachedTarget, "target didn't get event");
+}, "Hit-testing doesn't reach contents of an inert SVG");
+
+promise_test(async function() {
+    assert_false(dialog.open, "dialog is closed");
+
+    let reachedTarget = false;
+    target.addEventListener("mousedown", () => {
+        reachedTarget = true;
+    }, { once: true });
+
+    await new test_driver.Actions()
+        .pointerMove(0, 0, { origin: wrapper })
+        .pointerDown()
+        .send();
+
+    assert_true(target.matches(":active"), "target is active");
+    assert_true(reachedTarget, "target got event");
+}, "Hit-testing can reach contents of a no longer inert SVG");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inertness-with-modal-dialogs-and-iframes.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inertness-with-modal-dialogs-and-iframes.html
new file mode 100644
index 0000000000..1a509f7f36
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inertness-with-modal-dialogs-and-iframes.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Inertness with modal dialogs and iframes</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert">
+<meta name="assert" content="Checks that a modal dialog marks outer nodes as inert,
+  but only in its document, not in the parent browsing context,
+  nor in nested browsing contexts.">
+<div id="log"></div>
+<div id="wrapper">
+  (main document: outer text)
+  <iframe id="outerIframe" srcdoc="
+    <div id='wrapper'>
+      (outer iframe: outer text)
+      <dialog id='dialog' style='display: block'>
+        (outer iframe: dialog)
+      </dialog>
+    </div>
+  "></iframe>
+  <dialog id="dialog" style="display: block">
+    (main document: dialog)
+    <iframe id="innerIframe" srcdoc="
+      <div id='wrapper'>
+        (inner iframe: outer text)
+        <dialog id='dialog' style='display: block'>
+          (inner iframe: dialog)
+        </dialog>
+      </div>
+    "></iframe>
+  </dialog>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const innerIframeWindow = innerIframe.contentWindow;
+const outerIframeWindow = outerIframe.contentWindow;
+promise_setup(async () => {
+  for (let global of [innerIframeWindow, outerIframeWindow]) {
+    if (global.location.href === "about:blank" ||
+        global.document.readyState !== "complete") {
+      await new Promise(resolve => {
+        global.frameElement.addEventListener("load", resolve, {once: true});
+      });
+    }
+  }
+});
+add_completion_callback(() => {
+  for (let global of [window, innerIframeWindow, outerIframeWindow]) {
+    global.getSelection().removeAllRanges();
+  }
+});
+
+function checkSelection(global, expectedText) {
+  const selection = global.getSelection();
+  selection.selectAllChildren(global.wrapper);
+
+  // Remove whitespace between parentheses since it varies among browsers,
+  // but that's not relevant to this test.
+  const actualText = selection.toString().replace(/\)\s*\(/g, ")(").trim();
+  assert_equals(actualText, expectedText);
+}
+
+function showModals(test, globals) {
+  for (let global of globals) {
+    global.dialog.showModal();
+    test.add_cleanup(() => { global.dialog.close(); });
+  }
+}
+
+promise_test(async function() {
+  checkSelection(window, "(main document: outer text)(main document: dialog)");
+  checkSelection(innerIframeWindow, "(inner iframe: outer text)(inner iframe: dialog)");
+  checkSelection(outerIframeWindow, "(outer iframe: outer text)(outer iframe: dialog)");
+}, "Initially, no node is inert");
+
+promise_test(async function() {
+  showModals(this, [outerIframeWindow]);
+
+  checkSelection(window, "(main document: outer text)(main document: dialog)");
+  checkSelection(innerIframeWindow, "(inner iframe: outer text)(inner iframe: dialog)");
+  checkSelection(outerIframeWindow, "(outer iframe: dialog)");
+}, "Modal dialog in the outer iframe marks outer nodes in that iframe as inert.");
+
+promise_test(async function() {
+  showModals(this, [innerIframeWindow]);
+
+  checkSelection(window, "(main document: outer text)(main document: dialog)");
+  checkSelection(innerIframeWindow, "(inner iframe: dialog)");
+  checkSelection(outerIframeWindow, "(outer iframe: outer text)(outer iframe: dialog)");
+}, "Modal dialog in the inner iframe marks outer nodes in that iframe as inert.");
+
+promise_test(async function() {
+  showModals(this, [innerIframeWindow, outerIframeWindow]);
+
+  checkSelection(window, "(main document: outer text)(main document: dialog)");
+  checkSelection(innerIframeWindow, "(inner iframe: dialog)");
+  checkSelection(outerIframeWindow, "(outer iframe: dialog)");
+}, "Modal dialogs in both iframes mark outer nodes in these iframes as inert.");
+
+promise_test(async function() {
+  showModals(this, [window]);
+
+  checkSelection(window, "(main document: dialog)");
+  checkSelection(innerIframeWindow, "(inner iframe: outer text)(inner iframe: dialog)");
+  checkSelection(outerIframeWindow, "(outer iframe: outer text)(outer iframe: dialog)");
+}, "Modal dialog in the main document marks outer nodes as inert. Contents of the outer iframe aren't marked as inert.");
+
+promise_test(async function() {
+  showModals(this, [innerIframeWindow, window]);
+
+  checkSelection(window, "(main document: dialog)");
+  checkSelection(innerIframeWindow, "(inner iframe: dialog)");
+  checkSelection(outerIframeWindow, "(outer iframe: outer text)(outer iframe: dialog)");
+}, "Modal dialogs in the main document and inner iframe mark outer nodes as inert. Contents of the outer iframe aren't marked as inert.");
+
+promise_test(async function() {
+  showModals(this, [outerIframeWindow, window]);
+
+  checkSelection(window, "(main document: dialog)");
+  checkSelection(innerIframeWindow, "(inner iframe: outer text)(inner iframe: dialog)");
+  checkSelection(outerIframeWindow, "(outer iframe: dialog)");
+}, "Modal dialogs in the main document and outer iframe mark outer nodes as inert. Contents of the outer iframe aren't marked as inert.");
+
+promise_test(async function() {
+  showModals(this, [innerIframeWindow, outerIframeWindow, window]);
+
+  checkSelection(window, "(main document: dialog)");
+  checkSelection(innerIframeWindow, "(inner iframe: dialog)");
+  checkSelection(outerIframeWindow, "(outer iframe: dialog)");
+}, "Modal dialogs in the main document and both iframes mark outer nodes as inert. Contents of the outer iframe aren't marked as inert.");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-ancestor-is-inert.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-ancestor-is-inert.html
new file mode 100644
index 0000000000..c6bcb5d4ca
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-ancestor-is-inert.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=329407">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+#ancestor {
+  position: absolute;
+  height: 50px;
+  width: 50px;
+  top: 200px;
+  left: 100px;
+  border: 1px solid;
+}
+
+dialog {
+  height: 50px;
+  width: 50px;
+  top: 200px;
+  left: 200px;
+  margin: 0;
+}
+
+dialog::backdrop {
+  display: none;
+}
+</style>
+
+<div id="ancestor">
+  <dialog></dialog>
+</div>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    const rect = element.getBoundingClientRect();
+    const actions = new test_driver.Actions()
+      .pointerMove(rect.left + rect.width / 2, rect.top + rect.height / 2)
+      .pointerDown()
+      .pointerUp();
+    await actions.send();
+  }
+
+  const div = document.querySelector('#ancestor');
+  const dialog = document.querySelector('dialog');
+  dialog.showModal();
+
+  const handledEvent = {};
+  document.addEventListener('click', function(event) {
+    handledEvent['document'] = true;
+  });
+
+  document.body.addEventListener('click', function(event) {
+    handledEvent['body'] = true;
+    // body should get a event only via bubbling.
+    if (event.target != dialog) {
+      assert_unreached('body was targeted for an click event');
+      div.style.backgroundColor = 'red';
+    }
+  });
+
+  div.addEventListener('click', function(event) {
+    handledEvent['div'] = true;
+    // div should get a event only via bubbling.
+    if (event.target != dialog) {
+      assert_unreached('div was targeted for an click event');
+      div.style.backgroundColor = 'red';
+    }
+  });
+
+  dialog.addEventListener('click', function(event) {
+    handledEvent['dialog'] = true;
+    dialog.style.backgroundColor = 'green';
+    if (event.target != dialog) {
+      assert_unreached('dialog was not targeted for a click event');
+      dialog.style.backgroundColor = 'red';
+    }
+  });
+
+  const nodes = [ 'document', 'body', 'div', 'dialog' ];
+  nodes.map(function(node) { handledEvent[node] = false; });
+  await clickOn(div);
+  assert_true(handledEvent.document, 'Clicking on ancestor.');
+  assert_false(handledEvent.body, 'Clicking on ancestor.');
+  assert_false(handledEvent.dialog, 'Clicking on ancestor.');
+  assert_false(handledEvent.div, 'Clicking on ancestor.');
+  handledEvent.document = false;
+
+  await clickOn(dialog);
+  assert_true(handledEvent.document, 'Clicking on dialog.');
+  assert_true(handledEvent.body, 'Clicking on dialog.');
+  assert_true(handledEvent.dialog, 'Clicking on dialog.');
+  assert_true(handledEvent.div, 'Clicking on dialog.');
+}, 'Test that ancestors of modal dialog are inert.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop-ref.html
new file mode 100644
index 0000000000..d703b7f28e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop-ref.html
@@ -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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html
new file mode 100644
index 0000000000..a18af0d30e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="match" href="modal-dialog-backdrop-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-blocks-mouse-events.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-blocks-mouse-events.html
new file mode 100644
index 0000000000..f6c0ec0ccb
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-blocks-mouse-events.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=110952">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<p>
+To test manually, move the mouse to the blue box, click, and then move the
+mouse outside. Then repeat for the red box. The test succeeds if both boxes
+turn green
+</p>
+
+<style>
+#inert-div {
+  height: 100px;
+  width: 100px;
+  background: blue;
+}
+
+dialog {
+  width: 100px;
+}
+
+dialog::backdrop {
+  display: none;
+}
+
+#dialog-div {
+  height: 100px;
+  width: 100px;
+  background: red;
+}
+</style>
+
+<div id="inert-div"></div>
+<dialog id="dialog">
+  <div id="dialog-div"></div>
+</dialog>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    const rect = element.getBoundingClientRect();
+    const actions = new test_driver.Actions()
+      .pointerMove(
+        Math.floor(rect.left + rect.width / 2),
+        Math.floor(rect.top + rect.height / 2))
+      .pointerDown()
+      .pointerUp()
+      .pointerMove(0, 0);
+    await actions.send();
+  }
+
+  dialog.showModal();
+
+  inertDivHandledEvent = false;
+  inertDiv = document.getElementById('inert-div');
+  eventFiredOnInertNode = function(event) {
+    inertDivHandledEvent = true;
+    inertDiv.style.backgroundColor = 'red';
+  };
+
+  events =  ['mousedown', 'mouseup', 'click', 'mousemove', 'mouseover', 'mouseout'];
+  dialogDiv = document.getElementById('dialog-div');
+  handledEvents = {};
+  handledEvents.dialogDiv = {};
+  eventFiredOnDialog = function(event) {
+    handledEvents.dialogDiv[event.type] = true;
+    if (Object.keys(handledEvents.dialogDiv).length == events.length)
+      dialogDiv.style.backgroundColor = 'green';
+  };
+
+  handledEvents.document = {};
+  expectedEventCountForDocument = events.length - 1; // document won't get 'mouseout'
+  eventFiredOnDocument = function(event) {
+    handledEvents.document[event.type] = true;
+    if (Object.keys(handledEvents.document).length == document.expectedEventCount && !inertDivHandledEvent) {
+      inertDiv.style.backgroundColor = 'green';
+    }
+  };
+
+  for (let i = 0; i < events.length; ++i) {
+    inertDiv.addEventListener(events[i], eventFiredOnInertNode);
+    dialogDiv.addEventListener(events[i], eventFiredOnDialog);
+    document.addEventListener(events[i], eventFiredOnDocument);
+  }
+
+  await clickOn(inertDiv);
+  assert_false(inertDivHandledEvent, 'Clicking on inert box');
+  assert_equals(Object.keys(handledEvents.document).length, expectedEventCountForDocument, 'Clicking on inert box');
+
+  await clickOn(dialogDiv);
+  assert_false(inertDivHandledEvent, 'Clicking on non-inert box');
+  assert_equals(Object.keys(handledEvents.dialogDiv).length, events.length, 'Clicking on non-inert box');
+}, 'Ensure that mouse events are not dispatched to an inert node.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-display-contents-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-display-contents-ref.html
new file mode 100644
index 0000000000..7ac66f5095
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-display-contents-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<title>Reference: Test that display: contents; on modal dialog & ::backdrop acts like display: block</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<p>Test passes if there is a green dialog</p>
+<p>Dialog is display:block</p>
+<p>Dialog::backdrop is display:block</p>
+<dialog>Dialog Contents</dialog>
+<style>
+dialog {
+    background-color: green;
+}
+</style>
+<script>
+document.querySelector("dialog").showModal();
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-display-contents.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-display-contents.html
new file mode 100644
index 0000000000..032033de01
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-display-contents.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<title>Test that display: contents; on modal dialog & ::backdrop acts like display: block</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel="match" href="modal-dialog-display-contents-ref.html">
+<p>Test passes if there is a green dialog</p>
+<p>Dialog is display:<span id="computed-value"></span></p>
+<p>Dialog::backdrop is display:<span id="computed-value-backdrop"></span></p>
+<dialog>Dialog Contents</dialog>
+<style>
+dialog {
+    display: contents;
+    background-color: green;
+}
+dialog::backdrop {
+    display: contents;
+}
+</style>
+<script>
+dialog = document.querySelector("dialog");
+dialog.showModal();
+document.getElementById("computed-value").textContent = getComputedStyle(dialog).display;
+document.getElementById("computed-value-backdrop").textContent = getComputedStyle(dialog, "::backdrop").display;
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content-ref.html
new file mode 100644
index 0000000000..10c9897c63
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content-ref.html
@@ -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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html
new file mode 100644
index 0000000000..86f43e52c2
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="match" href="modal-dialog-generated-content-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-iframe-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-iframe-ref.html
new file mode 100644
index 0000000000..b6c52b7d7d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-iframe-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<iframe></iframe>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-iframe.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-iframe.html
new file mode 100644
index 0000000000..f6440583fb
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-object-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-object-ref.html
new file mode 100644
index 0000000000..38e15c1d79
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-object.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-object.html
new file mode 100644
index 0000000000..728748a7ee
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-replaced-renderer-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-replaced-renderer-ref.html
new file mode 100644
index 0000000000..c837503caf
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-replaced-renderer-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+    background: green;
+    border-color: green;
+}
+div {
+    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPAQMAAAABGAcJAAAAA1BMVEUAgACc+aWRAAAADElEQVR42mNgIAEAAAAtAAH7KhMqAAAAAElFTkSuQmCC);
+}
+</style>
+</head>
+<body>
+<p>The test passes if you see a green square near the top of the viewport.
+<div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-replaced-renderer.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-replaced-renderer.html
new file mode 100644
index 0000000000..75727b42f0
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-replaced-renderer.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Modal dialog inside replaced renderer should not generate box</title>
+<link rel="match" href="modal-dialog-in-replaced-renderer-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+dialog {
+    background: green;
+    border-color: green;
+}
+div {
+    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPAQMAAAABGAcJAAAAA1BMVEUAgACc+aWRAAAADElEQVR42mNgIAEAAAAtAAH7KhMqAAAAAElFTkSuQmCC);
+}
+</style>
+</head>
+<body>
+<p>The test passes if you see a green square near the top of the viewport.
+<div>
+<dialog id="dialog"></dialog>
+</div>
+<script>
+document.getElementById('dialog').showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-table-column-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-table-column-ref.html
new file mode 100644
index 0000000000..0310d1ba24
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-table-column-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+    background: green;
+    border-color: green;
+}
+</style>
+</head>
+<body>
+<p>The test passes if you see no green rectangle.
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-table-column.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-table-column.html
new file mode 100644
index 0000000000..3d72826b96
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-table-column.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Modal dialog inside display: table-column should not generate box</title>
+<link rel="match" href="modal-dialog-in-table-column-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+dialog {
+    background: green;
+    border-color: green;
+}
+div {
+    display: table-column;
+}
+</style>
+</head>
+<body>
+<p>The test passes if you see no green rectangle.
+<div>
+<dialog id="dialog"></dialog>
+</div>
+<script>
+document.getElementById('dialog').showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-visibility-hidden.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-visibility-hidden.html
new file mode 100644
index 0000000000..abba08cfde
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-in-visibility-hidden.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<title>Test that modal dialogs have visibility: visible set from the UA sheet</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:is-modal">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="visibility: hidden">
+    <dialog>This is a dialog</dialog>
+</div>
+
+<script>
+let dialog = document.querySelector("dialog");
+
+test(t => {
+    dialog.show();
+    t.add_cleanup(() => dialog.close());
+    assert_equals(getComputedStyle(dialog).visibility, "hidden");
+}, "Non-modal dialog should let parent visibility inherit");
+
+test(t => {
+    dialog.showModal();
+    t.add_cleanup(() => dialog.close());
+    assert_equals(getComputedStyle(dialog).visibility, "visible");
+}, "Modal dialog should have visibility: visible by default in UA sheet");
+
+test(t => {
+    dialog.style.visibility = "hidden";
+    dialog.showModal();
+    t.add_cleanup(() => {
+        dialog.style.removeProperty("visibility");
+        dialog.close();
+    });
+    assert_equals(getComputedStyle(dialog).visibility, "hidden");
+}, "Modal dialog visibility should be overridable");
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-scroll-height.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-scroll-height.html
new file mode 100644
index 0000000000..638217f021
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-scroll-height.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:skobes@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=403136">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body {
+  margin: 0;
+}
+.spacer {
+  height: 500px;
+}
+dialog {
+  border: 0;
+  margin: 0;
+  padding: 1px;
+}
+</style>
+<div class="spacer"></div>
+<dialog>
+  <div class="spacer"></div>
+</dialog>
+
+<script>
+test(() => {
+  document.querySelector('dialog').showModal();
+  assert_equals(document.scrollingElement.scrollHeight, window.innerHeight);
+}, 'dialogs should be centered before computing overflow.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html
new file mode 100644
index 0000000000..0242080268
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Content selection in modal dialog</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection">
+<meta name="assert" content="Checks that text can be selected in a modal dialog, except with 'user-select: none'.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+dialog {
+  font: 10px/1 Ahem;
+  text-align: center;
+}
+</style>
+
+<dialog>123456789A</dialog>
+
+<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="/resources/testdriver-actions.js"></script>
+<script>
+const dialog = document.querySelector("dialog");
+dialog.showModal();
+
+function selectSomeText() {
+  // Clear existing selection.
+  getSelection().removeAllRanges();
+
+  // The dialog contains 10 characters. Select the 6 ones at the center.
+  return new test_driver.Actions()
+    .pointerMove(-3e1, 0, {origin: dialog})
+    .pointerDown()
+    .pointerMove(+3e1, 0, {origin: dialog})
+    .pointerUp()
+    .send();
+}
+
+function clickOnBackdrop() {
+  getSelection().removeAllRanges();
+
+  return new test_driver.Actions()
+    .pointerMove(10, 10)
+    .pointerDown()
+    .pointerUp()
+    .send();
+}
+
+promise_test(async function() {
+  await selectSomeText();
+  assert_equals(getSelection().toString(), "345678");
+}, "By default, text inside a modal dialog can be selected");
+
+promise_test(async function() {
+  await clickOnBackdrop();
+  assert_equals(getSelection().toString(), "");
+}, "Clicking on backdrop doesn't select text");
+
+promise_test(async function() {
+  dialog.style.userSelect = "none";
+
+  await selectSomeText();
+  assert_equals(getSelection().toString(), "");
+
+  dialog.style.userSelect = "";
+}, "'user-select: none' prevents text from being selected");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-sibling-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-sibling-ref.html
new file mode 100644
index 0000000000..38b628c309
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-sibling-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+dialog {
+    background: green;
+    border-color: green;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="http://webkit.org/b/103477">103477</a>: Make
+NodeRenderingContext::parentRenderer and nextRenderer top layer aware
+<p>The test passes if you see a green rectangle in the center of the viewport.
+<dialog id="dialog"></dialog>
+<script>
+document.getElementById('dialog').showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-sibling.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-sibling.html
new file mode 100644
index 0000000000..85cc61890a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-sibling.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="modal-dialog-sibling-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+dialog {
+    background: green;
+    border-color: green;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="http://webkit.org/b/103477">103477</a>: Make
+NodeRenderingContext::parentRenderer and nextRenderer top layer aware
+<p>The test passes if you see a green rectangle in the center of the viewport.
+<div style="display: none" id="div"></div>
+<dialog id="dialog"></dialog>
+<script>
+document.getElementById('dialog').showModal();
+document.getElementById('dialog').offsetTop;  // force a layout/renderer creation
+document.getElementById('div').style.display = 'block';
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/multiple-centered-dialogs.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/multiple-centered-dialogs.html
new file mode 100644
index 0000000000..70bb3810e2
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/multiple-centered-dialogs.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body {
+  height: 10000px;
+}
+
+dialog {
+  padding: 0;
+  height: 50px;
+  width: 50px;
+}
+
+#console {
+  position: fixed;
+}
+</style>
+
+<dialog id="top-dialog"></dialog>
+<dialog id="first-middle-dialog"></dialog>
+<dialog id="second-middle-dialog" style="left: 100px"></dialog>
+<dialog id="bottom-dialog"></dialog>
+
+<script>
+test(() => {
+  function documentHeight() {
+    // clientHeight is an integer, but we want the correct floating point
+    // value.  Start a binary search at clientHeight-1 and clientHeight+1.
+    let min = document.documentElement.clientHeight;
+    let max = min + 1;
+    --min;
+
+    // binary search with media queries to find the correct height
+    for (let iter = 0; iter < 10; ++iter) {
+      let test = (min + max) / 2;
+      if (window.matchMedia(`(min-height: ${test}px)`).matches)
+        min = test;
+      else
+        max = test;
+    }
+    return min;
+  }
+  function expectedTop(dialog) {
+    let height = documentHeight();
+    return (height - dialog.getBoundingClientRect().height) / 2;
+  }
+
+  function showAndTest(id) {
+    dialog = document.getElementById(id);
+    dialog.showModal();
+    assert_approx_equals(dialog.getBoundingClientRect().top, expectedTop(dialog), 0.05, id);
+  }
+
+  showAndTest('top-dialog');
+
+  window.scroll(0, 100);
+  showAndTest('first-middle-dialog');
+  showAndTest('second-middle-dialog');
+
+  window.scroll(0, 200);
+  showAndTest('bottom-dialog');
+}, 'Test that multiple dialogs are centered properly.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/non-modal-dialog-does-not-block-mouse-events.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/non-modal-dialog-does-not-block-mouse-events.html
new file mode 100644
index 0000000000..b550ba288e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/non-modal-dialog-does-not-block-mouse-events.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=110952">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<p>
+To test manually, click the red box. The test succeeds if the red box turns green.
+</p>
+
+<style>
+#div {
+    height: 100px;
+    width: 100px;
+    background: red;
+}
+</style>
+
+<div id="div"></div>
+<dialog id="dialog"></dialog>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    const actions = new test_driver.Actions()
+      .pointerMove(0, 0, {origin: element})
+      .pointerDown()
+      .pointerUp()
+      .pointerMove(0, 0);
+    await actions.send();
+  }
+
+  const dialog = document.getElementById('dialog');
+  dialog.show();
+
+  const div = document.getElementById('div');
+  div.firedOn = false;
+  div.addEventListener('click', function(event) {
+    div.firedOn = true;
+    div.style.backgroundColor = 'green';
+  });
+
+  await clickOn(div);
+
+  assert_true(div.firedOn);
+}, 'Ensure that non-modal dialogs do not block mouse events.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/non-modal-dialog-layout.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/non-modal-dialog-layout.html
new file mode 100644
index 0000000000..248bec86f6
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/non-modal-dialog-layout.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=382594">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+/* Remove body margin and dialog styles for easier positioning expected values */
+body {
+  height: 10000px;
+  margin: 0;
+}
+
+dialog {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: initial;
+  max-height: initial;
+}
+
+#absolute-div {
+  position: absolute;
+  top: 800px;
+  height: 50px;
+  width: 90%;
+}
+
+#relative-div {
+  position: relative;
+  top: 20px;
+  height: 30px;
+}
+</style>
+
+<div id="absolute-div">
+  <div id="relative-div">
+    <dialog id="dialog">It is my dialog.</dialog>
+  </div>
+</div>
+
+<script>
+test(() => {
+  const dialog = document.querySelector('#dialog');
+  const div = document.querySelector('#div-dialog');
+  const relativeContainer = document.querySelector('#relative-div');
+  const offset = 50;
+  dialog.style.top = offset + 'px';
+  dialog.style.left = offset + 'px';
+
+  dialog.style.position = 'absolute';
+  dialog.show();
+  assert_equals(
+    dialog.getBoundingClientRect().top,
+    relativeContainer.getBoundingClientRect().top + offset,
+    'Absolute position.');
+  assert_equals(
+    dialog.getBoundingClientRect().left,
+    relativeContainer.getBoundingClientRect().left + offset,
+    'Absolute position.');
+
+  dialog.style.position = 'static';
+  assert_true(dialog.open);
+  assert_equals(
+    dialog.getBoundingClientRect().top,
+    relativeContainer.getBoundingClientRect().top,
+    'Static position.');
+  assert_equals(
+    dialog.getBoundingClientRect().left,
+    relativeContainer.getBoundingClientRect().left,
+    'Static position.');
+  dialog.close();
+
+  dialog.style.position = 'relative';
+  dialog.show();
+  assert_equals(
+    dialog.getBoundingClientRect().top,
+    relativeContainer.getBoundingClientRect().top + offset,
+    'Relative position.');
+  assert_equals(
+    dialog.getBoundingClientRect().left,
+    relativeContainer.getBoundingClientRect().left + offset,
+    'Relative position.');
+  dialog.close();
+
+  dialog.style.position = 'fixed';
+  dialog.show();
+  assert_equals(
+    dialog.getBoundingClientRect().top,
+    offset,
+    'Fixed position.');
+  assert_equals(
+    dialog.getBoundingClientRect().left,
+    offset,
+    'Fixed position.');
+  dialog.close();
+}, 'Tests layout of non-modal dialogs.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/remove-dialog-should-unblock-document.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/remove-dialog-should-unblock-document.html
new file mode 100644
index 0000000000..2f2fbad1fc
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/remove-dialog-should-unblock-document.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body id="body">
+    <dialog>
+        This is a dialog
+    </dialog>
+    <input />
+<script>
+"use strict";
+function testFocus(element, expectFocus) {
+    var focusedElement = null;
+    element.addEventListener('focus', function() { focusedElement = element; }, false);
+    element.focus();
+    var theElement = element;
+    assert_equals(focusedElement === theElement, expectFocus, element.id);
+}
+
+test(function() {
+    var dialog = document.querySelector('dialog');
+    dialog.showModal();
+
+    var input = document.querySelector('input');
+    testFocus(input, false);
+
+    dialog.remove();
+    testFocus(input, true);
+}, "Test that removing dialog unblocks the document.");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/removed-element-is-removed-from-top-layer-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/removed-element-is-removed-from-top-layer-ref.html
new file mode 100644
index 0000000000..0856d6f9f1
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/removed-element-is-removed-from-top-layer-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="resources/dialog.css">
+<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="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: 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>
+
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/removed-element-is-removed-from-top-layer.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/removed-element-is-removed-from-top-layer.html
new file mode 100644
index 0000000000..b0e50e3869
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/removed-element-is-removed-from-top-layer.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="removed-element-is-removed-from-top-layer-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: 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>
+
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/common.js b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/common.js
new file mode 100644
index 0000000000..c72ed7f19c
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/common.js
@@ -0,0 +1,18 @@
+function waitUntilLoadedAndAutofocused() {
+  return new Promise(function(resolve) {
+      var loaded = false;
+      var autofocused = false;
+      window.addEventListener('load', function() {
+          loaded = true;
+          if (autofocused)
+              resolve();
+      }, false);
+      document.addEventListener('focusin', function() {
+          if (autofocused)
+              return;
+          autofocused = true;
+          if (loaded)
+              resolve();
+      }, false);
+    });
+}
+\ No newline at end of file
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/dialog.css b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/dialog.css
new file mode 100644
index 0000000000..571e7b8b6f
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/dialog.css
@@ -0,0 +1,14 @@
+.pseudodialog {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+    border: solid;
+    padding: 1em;
+    background: white;
+    color: black;
+}
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/inert-focus-in-frames-frame1.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/inert-focus-in-frames-frame1.html
new file mode 100644
index 0000000000..c5566bc092
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/inert-focus-in-frames-frame1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+window.onload = parent.parent.frameLoaded;
+</script>
+</head>
+<body>
+<dialog id="dialog">
+    <button id="dialog-button" tabindex="0">Button</button>
+    <iframe id="iframe-in-dialog" srcdoc='
+        <input id="iframe-under-dialog-input" class="target" type="date">
+    '></iframe>
+</dialog>
+<input id="frame1-input" class="target" type="text">
+<iframe id="iframe1" srcdoc='
+    <dialog id="iframe-dialog">
+        <button id="iframe-dialog-button" tabindex="0">Button</button>
+    </dialog>
+    <input id="iframe-input" class="target" type="date">
+    <script>window.onload = parent.parent.parent.frameLoaded;</script>
+'>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/inert-focus-in-frames-frame2.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/inert-focus-in-frames-frame2.html
new file mode 100644
index 0000000000..167c56945d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/inert-focus-in-frames-frame2.html
@@ -0,0 +1 @@
+<div id="frame2-div" class="target" tabindex="0">Hello</div>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/submit.jpg b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/submit.jpg
new file mode 100644
index 0000000000..8909de2430
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/resources/submit.jpg
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
new file mode 100644
index 0000000000..164b41459d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/common.js"></script>
+<script>
+promise_test(() => {
+  return waitUntilLoadedAndAutofocused().then(() => {
+        outerButton = document.getElementById('outer-button');
+        assert_equals(document.activeElement, outerButton);
+
+        // Test that focus goes to body if the dialog has no focusable elements, including itself
+        var outerDialog = document.getElementById('outer-dialog');
+        outerDialog.showModal();
+        assert_equals(document.activeElement, document.body);
+
+        // Test that an autofocus element in the dialog gets focus.
+        var dialog = document.getElementById('dialog');
+        dialog.showModal();
+        autofocusButton = document.getElementById('autofocus-button');
+        assert_equals(document.activeElement, autofocusButton);
+        dialog.close();
+
+        // ... or else first focusable element in the dialog gets focus.
+        autofocusButton.parentNode.removeChild(autofocusButton);
+        dialog.showModal();
+        firstButton = document.getElementById('first-button');
+        assert_equals(document.activeElement, firstButton);
+        dialog.close();
+
+        // ... or else the dialog itself gets focus.;
+        var buttons = dialog.querySelectorAll('button');
+        for (var i = 0; i < buttons.length; ++i)
+            buttons[i].hidden = true;
+        dialog.showModal();
+        assert_equals(document.activeElement, dialog);
+        dialog.close();
+
+        document.getElementById('outer-dialog').close();
+  });
+}, "focus when a modal dialog is opened");
+</script>
+</head>
+<body>
+<button id="outer-button" autofocus></button>
+<dialog id="outer-dialog">
+    <dialog id="dialog" tabindex=0>
+        <button disabled></button>
+        <dialog>
+            <button autofocus></button>
+        </dialog>
+        <button id="first-button"></button>
+        <div>
+            <span>
+                <button id="autofocus-button" autofocus></button>
+            </span>
+        </div>
+        <button id="final-button"></button>
+    </dialog>
+</dialog>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/showmodal-in-shadow-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/showmodal-in-shadow-crash.html
new file mode 100644
index 0000000000..c9cc150099
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/showmodal-in-shadow-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:futhark@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=850664">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=851384">
+
+<div id="dialog">
+  <div id="item"></div>
+</div>
+<script>
+const itemRoot = item.attachShadow({mode: 'open'});
+const dialogRoot = dialog.attachShadow({mode: 'open'});
+dialogRoot.innerHTML = '<dialog><slot></slot></dialog>';
+dialog.offsetTop;
+dialogRoot.firstChild.showModal();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/showmodal-shadow-sibling-frame-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/showmodal-shadow-sibling-frame-crash.html
new file mode 100644
index 0000000000..a1d792010d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/showmodal-shadow-sibling-frame-crash.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class=test-wait>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:noel@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=804047">
+
+<template>
+  <custom-dialog></custom-dialog>
+</template>
+<div id=shadow></div>
+<iframe id=sibling></iframe>
+
+<script>
+customElements.define('custom-dialog',class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({mode: 'open'}).innerHTML = '<dialog></dialog>';
+  }
+  show() {
+    this.shadowRoot.querySelector('dialog').showModal();
+  }
+});
+
+onload = () => {
+  const template = document.querySelector('template');
+  const content = document.importNode(template.content, true);
+  const dialog = content.querySelector('custom-dialog');
+  document.querySelector('div').appendChild(dialog);
+  dialog.show();
+  document.documentElement.classList.remove('test-wait');
+};
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/simulated-click-inert.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/simulated-click-inert.html
new file mode 100644
index 0000000000..8ff8a7e86c
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/simulated-click-inert.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=241699">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<p>Ensure that simulated click is still dispatched to an inert node.
+To test manually, click the CLICK ME label and verify it does change the value of the checkbox.</p>
+<div>
+</div>
+<input type="checkbox" id="target">
+<dialog><label for="target">CLICK ME</label></dialog>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    const actions = new test_driver.Actions()
+      .pointerMove(0, 0, {origin: element})
+      .pointerDown()
+      .pointerUp()
+    await actions.send();
+  }
+
+  document.querySelector('dialog').showModal();
+  await clickOn(document.querySelector('label'));
+  assert_true(document.getElementById('target').checked);
+}, 'Ensure that simulated click is still dispatched to an inert node.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/submit-dialog-close-event.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/submit-dialog-close-event.html
new file mode 100644
index 0000000000..5954993d19
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/submit-dialog-close-event.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=304827">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<dialog>
+  <form method="dialog">
+    <input id="goodbye" type="submit" value="Goodbye">
+    <input id="hello" type="submit" value="Hello">
+  </form>
+</dialog>
+
+<script>
+async_test(t => {
+  const dialog = document.querySelector('dialog');
+  dialog.show();
+  dialog.addEventListener('close', t.step_func(() => {
+    assert_false(dialog.open);
+    assert_equals(dialog.returnValue, 'Goodbye');
+
+    dialog.show();
+    dialog.addEventListener('close', t.step_func_done(() => {
+      assert_false(dialog.open);
+      assert_equals(dialog.returnValue, 'Hello');
+    }));
+    document.querySelector('#hello').click();
+  }), {once: true});
+
+  document.querySelector('#goodbye').click();
+}, 'Tests submitting a dialog on a close event triggered by a previous submission.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/synthetic-click-inert.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/synthetic-click-inert.html
new file mode 100644
index 0000000000..3be8213cd4
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/synthetic-click-inert.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=241699">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+dialog {
+  width: 50px;
+}
+</style>
+
+<button>Click me</button>
+<div id="div">Click me too</div>
+<dialog></dialog>
+
+<script>
+test(() => {
+  dialog = document.querySelector('dialog');
+  dialog.showModal();
+
+  const button = document.querySelector('button');
+  const div = document.getElementById('div');
+  let clicked = false;
+
+  [button, div].forEach(function(element) {
+    element.addEventListener('click', () => clicked = true);
+
+    clicked = false;
+    element.click();
+    assert_true(clicked, 'Calling click() on ' + element.tagName);
+
+    clicked = false;
+    element.dispatchEvent(new Event('click'));
+    assert_true(clicked, 'Calling dispatchEvent() on ' + element.tagName);
+  });
+}, 'Test that inert nodes still get programmatic click events');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block-ref.html
new file mode 100644
index 0000000000..40b72cf5ef
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="resources/dialog.css">
+</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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html
new file mode 100644
index 0000000000..10f6c69fbe
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="top-layer-containing-block-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none-ref.html
new file mode 100644
index 0000000000..1880668cc3
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="resources/dialog.css">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
new file mode 100644
index 0000000000..5257823eca
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="top-layer-display-none-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-ref.html
new file mode 100644
index 0000000000..0a2936abbe
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-ref.html
@@ -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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
new file mode 100644
index 0000000000..6397584387
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="top-layer-nesting-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html
new file mode 100644
index 0000000000..9a621e7594
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<title>Test that parent clip-path does not affect top layer elements</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="green-dialog-and-backdrop.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+body { background: red; }
+
+#parent {
+    clip-path: circle(5%);
+}
+
+dialog::backdrop,
+dialog {
+    background: green;
+}
+</style>
+<body>
+<div id="parent">
+    <dialog>PASS if no red shows</dialog>
+</div>
+<script>
+    document.querySelector("dialog").showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html
new file mode 100644
index 0000000000..020d90a0c8
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<title>Test that parent filter does not affect top layer elements</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="green-dialog-and-backdrop.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+body { background: red; }
+
+#parent {
+    filter: blur(100px) opacity(50%);
+}
+
+dialog::backdrop,
+dialog {
+    background: green;
+    position: absolute;
+}
+</style>
+<body>
+<div id="parent">
+    <dialog>PASS if no red shows</dialog>
+</div>
+<script>
+    document.querySelector("dialog").showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html
new file mode 100644
index 0000000000..daa5ccbbe1
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<title>Test that parent mask does not affect top layer elements</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="green-dialog-and-backdrop.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+body { background: red; }
+
+#parent {
+    mask-image: radial-gradient(black, transparent);
+    mask-size: 100px;
+}
+
+dialog::backdrop,
+dialog {
+    background: green;
+}
+</style>
+<body>
+<div id="parent">
+    <dialog>PASS if no red shows</dialog>
+</div>
+<script>
+    document.querySelector("dialog").showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
new file mode 100644
index 0000000000..82aa09d6c5
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<title>Test that parent opacity does not affect top layer elements</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="green-dialog-and-backdrop.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=229317">
+<style>
+body { background: red; }
+
+#parent {
+    opacity: 0;
+}
+
+dialog::backdrop,
+dialog {
+    background: green;
+}
+</style>
+<body>
+<div id="parent">
+    <dialog>PASS if no red shows</dialog>
+</div>
+<script>
+    document.querySelector("dialog").showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html
new file mode 100644
index 0000000000..86587254cf
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<title>Test that parent overflow: clip; does not affect top layer elements</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="green-dialog-and-backdrop.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+body { background: red; }
+
+#parent {
+    max-width: 0;
+    max-height: 0;
+    width: 0;
+    height: 0;
+    overflow: clip;
+    position: absolute;
+}
+
+dialog::backdrop,
+dialog {
+    background: green;
+    position: absolute;
+}
+</style>
+<body>
+<div id="parent">
+    <dialog>PASS if no red shows</dialog>
+</div>
+<script>
+    document.querySelector("dialog").showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html
new file mode 100644
index 0000000000..afcde733d2
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<title>Test that parent overflow: hidden; does not affect top layer elements</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="green-dialog-and-backdrop.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+body { background: red; }
+
+#parent {
+    max-width: 0;
+    max-height: 0;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+}
+
+dialog::backdrop,
+dialog {
+    background: green;
+}
+</style>
+<body>
+<div id="parent">
+    <dialog>PASS if no red shows</dialog>
+</div>
+<script>
+    document.querySelector("dialog").showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html
new file mode 100644
index 0000000000..dd04c2ed47
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<title>Test that parent overflow: scroll; does not affect top layer elements</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="green-dialog-and-backdrop.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+body { background: red; }
+
+#parent {
+    max-width: 0;
+    max-height: 0;
+    width: 0;
+    height: 0;
+    overflow: scroll;
+    position: absolute;
+}
+
+dialog::backdrop,
+dialog {
+    background: green;
+    position: absolute;
+}
+</style>
+<body>
+<div id="parent">
+    <dialog>PASS if no red shows</dialog>
+</div>
+<script>
+    document.querySelector("dialog").showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html
new file mode 100644
index 0000000000..cf35a713f3
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<title>Test that parent transform does not affect top layer elements</title>
+<meta charset="utf-8">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="green-dialog-and-backdrop.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+body { background: red; }
+
+#parent {
+    transform: scale(0);
+}
+
+dialog::backdrop,
+dialog {
+    background: green;
+}
+</style>
+<body>
+<div id="parent">
+    <dialog>PASS if no red shows</dialog>
+</div>
+<script>
+    document.querySelector("dialog").showModal();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position-ref.html
new file mode 100644
index 0000000000..01eff8c4de
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+<style>
+dialog {
+  background-color: green;
+  height: 50px;
+  width: 50px;
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  position: absolute;
+  top: 100px;
+  left: 100px;
+}
+</style>
+
+<dialog></dialog>
+
+<script>
+document.querySelector('dialog').showModal();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position-relative.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position-relative.html
new file mode 100644
index 0000000000..0dbef7d2ac
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position-relative.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=106538">
+<link rel=match href="top-layer-position-ref.html">
+<meta name=assert content="Position relative computes to absolute in the top layer for dialog elements.">
+
+<style>
+dialog {
+  background-color: green;
+  height: 50px;
+  width: 50px;
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  position: relative;
+  top: 100px;
+  left: 100px;
+}
+</style>
+
+<dialog></dialog>
+
+<script>
+document.querySelector('dialog').showModal();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position-static.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position-static.html
new file mode 100644
index 0000000000..86d8c89f88
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position-static.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:falken@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=106538">
+<link rel=match href="top-layer-position-ref.html">
+<meta name=assert content="Position static computes to absolute in the top layer for dialog elements.">
+
+<style>
+dialog {
+  background-color: green;
+  height: 50px;
+  width: 50px;
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  position: static;
+  top: 100px;
+  left: 100px;
+}
+</style>
+
+<dialog></dialog>
+
+<script>
+document.querySelector('dialog').showModal();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position.html
new file mode 100644
index 0000000000..1fdbca5c1e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-position.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<body>
+<script>
+test(() => {
+  const dialog = document.createElement('dialog');
+  document.body.appendChild(dialog);
+
+  dialog.style = 'position:static';
+  assert_equals(getComputedStyle(dialog).position, 'static');
+  dialog.showModal();
+  assert_true(dialog.open);
+  assert_equals(getComputedStyle(dialog).position, 'absolute',
+    `dialog should be position:absolute when element.style has position:static.`);
+  dialog.close();
+  assert_false(dialog.open);
+
+  dialog.style = 'position:relative';
+  assert_equals(getComputedStyle(dialog).position, 'relative');
+  dialog.showModal();
+  assert_true(dialog.open);
+  assert_equals(getComputedStyle(dialog).position, 'absolute',
+    `dialog should be position:absolute when element.style has position:relative.`);
+  dialog.close();
+  assert_false(dialog.open);
+}, `Verifies that position:static and position:relative computed to position:absolute in the top layer.`);
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd-ref.html
new file mode 100644
index 0000000000..392d1ca46e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="resources/dialog.css">
+<style>
+.pseudodialog {
+    height: 100px;
+    width: 100px;
+}
+</style>
+</head>
+<body>
+<p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: 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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
new file mode 100644
index 0000000000..3b3e336892
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="top-layer-stacking-correct-order-remove-readd-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
+<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="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: 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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic-ref.html
new file mode 100644
index 0000000000..6ddb317633
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="resources/dialog.css">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html
new file mode 100644
index 0000000000..8ab7068d30
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="match" href="top-layer-stacking-dynamic-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
+<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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-ref.html
new file mode 100644
index 0000000000..b271ef47b4
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="resources/dialog.css">
+</head>
+<style>
+.box {
+    height: 150px;
+    width: 150px;
+}
+.container {
+    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>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking.html
new file mode 100644
index 0000000000..6407ef23c2
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking.html
@@ -0,0 +1,56 @@
+<!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>
+<link rel="match" href="top-layer-stacking-ref.html">
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
+<style>
+.box {
+    height:150px;
+    width:150px;
+}
+
+::backdrop {
+    display: none;
+}
+
+.container {
+    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>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip