pointerevent_pointerleave_pen-manual.html (3218B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Event: Dispatch pointerleave (pen). </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="When a pointing device that supports hover (pen stylus) leaves the range of the digitizer while over an element, the pointerleave event must be dispatched."/> 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 <!-- Additional helper script for common checks across event types --> 13 <script type="text/javascript" src="pointerevent_support.js"></script> 14 <script type="text/javascript"> 15 var detected_pointertypes = {}; 16 var test_pointerEvent = async_test("pointerleave event"); // set up test harness 17 // showPointerTypes is defined in pointerevent_support.js 18 // Requirements: the callback function will reference the test_pointerEvent object and 19 // will fail unless the async_test is created with the var name "test_pointerEvent". 20 add_completion_callback(showPointerTypes); 21 22 function run() { 23 var target0 = document.getElementById("target0"); 24 25 on_event(target0, "pointerleave", function (event) { 26 detected_pointertypes[event.pointerType] = true; 27 check_PointerEvent(event); 28 test_pointerEvent.step(function () { 29 assert_equals(event.pointerType, "pen", "Test should be run using a pen as input"); 30 assert_equals(event.type, "pointerleave", "The " + event.type + " event was received"); 31 assert_true((event.clientX > target0.getBoundingClientRect().left)&& 32 (event.clientX < target0.getBoundingClientRect().right)&& 33 (event.clientY > target0.getBoundingClientRect().top)&& 34 (event.clientY < target0.getBoundingClientRect().bottom), 35 "pointerleave should be received inside of target bounds"); 36 }); 37 test_pointerEvent.done(); // complete test 38 }); 39 } 40 </script> 41 </head> 42 <body onload="run()"> 43 <h1>Pointer Event: Dispatch pointerleave (pen)</h1> 44 <h4> 45 Test Description: 46 When a pointing device that supports hover (pen stylus) leaves the range of the digitizer while over an element, the pointerleave event must be dispatched. 47 </h4> 48 <br /> 49 <div id="target0"> 50 Use a pen to hover over then lift up away from this element. 51 </div> 52 <div id="complete-notice"> 53 <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> 54 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 55 </div> 56 <div id="log"></div> 57 </body> 58 </html>