pointerevent_pointerout_no_pointer_movement.html (2182B)
1 <!doctype html> 2 <title> 3 Layout change under a stationary pointer fires boundary events and no pointermove event 4 </title> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="help" 7 href="https://w3c.github.io/pointerevents/#boundary-events-caused-by-layout-changes"> 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 <script src="pointerevent_support.js"></script> 14 <style> 15 div { 16 position: absolute; 17 top: 0; 18 left: 0; 19 width: 50px; 20 height: 50px; 21 } 22 23 #overlay { 24 z-index: 1000; 25 display: none; 26 } 27 28 #log { 29 display: none; /* Required to run this test alone */ 30 } 31 </style> 32 <div id="target"></div> 33 <div id="overlay"></div> 34 <script> 35 "use strict"; 36 37 const target = document.getElementById("target"); 38 const overlay = document.getElementById("overlay"); 39 40 let logging_active = false; 41 let num_pointermoves = 0; 42 43 target.addEventListener("click", () => logging_active = true); 44 target.addEventListener("pointermove", () => { 45 if (logging_active) num_pointermoves++; 46 }); 47 48 promise_test(async t => { 49 await test_driver.click(target); 50 51 num_pointermoves = 0; 52 let pointerout_promise = getEvent("pointerout", target); 53 overlay.style.display = "block"; 54 await pointerout_promise; 55 assert_equals(num_pointermoves, 0, "no pointermove events are expected"); 56 }, "Layout change under a stationary pointer (a new element appears) fires boundary events and no pointermove event"); 57 58 59 promise_test(async t => { 60 await test_driver.click(overlay); 61 62 num_pointermoves = 0; 63 let pointerover_promise = getEvent("pointerover", target); 64 overlay.style.display = "none"; 65 await pointerover_promise; 66 assert_equals(num_pointermoves, 0, "no pointermove events are expected"); 67 68 document.querySelector("style").remove(); // Show the test log if running alone. 69 }, "Layout change under a stationary pointer (the element disappears) fires boundary events and no pointermove event"); 70 </script>