diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html | 75 |
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> |