input-events-spin-button-click-on-number-input-delete-document.html (2073B)
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 <iframe id="iframe"></iframe> 12 <script> 13 const frame = document.getElementById("iframe"); 14 15 function loadIframe(doc) { 16 return new Promise((resolve) => { 17 frame.addEventListener("load", resolve); 18 frame.srcdoc = doc; 19 }); 20 } 21 22 promise_test(async function () { 23 await loadIframe( 24 "<input type='number' style='width: 100px; height: 20px' value='5'>" 25 ); 26 const inputElement = frame.contentDocument.querySelector("input"); 27 28 let events = []; 29 30 inputElement.addEventListener("beforeinput", () => { 31 frame.remove(); 32 events.push("beforeinput"); 33 }); 34 inputElement.addEventListener("input", () => { 35 events.push("input"); 36 }); 37 inputElement.addEventListener("change", () => { 38 events.push("change"); 39 }); 40 41 assert_equals(inputElement.value, "5", "Original value should be 5"); 42 43 // Roughly get the offset to the spin up arrow button's center point within 44 // the iframe's viewport. Note that this is fragile and might need specific 45 // coordinates for each browser and maybe platform. 46 const rect = inputElement.getBoundingClientRect(); 47 const x = Math.round(rect.x + rect.width - 5); 48 const y = Math.round(rect.y + (3 * rect.height) / 4); 49 50 const actions = new test_driver.Actions() 51 .setContext(frame.contentWindow) 52 .pointerMove(x, y, { origin: "viewport" }) 53 .pointerDown() 54 .pointerUp(); 55 await actions.send(); 56 57 assert_equals(inputElement.value, "6", "Value should increase after clicking the up arrow"); 58 assert_array_equals(events, ['beforeinput']); 59 assert_false(document.body.contains(frame)); 60 }, "Number input should not crash and not fire subsequent events when event handler removes document"); 61 </script> 62 </body> 63 </html>