Source code
Revision control
Copy as Markdown
Other Tools
const All_Pointer_Events = [
"pointerdown",
"pointerup",
"pointercancel",
"pointermove",
"pointerover",
"pointerout",
"pointerenter",
"pointerleave",
"gotpointercapture",
"lostpointercapture"
];
// Values for the button property, which indicates the device button whose state
// change fired the event.
const ButtonChange = {
NONE: -1,
PEN_CONTACT: 0,
TOUCH_CONTACT: 0,
LEFT_MOUSE: 0,
MIDDLE_MOUSE: 1,
RIGHT_MOUSE: 2,
X1_MOUSE: 3,
X2_MOUSE: 4,
PEN_ERASER_BUTTON: 5
};
// The buttons property gives the current state of the device buttons as a
// bitmask.
const ButtonsBitfield = {
NONE: 0,
PEN_CONTACT: 1,
TOUCH_CONTACT: 1,
LEFT_MOUSE: 1,
RIGHT_MOUSE: 2,
PEN_BARREL_BUTTON: 2,
MIDDLE_MOUSE: 4,
X1_MOUSE: 8,
X2_MOUSE: 16,
PEN_ERASER_BUTTON: 32
};
// Check for conformance to PointerEvent interface
function check_PointerEvent(event, testNamePrefix, standardAttrs = true) {
if (testNamePrefix === undefined)
testNamePrefix = "";
// Use expectedPointerType if set otherwise just use the incoming event pointerType in the test name.
var pointerTestName = (testNamePrefix ? testNamePrefix + ' ' : '')
+ (expectedPointerType == null ? event.pointerType : expectedPointerType) + ' ' + event.type;
if (standardAttrs) {
if (expectedPointerType != null) {
test(function () {
assert_equals(event.pointerType, expectedPointerType);
}, pointerTestName + ".pointerType is correct.");
}
test(function () {
assert_true(event instanceof event.target.ownerDocument.defaultView.PointerEvent);
}, pointerTestName + " event is a PointerEvent event");
}
// Check attributes for conformance to WebIDL (existence, type, being readable).
var idl_type_check = {
"long": function (v) { return typeof v === "number" && Math.round(v) === v; },
"float": function (v) { return typeof v === "number"; },
"string": function (v) { return typeof v === "string"; },
"boolean": function (v) { return typeof v === "boolean" },
"object": function (v) { return typeof v === "object" }
};
// Check values for inherited attributes.
if (!standardAttrs) {
test(function () {
assert_implements_optional("fromElement" in event);
assert_equals(event.fromElement, null);
}, pointerTestName + ".fromElement value is null");
test(function () {
assert_implements_optional("toElement" in event);
assert_equals(event.toElement, null);
}, pointerTestName + ".toElement value is null");
} else {
test(function () {
assert_equals(event.isTrusted, true);
}, pointerTestName + ".isTrusted value is true");
test(function () {
let expected = (event.type != 'pointerenter' && event.type != 'pointerleave');
assert_equals(event.composed, expected);
}, pointerTestName + ".composed value is valid");
test(function () {
let expected = (event.type != 'pointerenter' && event.type != 'pointerleave');
assert_equals(event.bubbles, expected);
}, pointerTestName + ".bubbles value is valid");
test(function () {
let cancelable_events = [
'pointerdown', 'pointermove', 'pointerup', 'pointerover', 'pointerout'
];
assert_equals(event.cancelable, cancelable_events.includes(event.type));
}, pointerTestName + ".cancelable value is valid");
// Check the pressure value.
test(function () {
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");
if (event.buttons === 0) {
assert_equals(event.pressure, 0, "pressure is 0 with no buttons pressed");
} else {
assert_greater_than(event.pressure, 0, "pressure is greater than 0 with a button pressed");
if (event.pointerType === "mouse") {
assert_equals(event.pressure, 0.5, "pressure is 0.5 for mouse with a button pressed");
}
}
}, pointerTestName + ".pressure value is valid");
// Check mouse-specific properties.
if (event.pointerType === "mouse") {
test(function () {
assert_equals(event.width, 1, "width of mouse should be 1");
assert_equals(event.height, 1, "height of mouse should be 1");
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_true(event.isPrimary, event.type + ".isPrimary is true for mouse");
}, pointerTestName + " properties for pointerType = mouse");
}
// Check "pointerup" specific properties.
if (event.type == "pointerup") {
test(function () {
assert_equals(event.width, 1, "width of pointerup should be 1");
assert_equals(event.height, 1, "height of pointerup should be 1");
}, pointerTestName + " properties for pointerup");
}
}
}
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";
}
function showLoggedEvents() {
var event_log_elem = document.getElementById("event-log");
event_log_elem.innerHTML = event_log.length ? event_log.join(", ") : "(none)";
var complete_notice = document.getElementById("complete-notice");
complete_notice.style.display = "block";
}
function failOnScroll() {
assert_true(false,
"scroll received while shouldn't");
}
function updateDescriptionNextStep() {
document.getElementById('desc').innerHTML = "Test Description: Try to scroll text RIGHT.";
}
function updateDescriptionComplete() {
document.getElementById('desc').innerHTML = "Test Description: Test complete";
}
function updateDescriptionSecondStepTouchActionElement(target, scrollReturnInterval) {
window.step_timeout(function() {
objectScroller(target, 'up', 0);}
, scrollReturnInterval);
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT moving your outside of the red border";
}
function updateDescriptionThirdStepTouchActionElement(target, scrollReturnInterval, callback = null) {
window.step_timeout(function() {
objectScroller(target, 'left', 0);
if (callback) {
callback();
}
}, scrollReturnInterval);
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the element. Then tap complete button";
}
function updateDescriptionFourthStepTouchActionElement(target, scrollReturnInterval) {
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT starting your touch inside of the element";
}
function objectScroller(target, direction, value) {
if (direction == 'up') {
target.scrollTop = 0;
} else if (direction == 'left') {
target.scrollLeft = 0;
}
}
function sPointerCapture(e) {
try {
target0.setPointerCapture(e.pointerId);
}
catch(e) {
}
}
function rPointerCapture(e) {
try {
captureButton.value = 'Set Capture';
target0.releasePointerCapture(e.pointerId);
}
catch(e) {
}
}
var globalPointerEventTest = null;
var expectedPointerType = null;
const ALL_POINTERS = ['mouse', 'touch', 'pen'];
function MultiPointerTypeTest(testName, types) {
this.testName = testName;
this.types = types;
this.currentTypeIndex = 0;
this.currentTest = null;
this.createNextTest();
}
MultiPointerTypeTest.prototype.step = function(op) {
this.currentTest.step(op);
}
MultiPointerTypeTest.prototype.skip = function() {
var prevTest = this.currentTest;
this.createNextTest();
prevTest.timeout();
}
MultiPointerTypeTest.prototype.done = function() {
if (this.currentTest.status != 1) {
var prevTest = this.currentTest;
this.createNextTest();
if (prevTest != null)
prevTest.done();
}
}
MultiPointerTypeTest.prototype.step = function(stepFunction) {
this.currentTest.step(stepFunction);
}
MultiPointerTypeTest.prototype.createNextTest = function() {
if (this.currentTypeIndex < this.types.length) {
var pointerTypeDescription = document.getElementById('pointerTypeDescription');
document.getElementById('pointerTypeDescription').innerHTML = "Follow the test instructions with <span style='color: red'>" + this.types[this.currentTypeIndex] + "</span>. If you don't have the device <a href='javascript:;' onclick='globalPointerEventTest.skip()'>skip it</a>.";
this.currentTest = async_test(this.types[this.currentTypeIndex] + ' ' + this.testName);
expectedPointerType = this.types[this.currentTypeIndex];
this.currentTypeIndex++;
} else {
document.getElementById('pointerTypeDescription').innerHTML = "";
}
resetTestState();
}
function setup_pointerevent_test(testName, supportedPointerTypes) {
return globalPointerEventTest = new MultiPointerTypeTest(testName, supportedPointerTypes);
}
function checkPointerEventType(event) {
assert_equals(event.pointerType, expectedPointerType, "pointerType should be the same as the requested device.");
}
function touchScrollInTarget(target, direction) {
var x_delta = 0;
var y_delta = 0;
if (direction == "down") {
x_delta = 0;
y_delta = -10;
} else if (direction == "up") {
x_delta = 0;
y_delta = 10;
} else if (direction == "right") {
x_delta = -10;
y_delta = 0;
} else if (direction == "left") {
x_delta = 10;
y_delta = 0;
} else {
throw("scroll direction '" + direction + "' is not expected, direction should be 'down', 'up', 'left' or 'right'");
}
return new test_driver.Actions()
.addPointer("touchPointer1", "touch")
.pointerMove(0, 0, {origin: target})
.pointerDown()
.pointerMove(x_delta, y_delta, {origin: target})
.pointerMove(2 * x_delta, 2 * y_delta, {origin: target})
.pointerMove(3 * x_delta, 3 * y_delta, {origin: target})
.pointerMove(4 * x_delta, 4 * y_delta, {origin: target})
.pointerMove(5 * x_delta, 5 * y_delta, {origin: target})
.pointerMove(6 * x_delta, 6 * y_delta, {origin: target})
.pause(100)
.pointerUp()
.send();
}
function clickInTarget(pointerType, target) {
var pointerId = pointerType + "Pointer1";
return new test_driver.Actions()
.addPointer(pointerId, pointerType)
.pointerMove(0, 0, {origin: target})
.pointerDown()
.pointerUp()
.send();
}
function rightClickInTarget(pointerType, target) {
let pointerId = pointerType + "Pointer1";
let actions = new test_driver.Actions();
return actions.addPointer(pointerId, pointerType)
.pointerMove(0, 0, {origin: target})
.pointerDown({button:actions.ButtonType.RIGHT})
.pointerUp({button:actions.ButtonType.RIGHT})
.send();
}
function twoFingerDrag(target) {
return new test_driver.Actions()
.addPointer("touchPointer1", "touch")
.addPointer("touchPointer2", "touch")
.pointerMove(0, 0, { origin: target, sourceName: "touchPointer1" })
.pointerMove(10, 0, { origin: target, sourceName: "touchPointer2" })
.pointerDown({ sourceName: "touchPointer1" })
.pointerDown({ sourceName: "touchPointer2" })
.pointerMove(0, 10, { origin: target, sourceName: "touchPointer1" })
.pointerMove(10, 10, { origin: target, sourceName: "touchPointer2" })
.pointerMove(0, 20, { origin: target, sourceName: "touchPointer1" })
.pointerMove(10, 20, { origin: target, sourceName: "touchPointer2" })
.pause(100)
.pointerUp({ sourceName: "touchPointer1" })
.pointerUp({ sourceName: "touchPointer2" })
.send();
}
function pointerDragInTarget(pointerType, target, direction) {
var x_delta = 0;
var y_delta = 0;
if (direction == "down") {
x_delta = 0;
y_delta = 10;
} else if (direction == "up") {
x_delta = 0;
y_delta = -10;
} else if (direction == "right") {
x_delta = 10;
y_delta = 0;
} else if (direction == "left") {
x_delta = -10;
y_delta = 0;
} else {
throw("drag direction '" + direction + "' is not expected, direction should be 'down', 'up', 'left' or 'right'");
}
var pointerId = pointerType + "Pointer1";
return new test_driver.Actions()
.addPointer(pointerId, pointerType)
.pointerMove(0, 0, {origin: target})
.pointerDown()
.pointerMove(x_delta, y_delta, {origin: target})
.pointerMove(2 * x_delta, 2 * y_delta, {origin: target})
.pointerMove(3 * x_delta, 3 * y_delta, {origin: target})
.pointerUp()
.send();
}
function pointerHoverInTarget(pointerType, target, direction) {
var x_delta = 0;
var y_delta = 0;
if (direction == "down") {
x_delta = 0;
y_delta = 10;
} else if (direction == "up") {
x_delta = 0;
y_delta = -10;
} else if (direction == "right") {
x_delta = 10;
y_delta = 0;
} else if (direction == "left") {
x_delta = -10;
y_delta = 0;
} else {
throw("drag direction '" + direction + "' is not expected, direction should be 'down', 'up', 'left' or 'right'");
}
var pointerId = pointerType + "Pointer1";
return new test_driver.Actions()
.addPointer(pointerId, pointerType)
.pointerMove(0, 0, {origin: target})
.pointerMove(x_delta, y_delta, {origin: target})
.pointerMove(2 * x_delta, 2 * y_delta, {origin: target})
.pointerMove(3 * x_delta, 3 * y_delta, {origin: target})
.send();
}
function moveToDocument(pointerType) {
var pointerId = pointerType + "Pointer1";
return new test_driver.Actions()
.addPointer(pointerId, pointerType)
// WebDriver initializes the pointer position (0, 0), therefore, we need
// to move different position first. Otherwise, moving to (0, 0) may be
// ignored.
.pointerMove(1, 1)
.pointerMove(0, 0)
.send();
}
// Returns a promise that only gets resolved when the condition is met.
function resolveWhen(condition) {
return new Promise((resolve, reject) => {
function tick() {
if (condition())
resolve();
else
requestAnimationFrame(tick.bind(this));
}
tick();
});
}
// Returns a promise that only gets resolved after n animation frames
function waitForAnimationFrames(n) {
let p = 0;
function next() {
p++;
return p === n;
}
return resolveWhen(next);
}
function isPointerEvent(eventName) {
return All_Pointer_Events.includes(eventName);
}
function isMouseEvent(eventName) {
return ["mousedown", "mouseup", "mousemove", "mouseover",
"mouseenter", "mouseout", "mouseleave",
"click", "contextmenu", "dblclick"
].includes(eventName);
}
// Events is a list of events fired at a target.
//
// Checks to see if each pointer event has a corresponding mouse event in the
// event array and the two events are in the proper order (pointer event is
// first).
//
function arePointerEventsBeforeCompatMouseEvents(events) {
function arePointerAndMouseEventCompatible(pointerEventName, mouseEventName) {
return pointerEventName.startsWith("pointer")
&& mouseEventName.startsWith("mouse")
&& pointerEventName.substring(7) === mouseEventName.substring(5);
}
function arePointerAndMouseEventInProperOrder(pointerEventIndex, mouseEventIndex, events) {
return (pointerEventIndex < mouseEventIndex && isPointerEvent(events[pointerEventIndex]) && isMouseEvent(events[mouseEventIndex])
&& arePointerAndMouseEventCompatible(events[pointerEventIndex], events[mouseEventIndex]));
}
let currentPointerEventIndex = events.findIndex((event) => isPointerEvent(event));
let currentMouseEventIndex = events.findIndex((event) => isMouseEvent(event));
while (1) {
if (currentMouseEventIndex < 0 && currentPointerEventIndex < 0)
return true;
if (currentMouseEventIndex < 0 || currentPointerEventIndex < 0)
return false;
if (!arePointerAndMouseEventInProperOrder(currentPointerEventIndex, currentMouseEventIndex, events))
return false;
let pointerIdx = events.slice(currentPointerEventIndex + 1).findIndex(isPointerEvent);
let mouseIdx = events.slice(currentMouseEventIndex + 1).findIndex(isMouseEvent);
currentPointerEventIndex = (pointerIdx < 0) ? pointerIdx : (currentPointerEventIndex + 1 + pointerIdx);
currentMouseEventIndex = (mouseIdx < 0) ? mouseIdx : (currentMouseEventIndex + 1 + mouseIdx);
}
return true;
}
// Returns a |Promise| that gets resolved with the event object when |target|
// receives an event of type |event_type|.
//
// The optional |test| parameter adds event handler cleanup for the case |test|
// terminates before the event is received.
function getEvent(event_type, target, test) {
return new Promise(resolve => {
const listener = e => resolve(e);
target.addEventListener(event_type, listener, { once: true });
if (test) {
test.add_cleanup(() =>
target.removeEventListener(event_type, listener, { once: true }));
}
});
}
// Returns a |Promise| that gets resolved with |event.data| when |window|
// receives from |source| a "message" event whose |event.data.type| matches the
// string |message_data_type|.
//
// The optional |test| parameter adds event handler cleanup for the case |test|
// terminates before a matching event is received.
function getMessageData(message_data_type, source, test) {
return new Promise(resolve => {
const listener = e => {
if (e.source != source || !e.data || e.data.type != message_data_type)
return;
window.removeEventListener("message", listener);
resolve(e.data);
}
window.addEventListener("message", listener);
if (test) {
test.add_cleanup(() =>
window.removeEventListener("message", listener));
}
});
}
// The optional |test| parameter adds event handler cleanup for the case |test|
// terminates before the event is received.
function preventDefaultPointerdownOnce(target, test) {
return new Promise((resolve) => {
const listener = e => {
e.preventDefault();
resolve();
}
target.addEventListener("pointerdown", listener, { once: true });
if (test) {
test.add_cleanup(() =>
target.removeEventListener("pointerdown", listener, { once: true }));
}
});
}