pointerevent_pointerenter_does_not_bubble.html (4644B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Event: The pointerenter 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 pointerenter 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("pointerEnter event does not bubble"); // set up test harness 20 // showPointerTypes is defined in pointerevent_support.js 21 // Requirements: the callback function will reference the test_pointerEvent object and 22 // will fail unless the async_test is created with the var name "test_pointerEvent". 23 add_completion_callback(showPointerTypes); 24 25 var pointerenter_event = null; 26 27 function run() { 28 var target0 = document.getElementById("target0"); 29 var parent0 = document.getElementById("parent0"); 30 var actions_promise; 31 32 on_event(target0, "pointerenter", function (event) { 33 pointerenter_event = event; 34 35 test_pointerEvent.step(function () { 36 assert_equals(event.type, "pointerenter", "pointer event received: " + event.type); 37 assert_false(event.bubbles, "pointerenter event.bubbles should be false: " + event.bubbles); 38 }); 39 }); 40 on_event(target0, "pointerout", function (event) { 41 test_pointerEvent.step(function () { 42 assert_not_equals(pointerenter_event, null, "pointerout event was never received: "); 43 }); 44 // Make sure the test finishes after all the input actions are completed. 45 actions_promise.then( () => { 46 test_pointerEvent.done(); 47 }); 48 }); 49 50 // parent 51 on_event(parent0, "pointerenter", function (event) { 52 detected_pointertypes[event.pointerType] = true; 53 test_pointerEvent.step(function () { 54 assert_equals(event.target.id, "parent0", "Recieved " + event.type + " in parent for " + event.target.id); 55 }); 56 }); 57 58 // Inject mouse inputs. 59 actions_promise = new test_driver.Actions() 60 .pointerMove(0, 0, {origin: target0}) 61 .pointerMove(-10, -10, {origin: target0}) 62 .pointerMove(-20, -20, {origin: target0}) 63 .pointerMove(0, 0) 64 .send(); 65 } 66 67 </script> 68 <style> 69 #target0 { 70 background: purple; 71 border: 1px solid orange; 72 width:50px; 73 height:50px; 74 } 75 #parent0 { 76 background: black; 77 border: 1px solid orange; 78 width:100px; 79 height:100px; 80 } 81 </style> 82 </head> 83 <body onload="run()"> 84 <h1> Pointer Event: pointerenter does not bubble</h1> 85 <h4> 86 Test Description: 87 The pointerenter event must not bubble up to parent elements. 88 </h4> 89 <div id="instructions"> 90 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. 91 </div> 92 <div id="parent0"> 93 <div id="target0"></div> 94 </div> 95 <div id="complete-notice"> 96 <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> 97 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 98 <p>Refresh the page to run the tests again with a different pointer type.</p> 99 </div> 100 <div id="log"></div> 101 </body> 102 </html>