Range-isPointInRange.html (3161B)
1 <!doctype html> 2 <title>Range.isPointInRange() with ShadowDOM selection tests</title> 3 <link rel="author" title="Sean Feng" href=sefeng@mozilla.com> 4 <div id=log></div> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <span id="start">Start</span> 8 <div id="host"> 9 <template shadowrootmode="open"> 10 <span id="inner1">Inner1</span> 11 <span id="inner2">Inner2</span> 12 </template> 13 </div> 14 <span id="end">End</span> 15 <script> 16 "use strict"; 17 18 test(function() { 19 assert_implements(window.getSelection().getComposedRanges, "GetComposedRanges is not supported"); 20 const start = document.getElementById("start"); 21 const shadowRoot = document.getElementById("host").shadowRoot; 22 23 const end = shadowRoot.getElementById("inner2"); 24 const inner1 = shadowRoot.getElementById("inner1"); 25 26 window.getSelection().setBaseAndExtent(start.firstChild, 3, end.firstChild, 3); 27 28 const composedRange = window.getSelection().getComposedRanges({ shadowRoots: [shadowRoot] })[0]; 29 // Sanity check to make sure we have selected something across the shadow boundary. 30 assert_true(composedRange.startContainer == start.firstChild); 31 assert_true(composedRange.startOffset == 3); 32 assert_true(composedRange.endContainer == end.firstChild); 33 assert_true(composedRange.endOffset == 3); 34 35 assert_true(window.getSelection().isCollapsed, "Selection should be collapsed"); 36 37 const range = window.getSelection().getRangeAt(0); 38 assert_false(range.isPointInRange(inner1, 0), "inner1 is in the shadow tree, should not be in the range"); 39 assert_true(range.comparePoint(inner1, 0) == -1, "inner1 is in the shadow tree, should return -1 for comparison"); 40 }, "isPointInRange() test for collapsed selection"); 41 42 test(function() { 43 const start = document.getElementById("start"); 44 const shadowRoot = document.getElementById("host").shadowRoot; 45 46 const end = document.getElementById("end"); 47 const inner1 = shadowRoot.getElementById("inner1"); 48 49 window.getSelection().setBaseAndExtent(start.firstChild, 3, end.firstChild, 3); 50 51 const composedRange = window.getSelection().getRangeAt(0); 52 // Sanity check to make sure we have selected something 53 assert_true(composedRange.startContainer == start.firstChild); 54 assert_true(composedRange.startOffset == 3); 55 assert_true(composedRange.endContainer == end.firstChild); 56 assert_true(composedRange.endOffset == 3); 57 58 assert_false(window.getSelection().isCollapsed, "Range should not be collapsed"); 59 60 const range = window.getSelection().getRangeAt(0); 61 62 assert_false(range.isPointInRange(inner1, 0), "inner1 is in the shadow tree, should not be in the range"); 63 64 // The selection is not collapsed so inner1 is not in the same tree as the selection. 65 assert_throws_dom("WrongDocumentError", function() { 66 range.comparePoint(inner1, 0); 67 }); 68 69 const host = document.getElementById("host"); 70 assert_true(range.isPointInRange(host, 0), "host is not in the shadow tree, should be in the range"); 71 assert_true(range.comparePoint(host, 0) == 0, "host is not in the shadow tree, should return 0 for comparison"); 72 }, "isPointInRange() test for non-collapsed selection"); 73 74 </script>