click_event_target_child_parent.html (3115B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Click targets the nearest common ancestor</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <style> 12 div { 13 padding: 10px; 14 margin: 5px; 15 } 16 a { 17 background: grey; 18 } 19 </style> 20 </head> 21 <body id='body'> 22 <h1>Click targeting when targets of down and up are child and parents</h1> 23 This test verifies that click event always goes to the first common ancestor of down and up event targets. 24 25 <ul> 26 <li>Press down the primary button on link 1 and move onto green container and release.</li> 27 <li>Press down the primary button on red container and move onto link 2 and release.</li> 28 <li>Click done.</li> 29 </ul> 30 31 <div id="link_container1" style="background: green"> 32 <a id="link1" href="#">link1</a> 33 </div> 34 35 <div id="link_container2" style="background: red"> 36 <a id="link2" href="#">link2</a> 37 </div> 38 <button id="done">Done</button> 39 <script> 40 var test_click_target = async_test("Click targets the nearest common ancestor"); 41 var actions_promise; 42 43 // Prevent drag to avoid interfering with the click. 44 document.addEventListener('dragstart', (e) => e.preventDefault()); 45 46 var events = []; 47 var nodes = ['link_container1', 'link1', 'link_container2', 'link2', 'body']; 48 49 for (var i = 0; i < nodes.length; i++) { 50 ['mousedown', 'mouseup', 'click'].forEach((eventName) => { 51 document.getElementById(nodes[i]).addEventListener(eventName, (e) => { 52 if (e.eventPhase == Event.AT_TARGET) 53 events.push(e.type + '@' + e.target.id); 54 }); 55 }); 56 } 57 document.getElementById('done').addEventListener('click', () => { 58 test_click_target.step(() => { 59 assert_equals (events.join(','), 60 "mousedown@link1,mouseup@link_container1,click@link_container1,mousedown@link_container2,mouseup@link2,click@link_container2", 61 "Click should be sent to the nearest common ancestor"); 62 }); 63 // Make sure the test finishes after all the input actions are completed. 64 actions_promise.then( () => { 65 test_click_target.done(); 66 }); 67 }); 68 69 // Inject mouse events. 70 var actions = new test_driver.Actions(); 71 actions_promise = actions.pointerMove(0, 0, {origin: document.getElementById('link1')}) 72 .pointerDown() 73 .pointerMove(0, 0, {origin: document.getElementById('link_container1')}) 74 .pointerUp() 75 .pointerMove(0, 0, {origin: document.getElementById('link_container2')}) 76 .pointerDown() 77 .pointerMove(0, 0, {origin: document.getElementById('link2')}) 78 .pointerUp() 79 .pointerMove(0, 0, {origin: document.getElementById('done')}) 80 .pointerDown() 81 .pointerUp() 82 .send(); 83 </script> 84 </body> 85 </html>