pointerevent_pointerleave_descendants.html (2793B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointerleave + descendant</title> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="pointerevent_support.js"></script> 13 </head> 14 <body onload="run()"> 15 <h1>pointerleave</h1> 16 <h4> 17 Test Description: This test checks if pointerleave event works properly. 18 <p>Put your mouse over the black rectangle and then move it out through purple rectangle boundaries.</p> 19 </h4> 20 <p> 21 <div id="target0" style="background:black; height: 47px;"> 22 <div style="background:purple; height: 35px; width: 90%; position: absolute"></div> 23 </div> 24 <script> 25 var detected_pointertypes = {}; 26 27 add_completion_callback(showPointerTypes); 28 29 function run() { 30 var target0 = document.getElementById("target0"); 31 var target1 = document.querySelector("#target0 > div"); 32 var test_pointerleave = async_test("pointerleave event received"); 33 var actions_promise; 34 35 on_event(target0, "pointerover", function(event) { 36 detected_pointertypes[ event.pointerType ] = true; 37 }); 38 39 // When a pointing device is moved off of the hit test boundaries of an element and all of its descendants, the pointerleave event must be dispatched. 40 // TA: 9.1 41 on_event(target0, "pointerleave", function (event) { 42 // Make sure the test finishes after all the input actions are completed. 43 actions_promise.then( () => { 44 test_pointerleave.done(); 45 }); 46 }); 47 48 // Inject mouse inputs. 49 actions_promise = new test_driver.Actions() 50 .pointerMove(0, 0, {origin: target0}) 51 .pointerMove(0, 0, {origin: target1}) 52 .pointerMove(0, 0) 53 .send(); 54 } 55 </script> 56 <h1>Pointer Events pointerleave tests</h1> 57 <div id="complete-notice"> 58 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 59 <p>Refresh the page to run the tests again with a different pointer type.</p> 60 </div> 61 <div id="log"></div> 62 </body> 63 </html>