text-selection-with-delegatesFocus.html (2414B)
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="withoutFocus"></x-shadow> 10 <x-shadow id="withFocus"></x-shadow> 11 </body> 12 13 <script> 14 'use strict'; 15 16 /** 17 * build shadow-root with delegates focus, a focusable element, and an (ideally) selectable text 18 */ 19 function buildShadowRootWithSelectableText( element, shouldDelegateFocus ) { 20 element.attachShadow({ mode: 'open', delegatesFocus: shouldDelegateFocus }); 21 const span = document.createElement('span'); 22 span.textContent = 'Example Text to Select '; 23 const button = document.createElement('button'); 24 button.textContent = 'Button'; 25 element.shadowRoot.append(span, button); 26 } 27 28 /** 29 * command to select text in shadow-root 30 */ 31 function selectText(element, start, end) { 32 getSelection().empty(); 33 const actions = new test_driver.Actions(); 34 actions.pointerMove(start, 0, {origin: element}); 35 actions.pointerDown(); 36 actions.pointerMove(end, 0, {origin: element}); 37 actions.pointerUp(); 38 return actions.send(); 39 } 40 41 promise_test(async () => { 42 const xShadow = document.getElementById('withoutFocus'); 43 buildShadowRootWithSelectableText(xShadow, false); 44 45 // starting selection from the center of the element, and going right. 46 // The important part here is that we start the selection in the center 47 // (where mouse-down events may be delegated) 48 await selectText(xShadow, 0, 50) 49 const s = getSelection(); 50 51 // because browsers may handle rendering differently, we can get different amounts of 52 // text selected, even when using the same start-end values. We opt in this case to 53 // verify just if any text is selected, since all we care about is if some text is 54 // selected. 55 assert_greater_than(s.toString().length, 0); 56 }, 'shadow root has selectable text when focus is not delegated'); 57 58 promise_test(async () => { 59 const xShadow = document.getElementById('withFocus'); 60 buildShadowRootWithSelectableText(xShadow, true); 61 62 await selectText(xShadow, 0, 50) 63 const s = getSelection(); 64 65 assert_greater_than(s.toString().length, 0); 66 }, 'shadow root has selectable text when focus is delegated'); 67 68 </script>