OLD | NEW |
(Empty) | |
| 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 test_pointerEvent = async_test("pointerdown event received"); |
| 15 // showPointerTypes is defined in pointerevent_support.js |
| 16 // Requirements: the callback function will reference the test_point
erEvent object and |
| 17 // will fail unless the async_test is created with the var name "tes
t_pointerEvent". |
| 18 add_completion_callback(showPointerTypes); |
| 19 |
| 20 function run() { |
| 21 var square1 = document.getElementById("square1"); |
| 22 var rectSquare1 = square1.getBoundingClientRect(); |
| 23 var pointerover_event; |
| 24 |
| 25 var eventList = ['pointerenter', 'pointerover', 'pointermove', '
pointerdown', 'pointerup', 'pointerout', 'pointerleave']; |
| 26 eventList.forEach(function(eventName) { |
| 27 on_event(square1, eventName, function (event) { |
| 28 if (detected_eventTypes[event.type]) |
| 29 return; |
| 30 detected_pointertypes[event.pointerType] = true; |
| 31 test(function () { |
| 32 assert_equals(event.pointerType, 'mouse', 'pointerTy
pe should be mouse'); |
| 33 }, event.type + ".pointerType attribute is correct."); |
| 34 |
| 35 if (event.type != 'pointerout' && event.type != 'pointer
leave' ) { |
| 36 test(function () { |
| 37 assert_true(event.clientX >= rectSquare1.left &&
event.clientX < rectSquare1.right, "ClientX should be in the boundaries of the
black box"); |
| 38 }, event.type + ".clientX attribute is correct."); |
| 39 test(function () { |
| 40 assert_true(event.clientY >= rectSquare1.top && ev
ent.clientY < rectSquare1.bottom, "ClientY should be in the boundaries of the bl
ack box"); |
| 41 }, event.type + ".clientY attribute is correct."); |
| 42 } else { |
| 43 test(function () { |
| 44 assert_true(event.clientX < rectSquare1.left ||
event.clientX > rectSquare1.right - 1 || event.clientY < rectSquare1.top || even
t.clientY > rectSquare1.bottom - 1, "ClientX/Y should be out of the boundaries o
f the black box"); |
| 45 }, event.type + "'s ClientX and ClientY attributes a
re correct."); |
| 46 } |
| 47 |
| 48 test(function () { |
| 49 assert_equals(event.isPrimary, true, "isPrimary shou
ld be true"); |
| 50 }, event.type + ".isPrimary attribute is correct."); |
| 51 |
| 52 check_PointerEvent(event); |
| 53 detected_eventTypes[event.type] = true; |
| 54 if (Object.keys(detected_eventTypes).length == eventList
.length) |
| 55 test_pointerEvent.done(); |
| 56 }); |
| 57 }); |
| 58 } |
| 59 </script> |
| 60 </head> |
| 61 <body onload="run()"> |
| 62 <h1>Pointer Events pointerdown tests</h1> |
| 63 <h4> |
| 64 Test Description: This test checks the properties of mouse pointer e
vents. Move your mouse over the black square and click on it. Then move it off t
he black square. |
| 65 </h4> |
| 66 Test passes if the proper behavior of the events is observed. |
| 67 <div id="square1" class="square"></div> |
| 68 <div class="spacer"></div> |
| 69 <div id="complete-notice"> |
| 70 <p>The following pointer types were detected: <span id="pointertype-
log"></span>.</p> |
| 71 <p>Refresh the page to run the tests again with a different pointer
type.</p> |
| 72 </div> |
| 73 <div id="log"></div> |
| 74 </body> |
| 75 </html> |
| 76 |
OLD | NEW |