selection-value-interactions.html (7823B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title></title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <div id=log></div> 7 <div id=target></div> 8 <script> 9 var target = document.getElementById("target"); 10 var sometext = "something"; 11 var shorttext = "abc"; 12 var elemData = [ 13 { 14 desc: "textarea not in body", 15 factory: () => document.createElement("textarea"), 16 }, 17 { 18 desc: "input not in body", 19 factory: () => document.createElement("input"), 20 }, 21 { 22 desc: "textarea in body", 23 factory: () => document.body.appendChild(document.createElement("textarea")), 24 }, 25 { 26 desc: "input in body", 27 factory: () => document.body.appendChild(document.createElement("input")), 28 }, 29 { 30 desc: "textarea in body with parsed default value", 31 factory: () => { 32 target.innerHTML = "<textarea>abcdefghij</textarea>" 33 return target.querySelector("textarea"); 34 }, 35 }, 36 { 37 desc: "input in body with parsed default value", 38 factory: () => { 39 target.innerHTML = "<input value='abcdefghij'>" 40 return target.querySelector("input"); 41 }, 42 }, 43 { 44 desc: "focused textarea", 45 factory: () => { 46 var t = document.body.appendChild(document.createElement("textarea")); 47 t.focus(); 48 return t; 49 }, 50 }, 51 { 52 desc: "focused input", 53 factory: () => { 54 var i = document.body.appendChild(document.createElement("input")); 55 i.focus(); 56 return i; 57 }, 58 }, 59 { 60 desc: "focused then blurred textarea", 61 factory: () => { 62 var t = document.body.appendChild(document.createElement("textarea")); 63 t.focus(); 64 t.blur(); 65 return t; 66 }, 67 }, 68 { 69 desc: "focused then blurred input", 70 factory: () => { 71 var i = document.body.appendChild(document.createElement("input")); 72 i.focus(); 73 i.blur() 74 return i; 75 }, 76 }, 77 ]; 78 79 for (var data of elemData) { 80 test(function() { 81 var el = data.factory(); 82 this.add_cleanup(() => el.remove()); 83 assert_equals(el.selectionStart, 0, 84 `Cursor start should be at beginning of ${data.desc}`); 85 assert_equals(el.selectionEnd, 0, 86 `Cursor end should be at beginning of ${data.desc}`); 87 }, `cursor location for initial value of ${data.desc}`); 88 } 89 90 for (var data of elemData) { 91 test(function() { 92 var el = data.factory(); 93 this.add_cleanup(() => el.remove()); 94 el.defaultValue = sometext; 95 // The "focused or has been focused" case behaves differently. 96 if (data.desc.includes("focused")) { 97 assert_equals(el.selectionStart, el.value.length, 98 `Cursor start should be at end of ${data.desc}`); 99 assert_equals(el.selectionEnd, el.value.length, 100 `Cursor end should be at end of ${data.desc}`); 101 } else { 102 assert_equals(el.selectionStart, 0, 103 `Cursor start should be at beginning of ${data.desc}`); 104 assert_equals(el.selectionEnd, 0, 105 `Cursor end should be at beginning of ${data.desc}`); 106 } 107 }, `cursor location after defaultValue set of ${data.desc}`); 108 } 109 110 for (var data of elemData) { 111 test(function() { 112 var el = data.factory(); 113 this.add_cleanup(() => el.remove()); 114 el.selectionStart = el.selectionStart; 115 el.defaultValue = sometext; 116 // The focused case behaves differently. 117 if (data.desc.includes("focused")) { 118 assert_equals(el.selectionStart, el.value.length, 119 `Cursor start should be at end of ${data.desc}`); 120 assert_equals(el.selectionEnd, el.value.length, 121 `Cursor end should be at end of ${data.desc}`); 122 } else { 123 assert_equals(el.selectionStart, 0, 124 `Cursor start should be at beginning of ${data.desc}`); 125 assert_equals(el.selectionEnd, 0, 126 `Cursor end should be at beginning of ${data.desc}`); 127 } 128 }, `cursor location after defaultValue set after no-op selectionStart set of ${data.desc}`); 129 } 130 131 for (var data of elemData) { 132 test(function() { 133 var el = data.factory(); 134 this.add_cleanup(() => el.remove()); 135 el.value = sometext; 136 assert_equals(el.selectionStart, sometext.length, 137 `Cursor start should be at end of ${data.desc}`); 138 assert_equals(el.selectionEnd, sometext.length, 139 `Cursor end should be at end of ${data.desc}`); 140 }, `cursor location after value set of ${data.desc}`); 141 } 142 143 for (var data of elemData) { 144 test(function() { 145 var el = data.factory(); 146 this.add_cleanup(() => el.remove()); 147 assert_true(sometext.length > 8, 148 "sometext too short, test won't work right"); 149 el.defaultValue = sometext; 150 el.selectionStart = 1; 151 el.selectionEnd = 8; 152 assert_equals(el.selectionStart, 1, "We just set selectionStart!"); 153 assert_equals(el.selectionEnd, 8, "We just set selectionEnd!"); 154 assert_true(shorttext.length > 1, 155 "shorttext too short, test won't work right"); 156 assert_true(shorttext.length < 8, 157 "shorttext too long, test won't work right"); 158 el.defaultValue = shorttext; 159 // The "focused or has been focused" case behaves differently. 160 if (data.desc.includes("focused")) { 161 assert_equals(el.selectionStart, el.value.length, 162 `Cursor start should be at end of ${data.desc}`); 163 assert_equals(el.selectionEnd, el.value.length, 164 `Cursor end should be at end of ${data.desc}`); 165 } else { 166 if (el.tagName.toLowerCase() === "textarea") { 167 assert_equals(el.selectionStart, 0, 168 "Selection should be collapsed to the beginning"); 169 assert_equals(el.selectionEnd, 0, 170 "Selection should be collapsed to the beginning"); 171 } else { 172 assert_equals(el.selectionStart, 1, 173 "Shouldn't have moved selection start"); 174 assert_equals(el.selectionEnd, shorttext.length, 175 "Should have adjusted selection end"); 176 } 177 } 178 }, `selection location after defaultValue set to shorter than selectionEnd of ${data.desc}`); 179 } 180 181 for (var data of elemData) { 182 test(function() { 183 var el = data.factory(); 184 this.add_cleanup(() => el.remove()); 185 assert_true(sometext.length > 8, 186 "sometext too short, test won't work right"); 187 el.defaultValue = sometext; 188 el.selectionStart = 5; 189 el.selectionEnd = 8; 190 assert_equals(el.selectionStart, 5, "We just set selectionStart!"); 191 assert_equals(el.selectionEnd, 8, "We just set selectionEnd!"); 192 assert_true(shorttext.length < 5, 193 "shorttext too long, test won't work right"); 194 el.defaultValue = shorttext; 195 // The "focused or has been focused" case behaves differently. 196 if (data.desc.includes("focused")) { 197 assert_equals(el.selectionStart, el.value.length, 198 `Cursor start should be at end of ${data.desc}`); 199 assert_equals(el.selectionEnd, el.value.length, 200 `Cursor end should be at end of ${data.desc}`); 201 } else { 202 if (el.tagName.toLowerCase() === "textarea") { 203 assert_equals(el.selectionStart,0, 204 "Selection should be collapsed to the beginning"); 205 assert_equals(el.selectionEnd, 0, 206 "Selection should be collapsed to the beginning"); 207 } else { 208 assert_equals(el.selectionStart, shorttext.length, 209 "Should have adjusted selection start"); 210 assert_equals(el.selectionEnd, shorttext.length, 211 "Should have adjusted selection end"); 212 } 213 } 214 }, `selection location after defaultValue set to shorter than selectionStart of ${data.desc}`); 215 } 216 217 </script>