inert-label-focus.html (1938B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=author href="mailto:falken@chromium.org"> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> 5 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=242848"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 12 <label for="submit">Label for Submit</label> 13 <dialog> 14 <input id="text" type="text"> 15 <input id="submit" type="submit"> 16 </dialog> 17 18 <script> 19 promise_test(async () => { 20 async function clickOn(element) { 21 let absoluteTop = 0; 22 let absoluteLeft = 0; 23 for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) { 24 absoluteLeft += parentNode.offsetLeft; 25 absoluteTop += parentNode.offsetTop; 26 } 27 28 const x = Math.round(absoluteLeft + element.offsetWidth / 2); 29 const y = Math.round(absoluteTop + element.offsetHeight / 2); 30 const actions = new test_driver.Actions() 31 .pointerMove(x, y) 32 .pointerDown() 33 .pointerUp() 34 .pointerMove(0, 0); 35 await actions.send(); 36 } 37 38 document.querySelector('dialog').showModal(); 39 document.querySelector('#text').focus(); 40 41 label = document.querySelector('label'); 42 submit = document.querySelector('#submit'); 43 label.focus(); 44 assert_equals(document.activeElement, submit, 45 'label.focus() should send focus to the target.'); 46 47 await clickOn(label); 48 assert_not_equals(document.activeElement, label, 49 'Clicking the label should not focus the label.'); 50 assert_not_equals(document.activeElement, submit, 51 'Clicking the label should not focus the submit input.'); 52 }, 'Tests focusing of an inert label for a non-inert target.'); 53 </script>