inert-iframe-tabbing.html (5224B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Tabbing with inert iframe</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation"> 7 <meta assert="assert" content="Tabbing can't enter an inert iframe from the outside, but can move within it and can leave it if focus is already there."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 13 <div id="before" tabindex="0">before</div> 14 <div id="inert" inert> 15 <iframe id="iframe"></iframe> 16 </div> 17 <div id="after" tabindex="0">after</a> 18 19 <script> 20 const tabKey = "\uE004"; 21 const before = document.getElementById("before"); 22 const inert = document.getElementById("inert"); 23 const after = document.getElementById("after"); 24 const iframe = document.getElementById("iframe"); 25 let iframeDoc; 26 let start; 27 let end; 28 29 promise_setup(async () => { 30 await new Promise(resolve => { 31 iframe.addEventListener("load", resolve, { once: true }); 32 iframe.srcdoc = ` 33 <div id="start" tabindex="0">target</div> 34 <div id="end" tabindex="0">target</div> 35 `; 36 }); 37 iframeDoc = iframe.contentDocument; 38 start = iframeDoc.getElementById("start"); 39 end = iframeDoc.getElementById("end"); 40 }); 41 42 promise_test(async function() { 43 before.focus(); 44 assert_equals(document.activeElement, before, "#before got outer focus"); 45 assert_false(iframeDoc.hasFocus(), "iframeDoc doesn't have focus"); 46 47 await test_driver.send_keys(document.activeElement, tabKey); 48 assert_equals(document.activeElement, after, "#after got outer focus"); 49 assert_false(iframeDoc.hasFocus(), "iframeDoc still doesn't have focus"); 50 }, "Sequential navigation can't enter an inert iframe"); 51 52 promise_test(async function() { 53 start.focus(); 54 assert_equals(document.activeElement, iframe, "#iframe got outer focus"); 55 assert_equals(iframeDoc.activeElement, start, "#start got inner focus"); 56 assert_true(iframeDoc.hasFocus(), "iframeDoc has focus"); 57 58 await test_driver.send_keys(iframeDoc.activeElement, tabKey); 59 assert_equals(document.activeElement, iframe, "#iframe still has outer focus"); 60 assert_equals(iframeDoc.activeElement, end, "#end got inner focus"); 61 assert_true(iframeDoc.hasFocus(), "iframeDoc still has focus"); 62 }, "Sequential navigation can move within an inert iframe"); 63 64 promise_test(async function() { 65 end.focus(); 66 assert_equals(document.activeElement, iframe, "#iframe got outer focus"); 67 assert_equals(iframeDoc.activeElement, end, "#end got inner focus"); 68 assert_true(iframeDoc.hasFocus(), "iframeDoc has focus"); 69 70 await test_driver.send_keys(iframeDoc.activeElement, tabKey); 71 assert_equals(document.activeElement, after, "#after got outer focus"); 72 assert_false(iframeDoc.hasFocus(), "iframeDoc doesn't have focus"); 73 }, "Sequential navigation can leave an inert iframe"); 74 75 // Test again without inertness. 76 77 promise_test(async function() { 78 inert.inert = false; 79 80 before.focus(); 81 assert_equals(document.activeElement, before, "#before got outer focus"); 82 assert_false(iframeDoc.hasFocus(), "iframeDoc doesn't have focus"); 83 84 await test_driver.send_keys(document.activeElement, tabKey); 85 assert_equals(document.activeElement, iframe, "#iframe got outer focus"); 86 assert_true(iframeDoc.hasFocus(), "iframeDoc has focus"); 87 88 // The document element is also focusable in Firefox. 89 if (iframeDoc.activeElement === iframeDoc.documentElement) { 90 await test_driver.send_keys(document.activeElement, tabKey); 91 assert_equals(document.activeElement, iframe, "#iframe got outer focus"); 92 assert_true(iframeDoc.hasFocus(), "iframeDoc has focus"); 93 } 94 assert_equals(iframeDoc.activeElement, start, "#start got inner focus"); 95 }, "Sequential navigation can enter a no longer inert iframe"); 96 97 promise_test(async function() { 98 inert.inert = false; 99 100 start.focus(); 101 assert_equals(document.activeElement, iframe, "#iframe got outer focus"); 102 assert_equals(iframeDoc.activeElement, start, "#start got inner focus"); 103 assert_true(iframeDoc.hasFocus(), "iframeDoc has focus"); 104 105 await test_driver.send_keys(iframeDoc.activeElement, tabKey); 106 assert_equals(document.activeElement, iframe, "#iframe still has outer focus"); 107 assert_equals(iframeDoc.activeElement, end, "#end got inner focus"); 108 assert_true(iframeDoc.hasFocus(), "iframeDoc still has focus"); 109 }, "Sequential navigation can move within a no longer inert iframe"); 110 111 promise_test(async function() { 112 inert.inert = false; 113 114 end.focus(); 115 assert_equals(document.activeElement, iframe, "#iframe got outer focus"); 116 assert_equals(iframeDoc.activeElement, end, "#end got inner focus"); 117 assert_true(iframeDoc.hasFocus(), "iframeDoc has focus"); 118 119 await test_driver.send_keys(iframeDoc.activeElement, tabKey); 120 assert_equals(document.activeElement, after, "#after got outer focus"); 121 assert_false(iframeDoc.hasFocus(), "iframeDoc doesn't have focus"); 122 }, "Sequential navigation can leave a no longer inert iframe"); 123 </script>