inert-label-focus.html (1905B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>inert with label/for</title> 6 <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 </head> 12 <body> 13 <label inert id="for-submit" for="submit">Label for Submit</label> 14 <input id="text" type="text"> 15 <input id="submit" type="submit"> 16 17 <label id="for-input-in-inert-subtree" 18 for="input-in-inert-subtree">Label for input in inert subtree</label> 19 <div inert> 20 <input id="input-in-inert-subtree"></input> 21 </div> 22 23 <script> 24 test(() => { 25 label = document.querySelector('#for-submit'); 26 label.focus(); 27 assert_equals(document.activeElement, document.querySelector('#submit')); 28 }, 'Calling focus() on an inert label should still send focus to its target.'); 29 30 promise_test(async () => { 31 text = document.querySelector('#text'); 32 text.focus(); 33 label = document.querySelector('#for-submit'); 34 try { 35 await test_driver.click(label); 36 assert_equals(document.activeElement, document.body); 37 } catch (e) { 38 // test driver detects inert elements as unclickable 39 // and throws an error 40 } 41 }, 'Clicking on an inert label should send focus to document.body.'); 42 43 test(() => { 44 text = document.querySelector('#text'); 45 text.focus(); 46 47 label = document.querySelector('#for-input-in-inert-subtree'); 48 label.focus(); 49 assert_equals(document.activeElement, text); 50 }, 'Calling focus() on a label for a control which is in an inert subtree ' + 51 'should have no effect.'); 52 </script> 53 </html>