| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Test selectionchange events from text controls</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel="stylesheet" href="/fonts/ahem.css"> |
| <style> |
| input, |
| textarea { |
| font: 16px/1 Ahem; |
| } |
| </style> |
| |
| <input id="input" value="XXXXXXXXXXXXXXXXXXX" width="200"><br> |
| <textarea id="textarea" width="200">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea> |
| |
| <script> |
| class SelectionChangeCollector { |
| /** |
| * @param {HTMLElement} target |
| */ |
| constructor(target) { |
| this.target = target; |
| this.events = []; |
| target.addEventListener("selectionchange", ev => { |
| this.events.push(ev); |
| }); |
| } |
| clear() { |
| this.events.length = 0; |
| } |
| } |
| |
| const data = { |
| collectors: [ |
| new SelectionChangeCollector(input), |
| new SelectionChangeCollector(input.cloneNode()), |
| new SelectionChangeCollector(textarea), |
| new SelectionChangeCollector(textarea.cloneNode(true)), |
| ], |
| async initialize() { |
| for (const collector of this.collectors) { |
| collector.target.blur(); |
| collector.target.setSelectionRange(0, 0); |
| } |
| await this.spin(); |
| for (const collector of this.collectors) { |
| collector.clear(); |
| } |
| }, |
| spin() { |
| return new Promise(setTimeout); |
| }, |
| async assert_empty_spin() { |
| // firing selectionchange must be asynchronous |
| for (const collector of this.collectors) { |
| assert_equals(collector.events.length, 0); |
| } |
| await this.spin(); |
| } |
| }; |
| |
| for (const collector of data.collectors) { |
| const target = collector.target; |
| const name = `the ${!target.parentNode ? "disconnected " : ""}${target.localName} element`; |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.selectionStart = 1; |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 1); |
| }, `Modifying selectionStart value of ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.selectionEnd = 1; |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 1); |
| }, `Modifying selectionEnd value of ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.setSelectionRange(0, 4); |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 1); |
| }, `Calling setSelectionRange() on ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.select(); |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 1); |
| }, `Calling select() on ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.selectionStart = 0; |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 0); |
| }, `Setting initial zero selectionStart value on ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.selectionStart = 2; |
| target.selectionStart = 2; |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 1); |
| }, `Setting the same selectionStart value twice on ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.selectionEnd = 0; |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 0); |
| }, `Setting initial zero selectionEnd value on ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.selectionEnd = 2; |
| target.selectionEnd = 2; |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 1); |
| }, `Setting the same selectionEnd value twice on ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.setSelectionRange(0, 0); |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 0); |
| }, `Setting initial zero selection range on ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.setSelectionRange(3, 3); |
| target.setSelectionRange(3, 3); |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 1); |
| }, `Setting the same selection range twice on ${name}`); |
| |
| promise_test(async () => { |
| await data.initialize(); |
| |
| target.select(); |
| target.select(); |
| |
| await data.assert_empty_spin(); |
| assert_equals(collector.events.length, 1); |
| }, `Calling select() twice on ${name}`); |
| } |
| </script> |