focus-contained.html (2585B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Focus-related events should fire in the correct order</title> 6 <link rel="help" href="https://w3c.github.io/uievents/#events-focusevent-event-order"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="/uievents/resources/eventrecorder.js"></script> 13 </head> 14 15 <body> 16 <ol> 17 <li>Click into the text input.</li> 18 <li>Click just below the text input.</li> 19 <li>Click into the text input again.</li> 20 <li>Click the "Done" button.</li> 21 </ol> 22 <div id="a" tabindex="1" style="width:400px; height:300px"> 23 <br /><br /><br /> 24 <input type="text", id="b"></div> 25 </div> 26 <button type="button" id="done">Done</button> 27 </body> 28 29 <script> 30 setup({explicit_timeout: true}); 31 function stopPropagation(e) { 32 e.stopPropagation(); 33 } 34 var relevantEvents = [ 35 "focus", 36 "blur", 37 "focusin", 38 "focusout" 39 ]; 40 window.onload = async function () { 41 var a = document.getElementById("a"); 42 var b = document.getElementById("b"); 43 var button = document.getElementById("done"); 44 var inputs = [a, b]; 45 EventRecorder.configure({ 46 objectMap: { 47 "a": a, 48 "b": b, 49 } 50 }); 51 52 EventRecorder.addEventListenersForNodes(relevantEvents, inputs, stopPropagation); 53 var expected = [ 54 {type: "focus", target: "b"}, 55 {type: "focusin", target: "b"}, 56 {type: "blur", target: "b"}, 57 {type: "focusout", target: "b"}, 58 {type: "focus", target: "a"}, 59 {type: "focusin", target: "a"}, 60 {type: "blur", target: "a"}, 61 {type: "focusout", target: "a"}, 62 {type: "focus", target: "b"}, 63 {type: "focusin", target: "b"}, 64 {type: "blur", target: "b"}, 65 {type: "focusout", target: "b"} 66 ]; 67 68 async_test(function(t) { 69 button.addEventListener("click", function () { 70 t.step(function () { 71 assert_true(EventRecorder.checkRecords(expected)); 72 t.done(); 73 }); 74 }, false); 75 }, "Focus-related events should fire in the correct order"); 76 EventRecorder.start(); 77 78 await new test_driver.Actions() 79 .pointerMove(0, 0, {origin: b}) 80 .pointerDown() 81 .pointerUp() 82 .pointerMove(0, 0, {origin: a}) 83 .pointerDown() 84 .pointerUp() 85 .pointerMove(0, 0, {origin: b}) 86 .pointerDown() 87 .pointerUp() 88 .pointerMove(0, 0, {origin: button}) 89 .pointerDown() 90 .pointerUp() 91 .send(); 92 }; 93 </script> 94 </html>