1 files changed, 75 insertions, 0 deletions
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..74379f50e2
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
@@ -0,0 +1,75 @@
+<!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">
+<style>
+dialog {
+  outline: none;
+}
+</style>
+<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>