Selection-direction.html (2995B)
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 direction should return none, forwad, or backward"> 6 <link rel="help" href="https://w3c.github.io/selection-api/#dom-selection-direction"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src='/resources/testdriver-vendor.js'></script> 12 <div id="container"></div> 13 <script> 14 15 test(() => { 16 getSelection().removeAllRanges(); 17 assert_equals(getSelection().direction, 'none'); 18 }, 'direction returns "none" when there is no selection'); 19 20 test(() => { 21 container.innerHTML = 'hello, world'; 22 getSelection().setBaseAndExtent(container.firstChild, 0, container.firstChild, 5); 23 assert_equals(getSelection().direction, 'forward'); 24 }, 'direction returns "forward" when there is a forward-direction selection in the document tree'); 25 26 test(() => { 27 container.innerHTML = 'hello, world'; 28 getSelection().setBaseAndExtent(container.firstChild, 4, container.firstChild, 3); 29 assert_equals(getSelection().direction, 'backward'); 30 }, 'direction returns "backward" when there is a backward-direction selection in the document tree'); 31 32 test(() => { 33 container.innerHTML = 'a<div id="host"></div>b'; 34 const shadowRoot = host.attachShadow({mode: 'closed'}); 35 shadowRoot.innerHTML = 'hello, world'; 36 getSelection().setBaseAndExtent(shadowRoot.firstChild, 0, shadowRoot.firstChild, 5); 37 assert_equals(getSelection().direction, 'forward'); 38 }, 'direction returns "forward" when there is a forward selection in the shadow tree'); 39 40 test(() => { 41 container.innerHTML = 'a<div id="host"></div>b'; 42 const shadowRoot = host.attachShadow({mode: 'closed'}); 43 shadowRoot.innerHTML = 'hello, world'; 44 getSelection().setBaseAndExtent(shadowRoot.firstChild, 5, shadowRoot.firstChild, 3); 45 assert_equals(getSelection().direction, 'backward'); 46 }, 'direction returns "backward" when there is a backward selection in the shadow tree'); 47 48 test(() => { 49 container.innerHTML = 'a<div id="host"></div>b'; 50 const shadowRoot = host.attachShadow({mode: 'closed'}); 51 shadowRoot.innerHTML = 'hello, world'; 52 getSelection().setBaseAndExtent(shadowRoot.firstChild, 7, container, 2); 53 assert_equals(getSelection().direction, 'forward'); 54 }, 'direction returns "forward" when there is a forward selection that crosses shadow boundaries'); 55 56 test(() => { 57 container.innerHTML = 'a<div id="host"></div>b'; 58 const shadowRoot = host.attachShadow({mode: 'closed'}); 59 shadowRoot.innerHTML = 'hello, world'; 60 getSelection().setBaseAndExtent(shadowRoot.firstChild, 7, container, 1); 61 assert_equals(getSelection().direction, 'backward'); 62 }, 'direction returns "backward" when there is a forward selection that crosses shadow boundaries'); 63 64 </script> 65 </body> 66 </html>