cross-shadow-boundary-slot-isPointInRange.html (1588B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <span id="outer">Outer</span> 6 <div id="host"> 7 <template shadowrootmode="open"> 8 <slot></slot> 9 <span id="inner">Inner</span> 10 </template> 11 <span id="slotted">Slotted</span> 12 </div> 13 <script> 14 test(function() { 15 const sel = window.getSelection(); 16 sel.empty(); 17 18 sel.setBaseAndExtent(outer.firstChild, 3, slotted.firstChild, 4); 19 20 assert_equals(sel.anchorNode, outer.firstChild); 21 assert_equals(sel.anchorOffset, 3); 22 assert_equals(sel.focusNode, slotted.firstChild); 23 assert_equals(sel.focusOffset, 4); 24 25 // Since the endpoint is at "Slotted", so it should be in the range 26 assert_true(sel.getRangeAt(0).isPointInRange(slotted.firstChild, 0)); 27 }, "test isPointInRange returns true when the slotted content is in range"); 28 29 test(function() { 30 const sel = window.getSelection(); 31 sel.empty(); 32 33 const inner = host.shadowRoot.getElementById("inner"); 34 sel.setBaseAndExtent(outer.firstChild, 3, inner.firstChild, 4); 35 36 const range = sel.getComposedRanges(host.shadowRoot)[0]; 37 assert_equals(range.startContainer, outer.firstChild); 38 assert_equals(range.startOffset, 3); 39 assert_equals(range.endContainer, inner.firstChild); 40 assert_equals(range.endOffset, 4); 41 42 // We use shadow including order, so slotted content is not selected, hence 43 // not in the range.. 44 assert_false(sel.getRangeAt(0).isPointInRange(slotted.firstChild, 0)); 45 }, "test isPointInRange returns false when the slotted content is not in range"); 46 47 </script>