click-on-div.html (1681B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Clicking on a div element that has no click event handler fires a click event</title> 6 <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> 7 <link rel="help" href="https://w3c.github.io/uievents/#event-type-click"> 8 <link rel="help" href="https://dom.spec.whatwg.org/#concept-event-dispatch"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.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 <style> 15 #square { 16 width: 100px; 17 height: 100px; 18 background-color: blue; 19 color: white; 20 /* Center the "Click me" text */ 21 line-height: 100px; 22 text-align: center; 23 } 24 </style> 25 </head> 26 <body> 27 <p>Click on the blue square below.</p> 28 <div id="square">Click me</div> 29 <script> 30 setup({explicit_timeout: true}); 31 promise_test(async function(t) { 32 document.addEventListener('click', function (event) { 33 var square = document.getElementById('square'); 34 t.step(function () { 35 assert_equals(event.target, square, 'target of click event must be the test square'); 36 assert_equals(event.eventPhase, Event.BUBBLING_PHASE, 'click event must propagate to the document object during the Bubbling Phase'); 37 square.textContent = 'PASS'; 38 square.style.backgroundColor = 'green'; 39 t.done(); 40 }); 41 }, false); 42 43 await test_driver.click(square); 44 }, "Clicking on a div element and having a click event listener on only document"); 45 </script> 46 </body> 47 </html>