test_selection_cross_shadow_boundary_backward_nested_click.html (2120B)
1 <!DOCTYPE HTML> 2 <script src="/tests/SimpleTest/EventUtils.js"></script> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 5 <script> 6 SimpleTest.waitForExplicitFinish(); 7 function run() { 8 const host = document.getElementById("host"); 9 const inner = host.shadowRoot.getElementById("inner"); 10 const innerRect = inner.getBoundingClientRect(); 11 12 const innerHost = host.shadowRoot.getElementById("innerHost"); 13 const nested = innerHost.shadowRoot.getElementById("nested"); 14 const nestedRect = nested.getBoundingClientRect(); 15 16 // Click the center of "NestedText" 17 synthesizeMouse(nested, nestedRect.width / 2, nestedRect.height / 2, { type: "mousedown" }); 18 synthesizeMouse(nested, nestedRect.width / 2, nestedRect.height / 2, { type: "mouseup" }); 19 20 // Click the center of "InnerText" 21 synthesizeMouse(inner, innerRect.width / 2, innerRect.height / 2, { type: "mousedown", shiftKey: true}); 22 synthesizeMouse(inner, innerRect.width / 2, innerRect.height / 2, { type: "mouseup" , shiftKey: true}); 23 24 // Above two clicks should select half of the content in "InnerText" and half of the content in "NestedText" 25 let sel = document.getSelection().getComposedRanges(host.shadowRoot, innerHost.shadowRoot)[0]; 26 27 // forward selection 28 is(sel.startContainer, inner.firstChild, "startContainer is the InnerText"); 29 is(sel.endContainer, nested.firstChild, "endContainer is the NestedText"); 30 31 const collapsedRange = document.getSelection().getRangeAt(0); 32 is(collapsedRange.startContainer, inner.firstChild, "normal range's startContainer get collapsed to InnerText"); 33 is(collapsedRange.endContainer, inner.firstChild, "normal range's endContainer get collapsed to InnerText"); 34 35 SimpleTest.finish(); 36 } 37 </script> 38 <body onload="SimpleTest.waitForFocus(run);"> 39 <div id="host"> 40 <template shadowrootmode="open"> 41 <span id="inner">InnerText</span> 42 <div id="innerHost"> 43 <template shadowrootmode="open"> 44 <span id="nested">NestedText</span> 45 </template> 46 </div> 47 </template> 48 </div> 49 </body>