inert-node-is-unfocusable.html (2847B)
1 <!DOCTYPE html> 2 <html id="html" tabindex="1"> 3 <head> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#blocked-by-a-modal-dialog"> 5 <meta name="assert" content="Checks that, when opening modal dialogs, inert nodes are not focusable."> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body id="body" tabindex="1"> 12 <style> 13 dialog { 14 outline: none; 15 } 16 </style> 17 <dialog id="top-dialog" tabindex="1" style="width: 100px; top: 30px"><button id="top-dialog-button">I get focus</button></dialog> 18 <dialog id="bottom-dialog" tabindex="-1" style="width: 100px; bottom: 30px"><button id="bottom-dialog-button">I don't get focus.</button></dialog> 19 <div id="container"> 20 <input id="text" type="text"> 21 <input id="datetime" type="datetime"> 22 <input id="color" type="color"> 23 <select id="select"> 24 <optgroup id="optgroup"> 25 <option id="option">Option</option> 26 </optgroup> 27 </select> 28 <div id="contenteditable-div" contenteditable>I'm editable</div> 29 <span id="tabindex-span" tabindex="0">I'm tabindexed.</div> 30 <embed id="embed" type="application/x-blink-test-plugin" width=100 height=100></embed> 31 <a id="anchor" href="">Link</a> 32 </div> 33 <script> 34 "use strict"; 35 // The test passses if only the topmost dialog and its button are focusable. 36 37 function testFocus(element, expectFocus) { 38 promise_test(async function() { 39 var focusedElement = null; 40 element.addEventListener('focus', function() { focusedElement = element; }, false); 41 element.focus(); 42 var theElement = element; 43 if (expectFocus) { 44 assert_equals(focusedElement, theElement); 45 } else { 46 assert_not_equals(focusedElement, theElement); 47 } 48 }, `#${CSS.escape(element.id)} is ${expectFocus ? "" : "not "} focusable`); 49 } 50 51 function testTree(element, expectFocus) { 52 if (element.nodeType == Node.ELEMENT_NODE) 53 testFocus(element, expectFocus); 54 var childNodes = element.childNodes; 55 for (var i = 0; i < childNodes.length; i++) 56 testTree(childNodes[i], expectFocus); 57 } 58 59 var bottomDialog = document.getElementById('bottom-dialog'); 60 var topDialog = document.getElementById('top-dialog'); 61 promise_setup(async function() { 62 await test_driver.click(document.documentElement); 63 bottomDialog.showModal(); 64 topDialog.showModal(); 65 add_completion_callback(function() { 66 topDialog.close(); 67 bottomDialog.close(); 68 }); 69 }); 70 71 testFocus(document.documentElement, false); 72 testFocus(document.body, false); 73 testTree(topDialog, true); 74 testTree(bottomDialog, false); 75 testTree(document.getElementById('container'), false); 76 </script> 77 </body> 78 </html>