inert-node-is-unfocusable.html (3467B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>inert nodes are unfocusable</title> 6 <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org"> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 </head> 12 <body id="body" tabindex="1"> 13 <button id="focusable">Outside of inert container</button> 14 <button inert id="inert">Inert button</button> 15 <div inert id="container"> 16 <input id="text" type="text"> 17 <input id="datetime" type="datetime"> 18 <input id="color" type="color"> 19 <select id="select"> 20 <optgroup id="optgroup"> 21 <option id="option">Option</option> 22 </optgroup> 23 </select> 24 <div id="contenteditable-div" contenteditable>I'm editable</div> 25 <span id="tabindex-span" tabindex="0">I'm tabindexed.</div> 26 <embed id="embed" type="application/x-blink-test-plugin" width=100 height=100></embed> 27 <a id="anchor" href="">Link</a> 28 </div> 29 <script> 30 function testFocus(element, expectFocus) { 31 focusedElement = null; 32 element.addEventListener('focus', function() { focusedElement = element; }, false); 33 element.focus(); 34 theElement = element; 35 assert_equals(focusedElement === theElement, expectFocus); 36 } 37 38 function testTree(element, expectFocus, excludeCurrent) { 39 if (element.nodeType == Node.ELEMENT_NODE && !excludeCurrent) 40 testFocus(element, expectFocus); 41 if (element.tagName === "SELECT") 42 return; 43 var childNodes = element.childNodes; 44 for (var i = 0; i < childNodes.length; i++) 45 testTree(childNodes[i], expectFocus); 46 } 47 48 promise_setup(async () => { 49 // Chrome and edge auto-focus the URL bar when the browser is launched. 50 // This is needed to ensure the 'focus' events fire below. 51 await test_driver.click(document.documentElement); 52 }); 53 54 promise_test(async function() { 55 testFocus(document.getElementById('focusable'), true); 56 }, "Button outside of inert container is focusable."); 57 58 promise_test(async function() { 59 testFocus(document.getElementById('inert'), false); 60 }, "Button with inert atribute is unfocusable."); 61 62 promise_test(async function() { 63 testTree(document.getElementById('container'), false); 64 }, "All focusable elements inside inert subtree are unfocusable"); 65 66 promise_test(async function() { 67 assert_false(document.getElementById("focusable").inert, "Inert not set explicitly is false") 68 assert_true(document.getElementById("inert").inert, "Inert set explicitly is true"); 69 assert_true(document.getElementById("container").inert, "Inert set on container is true"); 70 }, "Can get inert via property"); 71 72 promise_test(async function() { 73 assert_false(document.getElementById("text").inert, "Elements inside of inert subtrees return false when getting inert"); 74 }, "Elements inside of inert subtrees return false when getting 'inert'"); 75 76 promise_test(async function() { 77 document.getElementById('focusable').inert = true; 78 testFocus(document.getElementById('focusable'), false); 79 document.getElementById('inert').inert = false; 80 testFocus(document.getElementById('inert'), true); 81 document.getElementById('container').inert = false; 82 testTree(document.getElementById('container'), true, true); 83 }, "Setting inert via property correctly modifies inert state"); 84 </script> 85 </body> 86 </html>