input-events-spin-button-click-on-number-input.html (1428B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 </head> 10 <body> 11 <input type="number" id="number_input"> 12 <script> 13 promise_test(async function() { 14 const inputElement = document.getElementById("number_input"); 15 16 let events = []; 17 18 inputElement.addEventListener("beforeinput", () => { 19 events.push("beforeinput"); 20 }); 21 inputElement.addEventListener("input", () => { 22 events.push("input"); 23 }); 24 inputElement.addEventListener("change", () => { 25 events.push("change"); 26 }); 27 28 // Roughly get the offset to the spin up arrow button's center point within 29 // the iframe's viewport. Note that this is fragile and might need specific 30 // coordinates for each browser and maybe platform. 31 const rect = inputElement.getBoundingClientRect(); 32 const x = Math.round(rect.x + rect.width - 10); 33 const y = Math.round(rect.y + rect.height / 4); 34 35 const actions = new test_driver.Actions() 36 .pointerMove(x, y, { origin: "viewport" }) 37 .pointerDown() 38 .pointerUp(); 39 await actions.send(); 40 41 assert_array_equals(events, ['beforeinput','input','change']); 42 }, "Number input should fire beforeinput event before the input and change event"); 43 </script> 44 </body> 45 </html>