click-on-html.html (2479B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Clicking on the html 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: blue; 16 margin: 0; 17 } 18 body { 19 background-color: red; 20 height: 0; 21 margin: 0; 22 } 23 #guineapig { 24 background-color: white; 25 padding-top: 50px;/* Text is easier to see when it's not at the exact top of the viewport */ 26 margin-top: 0;/* Ensure there's no exposed html element above this */ 27 margin-bottom: 100px;/* Expose an area of the html element itself */ 28 } 29 #other { 30 background-color: white; 31 height: 100vh;/* Push the rest of the html element outside of the viewport */ 32 } 33 </style> 34 </head> 35 <body> 36 <p id="guineapig">Click on the blue area below.</p> 37 <p id="other"> </p><!-- Needed to prevent the margin from collapsing --> 38 <script> 39 setup({explicit_timeout: true}); 40 promise_test(async function(t) { 41 document.documentElement.addEventListener('click', function (event) { 42 t.step(function () { 43 assert_equals(event.target, document.documentElement, 'target of click event must be the html element'); 44 assert_equals(event.eventPhase, Event.AT_TARGET, 'click event must propagate to the html element at the Target Phase'); 45 var passed = event.target === document.documentElement && event.eventPhase === Event.AT_TARGET; 46 document.documentElement.style.backgroundColor = 'white'; 47 document.getElementById('other').style.height = 'auto'; 48 var guineapig = document.getElementById('guineapig'); 49 guineapig.style.marginBottom = '16px'; 50 if (passed) { 51 guineapig.textContent = 'PASS'; 52 guineapig.style.backgroundColor = 'green'; 53 } 54 t.done(); 55 }); 56 }, false); 57 58 const xPositionInHtml = yPositionInHtml = 150; 59 await new test_driver.Actions() 60 .pointerMove(xPositionInHtml, yPositionInHtml) 61 .pointerDown() 62 .pointerUp() 63 .send(); 64 }, "Clicking on the html element itself should fire a click event targeted at the html element"); 65 </script> 66 </body> 67 </html>