pointerevent_pointerleave_does_not_bubble.html (4119B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Event: The pointerleave event does not bubble </title> 5 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> 6 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> 7 <meta name="assert" content="The pointerleave event must not bubble up to parent elements."/> 8 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 9 <!-- /resources/testharness.js --> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-actions.js"></script> 14 <script src="/resources/testdriver-vendor.js"></script> 15 <!-- Additional helper script for common checks across event types --> 16 <script type="text/javascript" src="pointerevent_support.js"></script> 17 <script type="text/javascript"> 18 var detected_pointertypes = {}; 19 var test_pointerEvent = async_test("pointerLeave event does not bubble"); // set up test harness 20 var actions_promise; 21 // showPointerTypes is defined in pointerevent_support.js 22 // Requirements: the callback function will reference the test_pointerEvent object and 23 // will fail unless the async_test is created with the var name "test_pointerEvent". 24 add_completion_callback(showPointerTypes); 25 26 function run() { 27 var target0 = document.getElementById("target0"); 28 var parent0 = document.getElementById("parent0"); 29 30 on_event(target0, "pointerleave", function (event) { 31 detected_pointertypes[event.pointerType] = true; 32 33 test_pointerEvent.step(function () { 34 assert_equals(event.type, "pointerleave", "pointer event received: " + event.type); 35 assert_false(event.bubbles, "pointerleave event.bubbles should be false: " + event.bubbles); 36 }); 37 }); 38 39 on_event(parent0, "pointerleave", function (event) { 40 test_pointerEvent.step(function () { 41 assert_equals(event.target.id, "parent0", "Recieved " + event.type + " in parent for " + event.target.id); 42 }); 43 // Make sure the test finishes after all the input actions are completed. 44 actions_promise.then( () => { 45 test_pointerEvent.done(); 46 }); 47 }); 48 49 // Inject mouse inputs. 50 actions_promise = new test_driver.Actions() 51 .pointerMove(0, 0, {origin: target0}) 52 .pointerMove(0, 0) 53 .send(); 54 } 55 </script> 56 <style> 57 #target0 { 58 background: purple; 59 border: 1px solid orange; 60 width:50px; 61 height:50px; 62 } 63 #parent0 { 64 background: black; 65 border: 1px solid orange; 66 width:100px; 67 height:100px; 68 } 69 </style> 70 </head> 71 <body onload="run()"> 72 <h1> Pointer Event: pointerleave does not bubble</h1> 73 <h4> 74 Test Description: 75 The pointerleave event must not bubble up to parent elements. 76 </h4> 77 <div id="instructions"> 78 Use the mouse or pen to hover over then out of the purple box nested in the black box. Or with touch, tap on the purple box. 79 </div> 80 <div id="parent0"> 81 <div id="target0"></div> 82 </div> 83 <div id="complete-notice"> 84 <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> 85 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 86 <p>Refresh the page to run the tests again with a different pointer type.</p> 87 </div> 88 <div id="log"></div> 89 </body> 90 </html>