click-on-body.html (1974B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Clicking on the body element itself 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 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <style> 14 html { 15 background-color: white; 16 margin: 0; 17 } 18 body { 19 background-color: blue; 20 margin: 0; 21 } 22 #guineapig { 23 background-color: white; 24 margin-bottom: 100px;/* Expose an area of the body element itself */ 25 } 26 #other { 27 background-color: white; 28 } 29 </style> 30 </head> 31 <body> 32 <p id="guineapig">Click on the blue area below.</p> 33 <p id="other"> </p><!-- Needed to prevent the margin from collapsing --> 34 <script> 35 setup({explicit_timeout: true}); 36 promise_test(async function(t) { 37 document.body.addEventListener('click', function (event) { 38 t.step(function () { 39 assert_equals(event.target, document.body, 'target of click event must be the body element'); 40 assert_equals(event.eventPhase, Event.AT_TARGET, 'click event must propagate to the body element at the Target Phase'); 41 var passed = event.target === document.body && event.eventPhase === Event.AT_TARGET; 42 document.body.style.backgroundColor = 'white'; 43 var guineapig = document.getElementById('guineapig'); 44 guineapig.style.marginBottom = '16px'; 45 if (passed) { 46 guineapig.textContent = 'PASS'; 47 guineapig.style.backgroundColor = 'green'; 48 } 49 t.done(); 50 }); 51 }, false); 52 53 await test_driver.click(document.body); 54 }, "Clicking on the body element itself should fire a click event targeted at the body element"); 55 </script> 56 </body> 57 </html>