selectionchange.html (5702B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Test selectionchange events from text controls</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="stylesheet" href="/fonts/ahem.css"> 7 <style> 8 input, 9 textarea { 10 font: 16px/1 Ahem; 11 } 12 </style> 13 14 <input id="input" width="200"><br> 15 <textarea id="textarea" width="200"></textarea> 16 17 <script> 18 class SelectionChangeCollector { 19 /** 20 * @param {HTMLElement} target 21 */ 22 constructor(target) { 23 this.target = target; 24 this.events = []; 25 target.addEventListener("selectionchange", ev => { 26 this.events.push(ev); 27 }); 28 } 29 clear() { 30 this.events.length = 0; 31 } 32 } 33 34 const data = { 35 collectors: [ 36 new SelectionChangeCollector(input), 37 new SelectionChangeCollector(input.cloneNode()), 38 new SelectionChangeCollector(textarea), 39 new SelectionChangeCollector(textarea.cloneNode(true)), 40 ], 41 async initialize() { 42 for (const collector of this.collectors) { 43 collector.target.value = "XXXXXXXXXXXXXXXXXXX"; 44 collector.target.blur(); 45 collector.target.setSelectionRange(0, 0); 46 } 47 await this.spin(); 48 for (const collector of this.collectors) { 49 collector.clear(); 50 } 51 }, 52 spin() { 53 return new Promise(setTimeout); 54 }, 55 async assert_empty_spin() { 56 // firing selectionchange must be asynchronous 57 for (const collector of this.collectors) { 58 assert_equals(collector.events.length, 0); 59 } 60 await this.spin(); 61 } 62 }; 63 64 for (const collector of data.collectors) { 65 const target = collector.target; 66 const name = `the ${!target.parentNode ? "disconnected " : ""}${target.localName} element`; 67 68 promise_test(async () => { 69 await data.initialize(); 70 71 target.selectionStart = 1; 72 73 await data.assert_empty_spin(); 74 assert_equals(collector.events.length, 1); 75 }, `Modifying selectionStart value of ${name}`); 76 77 promise_test(async () => { 78 await data.initialize(); 79 80 target.selectionEnd = 1; 81 82 await data.assert_empty_spin(); 83 assert_equals(collector.events.length, 1); 84 }, `Modifying selectionEnd value of ${name}`); 85 86 promise_test(async () => { 87 await data.initialize(); 88 89 target.setSelectionRange(0, 4); 90 91 await data.assert_empty_spin(); 92 assert_equals(collector.events.length, 1); 93 }, `Calling setSelectionRange() on ${name}`); 94 95 promise_test(async () => { 96 await data.initialize(); 97 98 target.select(); 99 100 await data.assert_empty_spin(); 101 assert_equals(collector.events.length, 1); 102 }, `Calling select() on ${name}`); 103 104 promise_test(async () => { 105 await data.initialize(); 106 107 target.setRangeText("newmiddle", 2, 3, "select"); 108 109 await data.assert_empty_spin(); 110 assert_equals(collector.events.length, 1); 111 }, `Calling setRangeText() on ${name}`); 112 113 promise_test(async () => { 114 await data.initialize(); 115 116 target.selectionStart = 0; 117 118 await data.assert_empty_spin(); 119 assert_equals(collector.events.length, 0); 120 }, `Setting initial zero selectionStart value on ${name}`); 121 122 promise_test(async () => { 123 await data.initialize(); 124 125 target.selectionStart = 2; 126 target.selectionStart = 2; 127 128 await data.assert_empty_spin(); 129 assert_equals(collector.events.length, 1); 130 }, `Setting the same selectionStart value twice on ${name}`); 131 132 promise_test(async () => { 133 await data.initialize(); 134 135 target.selectionEnd = 0; 136 137 await data.assert_empty_spin(); 138 assert_equals(collector.events.length, 0); 139 }, `Setting initial zero selectionEnd value on ${name}`); 140 141 promise_test(async () => { 142 await data.initialize(); 143 144 target.selectionEnd = 2; 145 target.selectionEnd = 2; 146 147 await data.assert_empty_spin(); 148 assert_equals(collector.events.length, 1); 149 }, `Setting the same selectionEnd value twice on ${name}`); 150 151 promise_test(async () => { 152 await data.initialize(); 153 154 target.setSelectionRange(0, 0); 155 156 await data.assert_empty_spin(); 157 assert_equals(collector.events.length, 0); 158 }, `Setting initial zero selection range on ${name}`); 159 160 promise_test(async () => { 161 await data.initialize(); 162 163 target.setSelectionRange(3, 3); 164 target.setSelectionRange(3, 3); 165 166 await data.assert_empty_spin(); 167 assert_equals(collector.events.length, 1); 168 }, `Setting the same selection range twice on ${name}`); 169 170 promise_test(async () => { 171 await data.initialize(); 172 173 target.select(); 174 target.select(); 175 176 await data.assert_empty_spin(); 177 assert_equals(collector.events.length, 1); 178 }, `Calling select() twice on ${name}`); 179 180 promise_test(async () => { 181 await data.initialize(); 182 183 target.select(); 184 target.setRangeText("foo", 2, 6); 185 186 await data.assert_empty_spin(); 187 assert_equals(collector.events.length, 1); 188 }, `Calling setRangeText() after select() on ${name}`); 189 190 promise_test(async () => { 191 await data.initialize(); 192 193 target.select(); 194 target.setRangeText("", 10, 12); 195 target.setRangeText("", 10, 12); 196 target.setRangeText("", 10, 12); 197 198 await data.assert_empty_spin(); 199 assert_equals(collector.events.length, 1); 200 }, `Calling setRangeText() repeatedly on ${name}`); 201 202 promise_test(async () => { 203 await data.initialize(); 204 205 target.value = ""; 206 target.setRangeText("foo"); 207 208 await data.assert_empty_spin(); 209 assert_equals(collector.events.length, 0); 210 }, `Calling setRangeText() on empty ${name}`); 211 } 212 </script>