stringifier_editable_element.tentative.html (5564B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Selection: stringifier for editable elements</title> 4 <!-- 5 There are two open issues about how this should behave 6 https://github.com/w3c/selection-api/issues/83 7 https://github.com/w3c/selection-api/issues/7 8 --> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="/resources/testdriver-actions.js"></script> 14 <body> 15 <input id="dummyInput"></input> 16 17 <input id="textInput" value="This is a text"> 18 <textarea id="textArea" rows="5" cols="40"> 19 20 Line one 21 Line two 22 23 </textarea> 24 25 <button id="button">Button</button> 26 <a id="anchor">Anchor</a> 27 <span id="text">Text</span> 28 </body> 29 <script> 30 31 function reset() { 32 window.getSelection().empty(); 33 dummyInput.focus(); 34 } 35 36 window.onload = () => { 37 test(() => { 38 reset(); 39 textInput.select(); 40 41 assert_equals(document.activeElement, textInput); 42 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text"); 43 }, "select the entire input should result all the content"); 44 45 test(() => { 46 reset(); 47 textInput.select(); 48 dummyInput.focus(); 49 50 assert_equals(document.activeElement, dummyInput); 51 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), ""); 52 }, "toString() should return empty when the focus is not on the editable content"); 53 54 test(() => { 55 reset(); 56 57 textInput.selectionStart = 3; 58 textInput.selectionEnd = 7; 59 60 assert_equals(document.activeElement, dummyInput); 61 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), ""); 62 63 textInput.focus(); 64 assert_equals(document.activeElement, textInput); 65 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "s is"); 66 }, "toString() works with selectionStart and selectionEnd for input"); 67 68 test(() => { 69 reset(); 70 71 textArea.select(); 72 73 assert_equals(document.activeElement, textArea); 74 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "\n Line one\n Line two\n\n "); 75 }, "select the entire textarea should result all the content"); 76 77 test(() => { 78 reset(); 79 80 textArea.selectionStart = 3; 81 textArea.selectionEnd = 12; 82 83 assert_equals(document.activeElement, dummyInput); 84 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), ""); 85 86 textArea.focus(); 87 assert_equals(document.activeElement, textArea); 88 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "Line one\n"); 89 }, "toString() works with selectionStart and selectionEnd for textarea"); 90 91 test(() => { 92 reset(); 93 textInput.select(); 94 95 button.focus(); 96 97 assert_equals(document.activeElement, button); 98 99 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text"); 100 }, "toString() works even if a click just occured on a button"); 101 102 promise_test((t) => { 103 reset(); 104 textInput.select(); 105 return new Promise(r => { 106 anchor.addEventListener("click", function() { 107 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text"); 108 r(); 109 }, {once: true}); 110 111 anchor.click(); 112 }); 113 }, "toString() works for programatically calling .click() on anchor (without href)"); 114 115 promise_test((t) => { 116 reset(); 117 textInput.select(); 118 return new Promise(r => { 119 anchor.addEventListener("click", function() { 120 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), ""); 121 r(); 122 }, {once : true}); 123 124 test_driver.click(anchor); 125 }); 126 }, "toString() doesn't work for actual clicking the anchor (without href)"); 127 128 promise_test((t) => { 129 reset(); 130 textInput.select(); 131 anchor.href = "#"; 132 return new Promise(r => { 133 anchor.addEventListener("click", function() { 134 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text"); 135 r(); 136 }, {once: true}); 137 138 anchor.click(); // anchor has href now 139 }); 140 }, "toString() works for programatically calling .click() on anchor (with href)"); 141 142 promise_test((t) => { 143 reset(); 144 textInput.select(); 145 return new Promise(r => { 146 anchor.addEventListener("click", function() { 147 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text"); 148 r(); 149 }, {once : true}); 150 151 test_driver.click(anchor); // anchor has href now 152 }); 153 }, "toString() also works for actual clicking the anchor (with href)"); 154 155 promise_test((t) => { 156 reset(); 157 textInput.select(); 158 159 return new Promise(async r => { 160 anchor.addEventListener("click", function() { 161 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), ""); 162 r(); 163 }, {once : true}); 164 165 await test_driver.click(text); 166 test_driver.click(anchor); 167 }); 168 }, "Click on a text prior to toString() moves the seleciton"); 169 170 promise_test((t) => { 171 reset(); 172 textInput.select(); 173 174 text.style = "user-select: none"; 175 return new Promise(async r => { 176 anchor.addEventListener("click", function() { 177 assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text"); 178 r(); 179 }, {once : true}); 180 181 await test_driver.click(text); 182 test_driver.click(anchor); 183 }); 184 }, "Click on a `user-select:none` text prior to toString() doesn't move the seleciton"); 185 }; 186 </script> 187 </html>