text-selection-with-delegatesFocus-text-control.html (2132B)
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 8 <body> 9 <x-shadow id="xShadow"></x-shadow> 10 </body> 11 12 <script> 13 'use strict'; 14 15 /** 16 * command to select text in shadow-root 17 */ 18 function selectText(element, start, end) { 19 getSelection().empty(); 20 const actions = new test_driver.Actions(); 21 actions.pointerMove(start, 0, {origin: element}); 22 actions.pointerDown(); 23 actions.pointerMove(end, 0, {origin: element}); 24 actions.pointerUp(); 25 return actions.send(); 26 } 27 28 /** 29 * command to type foo. 30 */ 31 function typeFoo() { 32 const actions = new test_driver.Actions(); 33 actions.keyDown("F"); 34 actions.keyUp("F"); 35 actions.keyDown("O"); 36 actions.keyUp("O"); 37 actions.keyDown("O"); 38 actions.keyUp("O"); 39 return actions.send(); 40 } 41 42 promise_test(async () => { 43 const xShadow = document.getElementById('xShadow'); 44 const root = xShadow.attachShadow({ mode: 'open', delegatesFocus: true }); 45 const span = document.createElement('span'); 46 span.textContent = 'Example Text to Select '; 47 const br = document.createElement('br'); 48 const input = document.createElement('input'); 49 root.append(span, br, input); 50 51 await selectText(xShadow, 0, 0); 52 assert_equals(document.activeElement, xShadow); 53 assert_equals(xShadow.shadowRoot.activeElement, input, "click on shadow host with delegatesFocus focuses the input element."); 54 55 await typeFoo(); 56 assert_equals(input.value, 'FOO', "keyboard typing will update the input value."); 57 58 await selectText(xShadow, 0, 50); 59 const s = getSelection(); 60 assert_greater_than(s.toString().length, 0, "drag text will update selection."); 61 62 await typeFoo(); 63 assert_equals(input.value, 'FOOFOO', "keyboard typing will update the input value."); 64 }, 'shadow root has selectable text when focus is delegated. Selection goes to text control if it is the delegated focusable area.'); 65 66 </script>