Selection-collapse-and-extend.html (3696B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 5 <meta name="assert" content="Selection's collapse and extend should abort only when the node's root is not connected"> 6 <link rel="help" href="https://w3c.github.io/selection-api/#dom-selection-collapse"> 7 <link rel="help" href="https://w3c.github.io/selection-api/#dom-selection-extend"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <div id="container"></div> 11 <script> 12 13 test(() => { 14 const host = document.createElement('div'); 15 container.appendChild(host); 16 const shadowRoot = host.attachShadow({mode: 'closed'}); 17 shadowRoot.innerHTML = '<div contenteditable><p>hello, world</p></div>'; 18 const textNode = shadowRoot.querySelector('p').firstChild; 19 getSelection().removeAllRanges(); 20 getSelection().collapse(textNode, 5); 21 const ranges = getSelection().getComposedRanges({ shadowRoots: [shadowRoot] }); 22 assert_equals(ranges.length, 1); 23 assert_equals(ranges[0].startContainer, textNode); 24 assert_equals(ranges[0].startOffset, 5); 25 assert_equals(ranges[0].endContainer, textNode); 26 assert_equals(ranges[0].endOffset, 5); 27 assert_true(ranges[0].collapsed); 28 }, 'collapse can set selection to a node inside a shadow tree'); 29 30 test(() => { 31 const host = document.createElement('div'); 32 const shadowRoot = host.attachShadow({mode: 'closed'}); 33 shadowRoot.innerHTML = '<div contenteditable><p>hello, world</p></div>'; 34 const textNode = shadowRoot.querySelector('p').firstChild; 35 getSelection().removeAllRanges(); 36 getSelection().collapse(textNode, 5); 37 const ranges = getSelection().getComposedRanges({ shadowRoots: [shadowRoot] }); 38 assert_equals(ranges.length, 0); 39 }, 'collapse abort steps when called with a disconnected node inside a shadow tree'); 40 41 test(() => { 42 const host = document.createElement('div'); 43 container.appendChild(host); 44 const shadowRoot = host.attachShadow({mode: 'closed'}); 45 shadowRoot.innerHTML = '<div contenteditable><p>hello, world</p></div>'; 46 const textNode = shadowRoot.querySelector('p').firstChild; 47 getSelection().removeAllRanges(); 48 getSelection().collapse(textNode, 5); 49 let ranges = getSelection().getComposedRanges({ shadowRoots: [shadowRoot] }); 50 assert_equals(ranges.length, 1); 51 getSelection().extend(textNode, 11); 52 ranges = getSelection().getComposedRanges({ shadowRoots: [shadowRoot] }); 53 assert_equals(ranges.length, 1); 54 assert_equals(ranges[0].startContainer, textNode); 55 assert_equals(ranges[0].startOffset, 5); 56 assert_equals(ranges[0].endContainer, textNode); 57 assert_equals(ranges[0].endOffset, 11); 58 assert_false(ranges[0].collapsed); 59 }, 'extend can set selection to a node inside a shadow tree'); 60 61 test(() => { 62 const host = document.createElement('div'); 63 const shadowRoot = host.attachShadow({mode: 'closed'}); 64 shadowRoot.innerHTML = '<div contenteditable><p>hello, world</p></div>'; 65 const textNode = shadowRoot.querySelector('p').firstChild; 66 getSelection().removeAllRanges(); 67 getSelection().collapse(container, 0); 68 getSelection().extend(textNode, 5); 69 const ranges = getSelection().getComposedRanges({ shadowRoots: [shadowRoot] }); 70 assert_equals(ranges.length, 1); 71 assert_equals(ranges[0].startContainer, container); 72 assert_equals(ranges[0].startOffset, 0); 73 assert_equals(ranges[0].endContainer, container); 74 assert_equals(ranges[0].endOffset, 0); 75 assert_true(ranges[0].collapsed); 76 }, 'extend abort steps when called with a disconnected node inside a shadow tree'); 77 78 container.remove(); 79 80 </script> 81 </body> 82 </html>