1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!doctype html>
<html>
<head>
<title>Pointer Events properties tests</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<!--script src="/resources/testharnessreport.js"></script-->
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript" src="mochitest_support_internal.js"></script>
<script>
var detected_pointertypes = {};
var detected_eventTypes = {};
var test_pointerEvent = async_test("pointerevent attributes");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function run() {
var square1 = document.getElementById("square1");
var rectSquare1 = square1.getBoundingClientRect();
var pointerover_event;
var eventList = ['pointerenter', 'pointerover', 'pointermove', 'pointerdown', 'pointerup', 'pointerout', 'pointerleave'];
eventList.forEach(function(eventName) {
on_event(square1, eventName, function (event) {
if (detected_eventTypes[event.type])
return;
detected_pointertypes[event.pointerType] = true;
test(function () {
assert_equals(event.pointerType, 'mouse', 'pointerType should be mouse');
}, event.type + ".pointerType attribute is correct.");
// Test button and buttons
if (event.type == 'pointerdown') {
test(function() {
assert_true(event.button == 0, "If left mouse button is pressed button attribute is 0")
}, event.type + "'s button attribute is 0 when left mouse button is pressed.");
test(function() {
assert_true(event.buttons == 1, "If left mouse button is pressed buttons attribute is 1")
}, event.type + "'s buttons attribute is 1 when left mouse button is pressed.");
} else if (event.type == 'pointerup') {
test(function() {
assert_true(event.button == 0, "If left mouse button is just released button attribute is 0")
}, event.type + "'s button attribute is 0 when left mouse button is just released.");
test(function() {
assert_true(event.buttons == 0, "If left mouse button is just released buttons attribute is 0")
}, event.type + "'s buttons attribute is 0 when left mouse button is just released.");
} else {
test(function() {
assert_true(event.button == -1, "If mouse buttons are released button attribute is -1")
}, event.type + "'s button is -1 when mouse buttons are released.");
test(function() {
assert_true(event.buttons == 0, "If mouse buttons are released buttons attribute is 0")
}, event.type + "'s buttons is 0 when mouse buttons are released.");
}
// Test clientX and clientY
if (event.type != 'pointerout' && event.type != 'pointerleave' ) {
test(function () {
assert_true(event.clientX >= rectSquare1.left && event.clientX < rectSquare1.right, "ClientX should be in the boundaries of the black box");
}, event.type + ".clientX attribute is correct.");
test(function () {
assert_true(event.clientY >= rectSquare1.top && event.clientY < rectSquare1.bottom, "ClientY should be in the boundaries of the black box");
}, event.type + ".clientY attribute is correct.");
} else {
test(function () {
assert_true(event.clientX < rectSquare1.left || event.clientX > rectSquare1.right - 1 || event.clientY < rectSquare1.top || event.clientY > rectSquare1.bottom - 1, "ClientX/Y should be out of the boundaries of the black box");
}, event.type + "'s ClientX and ClientY attributes are correct.");
}
// Test isPrimary
test(function () {
assert_equals(event.isPrimary, true, "isPrimary should be true");
}, event.type + ".isPrimary attribute is correct.");
// Test width and height
test(function () {
assert_equals(event.width, 1, "width of mouse should be 1");
}, event.type + ".width attribute is correct.");
test(function () {
assert_equals(event.height, 1, "height of mouse should be 1");
}, event.type + ".height attribute is correct.");
check_PointerEvent(event);
detected_eventTypes[event.type] = true;
if (Object.keys(detected_eventTypes).length == eventList.length)
test_pointerEvent.done();
});
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Events pointerdown tests</h1>
<!--
<h4>
Test Description: This test checks the properties of mouse pointer events. Move your mouse over the black square and click on it. Then move it off the black square.
</h4>
-->
Test passes if the proper behavior of the events is observed.
<div id="square1" class="square"></div>
<div class="spacer"></div>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>
|
