input-events-spin-button-click-on-number-input-prevent-default.html (1497B)
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", (e) => { 19 e.preventDefault(); 20 events.push("beforeinput"); 21 }); 22 inputElement.addEventListener("input", () => { 23 events.push("input"); 24 }); 25 inputElement.addEventListener("change", () => { 26 events.push("change"); 27 }); 28 29 // Roughly get the offset to the spin up arrow button's center point within 30 // the iframe's viewport. Note that this is fragile and might need specific 31 // coordinates for each browser and maybe platform. 32 const rect = inputElement.getBoundingClientRect(); 33 const x = rect.x + rect.width - 10; 34 const y = rect.y + Math.round(rect.height / 4); 35 36 const actions = new test_driver.Actions() 37 .pointerMove(x, y, { origin: "viewport" }) 38 .pointerDown() 39 .pointerUp(); 40 await actions.send(); 41 42 assert_array_equals(events, ['beforeinput']); 43 }, "Number input should not fire input and change event if the beforeinput event is default prevented"); 44 </script> 45 </body> 46 </html>