diff options
Diffstat (limited to 'testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-html.html')
-rw-r--r-- | testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-html.html | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-html.html b/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-html.html new file mode 100644 index 0000000000..e93acc6749 --- /dev/null +++ b/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-html.html @@ -0,0 +1,67 @@ +<!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> |