pointerevent_attributes_hoverable_pointers-manual.html (8168B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Events properties tests</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 <!-- Additional helper script for common checks across event types --> 10 <script type="text/javascript" src="pointerevent_support.js"></script> 11 <script> 12 var detected_pointertypes = {}; 13 var detected_eventTypes = {}; 14 var eventList = ['pointerover', 'pointerenter', 'pointermove', 'pointerdown', 'pointerup', 'pointerout', 'pointerleave']; 15 var expectedPointerId = NaN; 16 17 function resetTestState() { 18 detected_eventTypes = {}; 19 document.getElementById("square1").style.visibility = 'visible'; 20 document.getElementById('innerFrame').contentDocument.getElementById("square2").style.visibility = 'hidden'; 21 expectedPointerId = NaN; 22 } 23 function checkPointerEventAttributes(event, targetBoundingClientRect, testNamePrefix) { 24 if (detected_eventTypes[event.type]) 25 return; 26 var expectedEventType = eventList[Object.keys(detected_eventTypes).length]; 27 detected_eventTypes[event.type] = true; 28 var pointerTestName = testNamePrefix + ' ' + expectedPointerType + ' ' + expectedEventType; 29 30 detected_pointertypes[event.pointerType] = true; 31 32 test(function() { 33 assert_equals(event.type, expectedEventType, "Event.type should be " + expectedEventType) 34 }, pointerTestName + "'s type should be " + expectedEventType); 35 36 // Test button and buttons 37 if (event.type == 'pointerdown') { 38 test(function() { 39 assert_true(event.button == 0, "Button attribute is 0") 40 }, pointerTestName + "'s button attribute is 0 when left mouse button is pressed."); 41 test(function() { 42 assert_true(event.buttons == 1, "Buttons attribute is 1") 43 }, pointerTestName + "'s buttons attribute is 1 when left mouse button is pressed."); 44 } else if (event.type == 'pointerup') { 45 test(function() { 46 assert_true(event.button == 0, "Button attribute is 0") 47 }, pointerTestName + "'s button attribute is 0 when left mouse button is just released."); 48 test(function() { 49 assert_true(event.buttons == 0, "Buttons attribute is 0") 50 }, pointerTestName + "'s buttons attribute is 0 when left mouse button is just released."); 51 } else { 52 test(function() { 53 assert_true(event.button == -1, "Button attribute is -1") 54 }, pointerTestName + "'s button is -1 when mouse buttons are in released state."); 55 test(function() { 56 assert_true(event.buttons == 0, "Buttons attribute is 0") 57 }, pointerTestName + "'s buttons is 0 when mouse buttons are in released state."); 58 } 59 60 // Test clientX and clientY 61 if (event.type != 'pointerout' && event.type != 'pointerleave' ) { 62 test(function () { 63 assert_true(event.clientX >= targetBoundingClientRect.left && event.clientX < targetBoundingClientRect.right && event.clientY >= targetBoundingClientRect.top && event.clientY < targetBoundingClientRect.bottom, "ClientX/Y should be in the boundaries of the box"); 64 }, pointerTestName + "'s ClientX and ClientY attributes are correct."); 65 } else { 66 test(function () { 67 assert_true(event.clientX < targetBoundingClientRect.left || event.clientX > targetBoundingClientRect.right - 1 || event.clientY < targetBoundingClientRect.top || event.clientY > targetBoundingClientRect.bottom - 1, "ClientX/Y should be out of the boundaries of the box"); 68 }, pointerTestName + "'s ClientX and ClientY attributes are correct."); 69 } 70 71 check_PointerEvent(event, testNamePrefix); 72 73 // Test isPrimary value 74 test(function () { 75 assert_equals(event.isPrimary, true, "isPrimary should be true"); 76 }, pointerTestName + ".isPrimary attribute is correct."); 77 78 // Test pointerId value 79 if (isNaN(expectedPointerId)) { 80 expectedPointerId = event.pointerId; 81 } else { 82 test(function () { 83 assert_equals(event.pointerId, expectedPointerId, "pointerId should remain the same for the same active pointer"); 84 }, pointerTestName + ".pointerId should be the same as previous pointer events for this active pointer."); 85 } 86 } 87 88 function run() { 89 var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", HOVERABLE_POINTERS); 90 var square1 = document.getElementById("square1"); 91 var rectSquare1 = square1.getBoundingClientRect(); 92 var innerFrame = document.getElementById('innerFrame'); 93 var square2 = innerFrame.contentDocument.getElementById('square2'); 94 var rectSquare2 = square2.getBoundingClientRect(); 95 96 eventList.forEach(function(eventName) { 97 on_event(square1, eventName, function (event) { 98 if (square1.style.visibility == 'hidden') 99 return; 100 checkPointerEventAttributes(event, rectSquare1, ""); 101 if (Object.keys(detected_eventTypes).length == eventList.length) { 102 square1.style.visibility = 'hidden'; 103 detected_eventTypes = {}; 104 square2.style.visibility = 'visible'; 105 expectedPointerId = NaN; 106 } 107 }); 108 on_event(square2, eventName, function (event) { 109 checkPointerEventAttributes(event, rectSquare2, "Inner frame "); 110 if (Object.keys(detected_eventTypes).length == eventList.length) { 111 square2.style.visibility = 'hidden'; 112 test_pointerEvent.done(); 113 } 114 }); 115 }); 116 } 117 </script> 118 </head> 119 <body onload="run()"> 120 <h1>Pointer Events hoverable pointer attributes test</h1> 121 <h2 id="pointerTypeDescription"></h2> 122 <h4> 123 Test Description: This test checks the properties of hoverable pointer events. If you are using hoverable pen don't leave the range of digitizer while doing the instructions. 124 <ol> 125 <li>Move your pointer over the black square and click on it.</li> 126 <li>Then move it off the black square so that it disappears.</li> 127 <li>When red square appears move your pointer over the red square and click on it.</li> 128 <li>Then move it off the red square.</li> 129 </ol> 130 131 Test passes if the proper behavior of the events is observed. 132 </h4> 133 <div id="square1" class="square"></div> 134 <iframe id="innerFrame" src="resources/pointerevent_attributes_hoverable_pointers-iframe.html"></iframe> 135 <div class="spacer"></div> 136 <div id="complete-notice"> 137 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 138 <p>Refresh the page to run the tests again with a different pointer type.</p> 139 </div> 140 <div id="log"></div> 141 </body> 142 </html>