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 |