click-order.html (2514B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Click-related events should fire in the correct order</title> 6 <link rel="help" href="https://w3c.github.io/uievents/#events-clickevent-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 <body> 15 <ol> 16 <li>Double-click into the blue area.</li> 17 <li>Click the "Done" button.</li> 18 </ol> 19 <div id="blue" style="width:400px; height:300px; background-color: blue;"></div> 20 <button type="button" id="done">Done</button> 21 </body> 22 <script> 23 setup({explicit_timeout: true}); 24 25 function bubbles(e) { 26 assert_true(e.bubbles); 27 } 28 29 var relevantEvents = [ 30 "mousedown", 31 "mouseup", 32 "mousemove", 33 "click", 34 "dblclick" 35 ]; 36 37 window.onload = async function () { 38 var blue = document.getElementById("blue"); 39 var button = document.getElementById("done"); 40 var inputs = [blue]; 41 EventRecorder.configure({ 42 mergeEventTypes: ["mousemove"], 43 objectMap: { 44 "blue": blue 45 } 46 }); 47 48 EventRecorder.addEventListenersForNodes(relevantEvents, inputs, bubbles); 49 var expected = [ 50 {type: "mousemove", target: "blue", optional: true}, 51 {type: "mousedown", target: "blue"}, 52 {type: "mousemove", target: "blue", optional: true}, 53 {type: "mouseup", target: "blue"}, 54 {type: "click", target: "blue"}, 55 {type: "mousemove", target: "blue", optional: true}, 56 {type: "mousedown", target: "blue"}, 57 {type: "mousemove", target: "blue", optional: true}, 58 {type: "mouseup", target: "blue"}, 59 {type: "click", target: "blue"}, 60 {type: "dblclick", target: "blue"}, 61 {type: "mousemove", target: "blue", optional: true} 62 ]; 63 64 async_test(function(t) { 65 button.addEventListener("click", function () { 66 t.step(function () { 67 assert_true(EventRecorder.checkRecords(expected)); 68 t.done(); 69 }); 70 }, false); 71 }, "Click-related events should fire in the correct order"); 72 EventRecorder.start(); 73 74 await new test_driver.Actions() 75 .pointerMove(0, 0, {origin: blue}) 76 .pointerDown() 77 .pointerUp() 78 .pointerDown() 79 .pointerUp() 80 .pointerMove(0, 0, {origin: button}) 81 .pointerDown() 82 .pointerUp() 83 .send(); 84 }; 85 </script> 86 </html>