fire-selectionchange-event-on-document-if-textcontrol-element-is-in-shadow-tree.html (1750B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Selectionchange event fired on document if TextControl element is in Shadow Tree</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <div id="root"></div> 8 9 <script> 10 const root = document.getElementById("root"); 11 const shadow = root.attachShadow({ mode: "open" }); 12 const element = document.createElement("input"); 13 element.value = "hello"; 14 shadow.append(element); 15 16 const events_on_document = []; 17 document.addEventListener("selectionchange", ev => { 18 events_on_document.push(ev); 19 }); 20 21 const events_on_input = []; 22 element.addEventListener("selectionchange", ev => { 23 events_on_input.push(ev); 24 }); 25 26 promise_test(async () => { 27 element.focus(); 28 element.setSelectionRange(5, 5); 29 await new Promise(resolve => step_timeout(resolve, 500)); 30 events_on_document.length = 0; 31 events_on_input.length = 0; 32 33 document.execCommand("delete"); 34 // Waits a short time to allow any events to be processed. 35 await new Promise(resolve => step_timeout(resolve, 500)); 36 37 const expectedValue = "hell"; 38 assert_equals(element.value, expectedValue, "element.value should be " + expectedValue); 39 //selectionchange event should not fire on input element 40 assert_equals(events_on_input.length, 0); 41 42 //selectionchange event should fire on the document 43 assert_equals(events_on_document.length, 1); 44 assert_equals(events_on_document[0].target, document, "Event target should be the document"); 45 46 }, "selectionchange event fired on the document in case TextControl element is in Shadow Tree"); 47 </script>