| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Clicking on the html element itself fires a click event</title> |
| <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> |
| <link rel="help" href="https://w3c.github.io/uievents/#event-type-click"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <style> |
| html { |
| background-color: blue; |
| margin: 0; |
| } |
| body { |
| background-color: red; |
| height: 0; |
| margin: 0; |
| } |
| #guineapig { |
| background-color: white; |
| padding-top: 50px;/* Text is easier to see when it's not at the exact top of the viewport */ |
| margin-top: 0;/* Ensure there's no exposed html element above this */ |
| margin-bottom: 100px;/* Expose an area of the html element itself */ |
| } |
| #other { |
| background-color: white; |
| height: 100vh;/* Push the rest of the html element outside of the viewport */ |
| } |
| </style> |
| </head> |
| <body> |
| <p id="guineapig">Click on the blue area below.</p> |
| <p id="other"> </p><!-- Needed to prevent the margin from collapsing --> |
| <script> |
| setup({explicit_timeout: true}); |
| promise_test(async function(t) { |
| document.documentElement.addEventListener('click', function (event) { |
| t.step(function () { |
| assert_equals(event.target, document.documentElement, 'target of click event must be the html element'); |
| assert_equals(event.eventPhase, Event.AT_TARGET, 'click event must propagate to the html element at the Target Phase'); |
| var passed = event.target === document.documentElement && event.eventPhase === Event.AT_TARGET; |
| document.documentElement.style.backgroundColor = 'white'; |
| document.getElementById('other').style.height = 'auto'; |
| var guineapig = document.getElementById('guineapig'); |
| guineapig.style.marginBottom = '16px'; |
| if (passed) { |
| guineapig.textContent = 'PASS'; |
| guineapig.style.backgroundColor = 'green'; |
| } |
| t.done(); |
| }); |
| }, false); |
| |
| const xPositionInHtml = yPositionInHtml = 150; |
| await new test_driver.Actions() |
| .pointerMove(xPositionInHtml, yPositionInHtml) |
| .pointerDown() |
| .pointerUp() |
| .send(); |
| }, "Clicking on the html element itself should fire a click event targeted at the html element"); |
| </script> |
| </body> |
| </html> |
