pointerevent_pointerleave_descendant_over.html (3412B)
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 <ol> 19 <li>Put your mouse over the black rectangle 20 <li>Then move it into the purple rectangle 21 <li>Click on the purple rectangle to complete the test 22 </ol> 23 Note: when you entered the black rectangle once don't leave it before the end of the test to get proper results. 24 </h4> 25 <p> 26 <div id="target0" style="background:black"> 27 <div id="target1" style="background:purple"></div> 28 </div> 29 <script> 30 var eventTested = false; 31 var pointerleaveReceived = false; 32 var detected_pointertypes = {}; 33 var test_pointerleave = async_test("pointerleave shouldn't be received on descendant's pointerover"); 34 var actions_promise; 35 36 add_completion_callback(showPointerTypes); 37 38 function run() { 39 var target0 = document.getElementById("target0"); 40 41 // The pointerleave event must not be dispatched when the pointer enters a child element without leaving the hit test boundaries of the parent. (as distinct from pointerout) 42 // TA: 9.2 43 on_event(target1, "pointerdown", function(event) { 44 detected_pointertypes[event.pointerType] = true; 45 46 test_pointerleave.step(function() { 47 assert_true(!pointerleaveReceived, "pointerleave shouldn't be received on descendant's pointerover"); 48 }, "pointerleave shouldn't be received on descendant's pointerover"); 49 actions_promise.then( () => { 50 test_pointerleave.done(); 51 }); 52 }); 53 54 on_event(target0, "pointerleave", function (event) { 55 if (eventTested == false) { 56 pointerleaveReceived = true; 57 eventTested = true; 58 } 59 }); 60 61 // Inject mouse inputs. 62 actions_promise = new test_driver.Actions() 63 .pointerMove(0, 0, {origin: target0}) 64 .pointerMove(0, 0, {origin: target1}) 65 .pointerDown() 66 .pointerUp() 67 .send(); 68 } 69 </script> 70 <h1>Pointer Events pointerleave tests</h1> 71 <div id="complete-notice"> 72 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 73 <p>Refresh the page to run the tests again with a different pointer type.</p> 74 </div> 75 <div id="log"></div> 76 </body> 77 </html>