input-change-event-properties.html (2885B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Test the properties of input and change events</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 <fieldset id="clickable"> 11 <input type="checkbox"> 12 <input type="radio"> 13 </fieldset> 14 15 <fieldset id="typeable"> 16 <input type="text"> 17 <input type="search"> 18 <input type="tel"> 19 <input type="url"> 20 <input type="email"> 21 <input type="password"> 22 <input type="number"> 23 <textarea></textarea> 24 </fieldset> 25 26 <select> 27 <option>1</option> 28 <option>2</option> 29 </select> 30 31 <!-- Not going to test the more complicated input types like date or color for now... --> 32 33 <button id="click-me-to-unfocus-other-things">Clickable</button> 34 35 <script> 36 "use strict"; 37 const clickMeToUnfocusOtherThings = document.querySelector("#click-me-to-unfocus-other-things"); 38 39 for (const el of document.querySelector("#clickable").children) { 40 test(() => { 41 let inputEvent, changeEvent; 42 el.oninput = e => inputEvent = e; 43 el.onchange = e => changeEvent = e; 44 45 el.click(); 46 47 assert_event(inputEvent, { bubbles: true, cancelable: false, composed: true }); 48 assert_event(changeEvent, { bubbles: true, cancelable: false, composed: false }); 49 }, `${el.outerHTML} click()`); 50 } 51 52 for (const el of document.querySelector("#typeable").children) { 53 promise_test(async () => { 54 let inputEvent, changeEvent; 55 el.oninput = e => inputEvent = e; 56 el.onchange = e => changeEvent = e; 57 58 await test_driver.send_keys(el, "1"); // has to be a number so <input type=number> works 59 await test_driver.click(clickMeToUnfocusOtherThings); 60 61 assert_event(inputEvent, { bubbles: true, cancelable: false, composed: true }); 62 assert_event(changeEvent, { bubbles: true, cancelable: false, composed: false }); 63 }, `${el.outerHTML} typing`); 64 } 65 66 promise_test(async () => { 67 const el = document.querySelector("select"); 68 69 let inputEvent, changeEvent; 70 el.oninput = e => inputEvent = e; 71 el.onchange = e => changeEvent = e; 72 73 // TODO: this doesn't seem to work in Safari/on Macs. Or maybe Safari is legitimately failing. 74 // Someone with a Mac should investigate. 75 await test_driver.send_keys(el, "\uE015"); // down arrow key 76 await test_driver.click(clickMeToUnfocusOtherThings); 77 78 assert_event(inputEvent, { bubbles: true, cancelable: false, composed: true }); 79 assert_event(changeEvent, { bubbles: true, cancelable: false, composed: false }); 80 }, `<select> pressing down arrow`); 81 82 function assert_event(e, { bubbles, cancelable, composed }) { 83 assert_equals(e.bubbles, bubbles, `${e.type} bubbles`); 84 assert_equals(e.cancelable, cancelable, `${e.type} cancelable`); 85 assert_equals(e.composed, composed, `${e.type} composed`); 86 } 87 </script>