Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

240 lines (211 sloc) 7.961 kb
<!doctype html>
<html>
<!--
Test cases for Pointer Events v1 spec
This document references Test Assertions (abbrev TA below) written by Cathy Chan
-->
<head>
<title>Pointer Events pointercancel Tests</title>
<meta name="viewport" content="width=device-width">
<link rel="author" href="mailto:scott.gonzalez@gmail.com">
<link rel="author" href="mailto:dave.methvin@gmail.com">
<link rel="author" href="mailto:satyajit@outlook.com">
<link rel="help" href="http://www.w3.org/wiki/PointerEvents/TestAssertions">
<!-- http://w3c-test.org/resources/testharness.js -->
<script src="./testharness.js"></script>
<script src="pointer-prefix.js"></script>
<script>
setup({ explicit_done: true });
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
// Check for conformance to PointerEvent interface
// TA: 1.1, 1.2, 1.6, 1.7, 1.8, 1.9, 1.10, 1.11, 1.12, 1.13
function check_PointerEvent(event) {
test(function() {
assert_true(event instanceof pointerPrefix["PointerEvent"],
"event is a PointerEvent event");
}, event.type + " event is a PointerEvent event");
// Check attributes for conformance to WebIDL:
// * attribute exists
// * has proper type
// * if the attribute is "readonly", it cannot be changed
// TA: 1.1, 1.2
var idl_type_check = {
"long": function( v ) { return typeof v === "number" && Math.round(v) === v; },
"float": function( v ) { return typeof v === "number"; },
"DOMString": function( v ) { return typeof v === "string"; },
"boolean": function( v ) { return typeof v === "boolean" }
};
[
["readonly", "long", "pointerId"],
["readonly", "long", "width"],
["readonly", "long", "height"],
["readonly", "float", "pressure"],
["readonly", "long", "tiltX"],
["readonly", "long", "tiltY"],
["readonly", "DOMString", "pointerType"],
["readonly", "boolean", "isPrimary"]
].forEach(function(attr) {
var readonly = attr[0];
var type = attr[1];
var name = attr[2];
// existence check
test(function() {
assert_true(name in event,
name + " attribute in " + event.type + " event");
}, event.type + "." + name + " attribute exists");
// readonly check
if (readonly === "readonly") {
test(function() {
assert_readonly(event.type, name,
event.type + "." + name + " cannot be changed");
}, event.type + "." + name + " is readonly");
}
// type check
test(function() {
assert_true(idl_type_check[type](event[name]),
name + " attribute of type " + type);
}, event.type + "." + name + " IDL type " + type + " (JS type was " + typeof event[name] + ")");
});
// Check the pressure value
// TA: 1.6, 1.7, 1.8
test(function() {
// TA: 1.6
assert_greater_than_equal(event.pressure, 0,
"pressure is greater than or equal to 0");
assert_less_than_equal(event.pressure, 1,
"pressure is less than or equal to 1");
// TA: 1.7, 1.8
if ( event.pointerType === pointerPrefix.pointerType["mouse"] ) {
if ( event.buttons === 0 ) {
assert_equals( event.pressure, 0,
"pressure is 0 for mouse with no buttons pressed");
} else {
assert_equals( event.pressure, 0.5,
"pressure is 0.5 for mouse with a button pressed");
}
}
}, event.type + ".pressure value is valid" );
// Check mouse-specific properties
if ( event.pointerType === pointerPrefix.pointerType["mouse"] ) {
// TA: 1.9, 1.10, 1.11, 1.13
test(function() {
assert_equals(event.tiltX, 0,
event.type + ".tiltX is 0 for mouse");
assert_equals(event.tiltY, 0,
event.type + ".tiltY is 0 for mouse");
assert_equals(event.pointerId, 1,
event.type + ".pointerId is 1 for mouse");
assert_true(event.isPrimary,
event.type + ".isPrimary is true for mouse");
}, event.type + " properties for pointerType=mouse");
// Check properties for pointers other than mouse
} else {
// TA: 1.12
test(function() {
assert_true(event.pointerId !== 1,
event.type + ".pointerId is not 1 for " + event.pointerType);
}, event.type + " properties for pointerType=" + event.pointerType);
}
}
function determineMaxPoints()
{
var touch_points_required = document.getElementById("touch-points-required");
touch_points_required.innerHTML = window.navigator[pointerPrefix.maxTouchPoints] + 1;
}
function run() {
determineMaxPoints();
var target0 = document.getElementById("target0");
var test_pointerout = async_test("pointerout event received");
var pointerdown_event = null;
var pointerout_event = null;
on_event(target0, pointerPrefix["pointerdown"], function(event) {
pointerdown_event = event;
check_PointerEvent(event);
detected_pointertypes[ event.pointerType ] = true;
});
// Currently Pointer out is being fired after pointer down but the specification
// asks for pointer out after pointer cancel change these tests after this bug is resolved
// https://www.w3.org/Bugs/Public/show_bug.cgi?id=21686
// Capturing pointer out event
on_event(target0, pointerPrefix["pointerout"], function(pointerOutEvent) {
check_PointerEvent(pointerOutEvent);
pointerout_event = pointerOutEvent;
// TA: 4.1, 4.2
test_pointerout.step(function() {
assert_equals(pointerOutEvent.pointerId, pointerdown_event.pointerId,
"pointerId is same for pointerout and pointerdown");
assert_equals(pointerOutEvent.pointerType, pointerdown_event.pointerType,
"pointerType is same for pointerout and pointerdown");
assert_equals(pointerOutEvent.isPrimary, pointerdown_event.isPrimary,
"isPrimary is same for pointerout and pointerdown");
});
detected_pointertypes[ pointerOutEvent.pointerType ] = true;
test_pointerout.done();
});
//Capturing pointer cancel event
on_event(target0, pointerPrefix["pointercancel"], function(pointerCancelEvent) {
check_PointerEvent(pointerCancelEvent);
//Pointer out happens before pointer cancel
if(pointerout_event != null)
{
var test_pointercancel = async_test("pointercancel event received");
//TA: 4.3
test_pointercancel.step(function() {
assert_equals(pointerCancelEvent.pointerId, pointerout_event.pointerId,
"pointerId is same for pointerout and pointercancel");
assert_equals(pointerCancelEvent.pointerType, pointerout_event.pointerType,
"pointerType is same for pointerout and pointercancel");
assert_equals(pointerCancelEvent.isPrimary, pointerout_event.isPrimary,
"isPrimary is same for pointerout and pointercancel");
});
detected_pointertypes[ pointerCancelEvent.pointerType ] = true;
test_pointercancel.done();
}
});
}
function showPointerTypes() {
var complete_notice = document.getElementById("complete-notice");
var pointertype_log = document.getElementById("pointertype-log");
var pointertypes = Object.keys(detected_pointertypes);
pointertype_log.innerHTML = pointertypes.length ?
pointertypes.join(",") : "(none)";
complete_notice.style.display = "block";
}
</script>
<style>
html {
touch-action: none;
}
div {
margin: 0em;
padding: 5em;
}
#target0 {
background: yellow;
border: 1px solid orange;
}
#complete-notice {
background: #afa;
border: 1px solid #0a0;
display: none;
}
#pointertype-log {
font-weight: bold;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events pointercancel Tests</h1>
<div id="target0">
Start with your pointing device outside of this box, then tap here with <span id="touch-points-required"> </span> fingers.
<br/>
After tapping hold your breath and don't touch/move mouse untill tests are run
</div>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Would you like to <a href="#">run the tests again</a> with a different pointer type?</p>
</div>
<div id="log"></div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.