focus.html (2657B)
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="author" title="Chris Rebert" href="http://chrisrebert.com"> 7 <link rel="help" href="https://w3c.github.io/uievents/#events-focusevent-event-order"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/uievents/resources/eventrecorder.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 </head> 15 16 <body> 17 <ol> 18 <li>Click into the first text input.</li> 19 <li>Click into the second text input.</li> 20 <li>Click the "Done" button.</li> 21 </ol> 22 <input type="text" id="a" value="First"> 23 <br> 24 <input type="text" id="b" value="Second"> 25 <br> 26 <button type="button" id="done">Done</button> 27 </body> 28 29 <script> 30 setup({explicit_timeout: true}); 31 function stopPropagation(e) { 32 if (event.type == "focusin" || event.type == "focusout") 33 assert_true(event.bubbles); 34 e.stopPropagation(); 35 } 36 var relevantEvents = [ 37 "focus", 38 "blur", 39 "focusin", 40 "focusout" 41 ]; 42 window.onload = function () { 43 var a = document.getElementById("a"); 44 var b = document.getElementById("b"); 45 var button = document.getElementById("done"); 46 var inputs = [a, b]; 47 var actions_promise; 48 EventRecorder.configure({ 49 objectMap: { 50 "a": a, 51 "b": b, 52 } 53 }); 54 55 EventRecorder.addEventListenersForNodes(relevantEvents, inputs, stopPropagation); 56 var expected = [ 57 {type: "focus", target: "a"}, 58 {type: "focusin", target: "a"}, 59 {type: "blur", target: "a"}, 60 {type: "focusout", target: "a"}, 61 {type: "focus", target: "b"}, 62 {type: "focusin", target: "b"}, 63 {type: "blur", target: "b"}, 64 {type: "focusout", target: "b"} 65 ]; 66 67 async_test(function(t) { 68 button.addEventListener("click", function () { 69 t.step(function () { 70 assert_true(EventRecorder.checkRecords(expected)); 71 // Make sure the test finishes after all the input actions are completed. 72 actions_promise.then( () => { 73 t.done(); 74 }); 75 }); 76 }, false); 77 }, "Focus-related events should fire in the correct order"); 78 EventRecorder.start(); 79 80 // Inject mouse inputs. 81 actions_promise = new test_driver.Actions() 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>