beforeinput.tentative.html (1887B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Test the onbeforeinput attribute</title> 4 <meta name="timeout" content="long"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 10 <div id="container"></div> 11 <script> 12 const container = document.getElementById("container"); 13 const events = new Map(); 14 15 function handleEvent(event) { 16 if (!events.has(event.target)) { 17 events.set(event.target, []); 18 } 19 events.get(event.target).push(event); 20 } 21 22 let onInputFired = null; 23 24 const onBeforeInput = handleEvent; 25 const onInput = (event) => { 26 handleEvent(event); 27 onInputFired() 28 } 29 30 let elems = []; 31 for (let type of ["text", "search", "tel", "url", "email", "password", "number"]) { 32 elems.push(`<input type=${type} onbeforeinput="onBeforeInput(event)" oninput="onInput(event)"> 33 <input type=${type}> 34 `); 35 } 36 elems.push(`<textarea onbeforeinput="onBeforeInput(event)" oninput="onInput(event)"></textarea> 37 <textarea></textarea>`) 38 container.innerHTML = elems.join(""); 39 40 for (const element of container.children) { 41 promise_test(async t => { 42 if (!element.hasAttribute("onbeforeinput")) { 43 element.onbeforeinput = e => onBeforeInput(e); 44 element.oninput = e => onInput(e); 45 }; 46 47 let afterOnInput = new Promise(resolve => {onInputFired = resolve}); 48 await test_driver.send_keys(element, "1"); // has to be a number so <input type=number> works 49 // Ensure we're in the post-update state 50 await afterOnInput; 51 52 assert_true(events.has(element), "Got events for element"); 53 let elementEvents = events.get(element); 54 55 assert_array_equals(elementEvents.map(event => event.type), ["beforeinput", "input"], "Got expected events"); 56 }, `${element.outerHTML}`); 57 } 58 </script>