click-focus-slot-ancestor.html (2749B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-actions.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <link rel="help" href="crbug.com/41420461"> 8 9 <div id='normalDiv' tabindex='0'><span id='normalSpan'>Text to click and select</span></div> 10 <div id='container'><span id='slottedSpan'>Slotted text to click and select</span></div> 11 12 <script> 13 14 function clickOn(element) { 15 const actions = new test_driver.Actions(); 16 actions.pointerMove(5, 5, {origin: element}); 17 actions.pointerDown(); 18 actions.pointerUp(); 19 return actions.send(); 20 } 21 22 function selectText(element) { 23 getSelection().empty(); 24 const actions = new test_driver.Actions(); 25 actions.pointerMove(0, 0, {origin: element}); 26 actions.pointerDown(); 27 actions.pointerMove(50, 0, {origin: element}); 28 actions.pointerUp(); 29 return actions.send(); 30 } 31 32 let sr = container.attachShadow({ mode: 'open' }); 33 sr.innerHTML = '<div id="shadowDiv" tabindex="0"><slot></slot></div>'; 34 35 promise_test(async () => { 36 await clickOn(normalSpan); 37 assert_equals(document.activeElement, normalDiv); 38 39 await clickOn(slottedSpan); 40 assert_equals(document.activeElement, container); 41 assert_equals(sr.activeElement, sr.getElementById('shadowDiv')); 42 }, 'Clicking on non-focusable slot inside focusable div will make the flat-tree focusable ancestor get focused'); 43 44 promise_test(async () => { 45 let selection = getSelection(); 46 47 await selectText(normalSpan); 48 assert_equals(document.activeElement, normalDiv); 49 assert_equals(selection.anchorNode, normalSpan.firstChild); 50 assert_greater_than(selection.toString().length, 0); 51 52 await selectText(slottedSpan); 53 assert_equals(document.activeElement, container); 54 assert_equals(sr.activeElement, sr.getElementById('shadowDiv')); 55 assert_equals(selection.anchorNode, slottedSpan.firstChild); 56 assert_greater_than(selection.toString().length, 0); 57 }, 'Select on non-focusable slot inside focusable div will select text'); 58 59 promise_test(async () => { 60 let selection = getSelection(); 61 // Reset selection 62 await clickOn(normalSpan); 63 64 container.setAttribute('contenteditable', true); 65 await selectText(slottedSpan); 66 assert_equals(document.activeElement, container); 67 assert_equals(sr.activeElement, null, 'focus is on contenteditable container only'); 68 assert_equals(selection.anchorNode, slottedSpan.firstChild); 69 assert_greater_than(selection.toString().length, 0); 70 container.removeAttribute('contenteditable'); 71 }, 'Select on non-focusable non-editable slot in a contenteditable shadow DOM and inside focusable div will select text'); 72 73 </script>