summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/touch-events
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/touch-events')
-rw-r--r--testing/web-platform/tests/touch-events/META.yml5
-rw-r--r--testing/web-platform/tests/touch-events/expose-legacy-touch-event-apis.html15
-rw-r--r--testing/web-platform/tests/touch-events/historical.html59
-rw-r--r--testing/web-platform/tests/touch-events/idlharness.window.js19
-rw-r--r--testing/web-platform/tests/touch-events/multi-touch-interactions.html52
-rw-r--r--testing/web-platform/tests/touch-events/multi-touch-interactions.js392
-rw-r--r--testing/web-platform/tests/touch-events/multi-touch-interfaces.html295
-rw-r--r--testing/web-platform/tests/touch-events/single-touch-vertical-rl.html53
-rw-r--r--testing/web-platform/tests/touch-events/single-touch.html392
-rw-r--r--testing/web-platform/tests/touch-events/support/touch.js106
-rw-r--r--testing/web-platform/tests/touch-events/touch-globaleventhandler-interface.html40
-rw-r--r--testing/web-platform/tests/touch-events/touch-retargeting-manual.html36
-rw-r--r--testing/web-platform/tests/touch-events/touch-touchevent-constructor.html145
13 files changed, 1609 insertions, 0 deletions
diff --git a/testing/web-platform/tests/touch-events/META.yml b/testing/web-platform/tests/touch-events/META.yml
new file mode 100644
index 0000000000..3dcab9a534
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/META.yml
@@ -0,0 +1,5 @@
+spec: https://w3c.github.io/touch-events/
+suggested_reviewers:
+ - jtangelder
+ - zqzhang
+ - cynthia
diff --git a/testing/web-platform/tests/touch-events/expose-legacy-touch-event-apis.html b/testing/web-platform/tests/touch-events/expose-legacy-touch-event-apis.html
new file mode 100644
index 0000000000..2dab74dccd
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/expose-legacy-touch-event-apis.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Expose legacy touch event APIs</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const exposeLegacyTouchEventAPIs = 'ontouchstart' in document;
+for (const eventHandler of ['ontouchstart', 'ontouchmove', 'ontouchend', 'ontouchcancel']) {
+ for (const eventTarget of [window, HTMLElement.prototype, SVGElement.prototype, Document.prototype]) {
+ test(() => {
+ assert_equals(eventHandler in eventTarget, exposeLegacyTouchEventAPIs);
+ }, `'${eventHandler}' in ${eventTarget}`);
+ }
+}
+</script>
diff --git a/testing/web-platform/tests/touch-events/historical.html b/testing/web-platform/tests/touch-events/historical.html
new file mode 100644
index 0000000000..16ddf51903
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/historical.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Historical touch events features</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/touch.js"></script>
+<body>
+<script>
+[
+ "webkitRadiusX",
+ "webkitRadiusY",
+ "webkitRotationAngle",
+ "webkitForce",
+].forEach(function(name) {
+ test(function() {
+ assert_false(name in Touch.prototype,
+ "Should not be supported on the prototype");
+
+ var touch = new Touch({identifier: 12341, target:document.body});
+ assert_false(name in touch,
+ "Should not be supported on the instance");
+ }, "Touch::" + name);
+});
+
+test(function() {
+ assert_false("identifiedTouch" in TouchList.prototype,
+ "Should not be supported on the prototype");
+
+ var touchevent = new TouchEvent("touchstart", {});
+ var touchList = touchevent.touches;
+ assert_false("identifiedTouch" in touchList,
+ "Should not be supported on the instance");
+}, "TouchList::identifiedTouch");
+
+test(function() {
+ assert_false("initTouchEvent" in TouchEvent.prototype,
+ "Should not be supported on the prototype");
+
+ var touchEvent = new TouchEvent("touchstart");
+ assert_false("initTouchEvent" in touchEvent,
+ "Should not be supported on the instance");
+}, "TouchEvent::initTouchEvent");
+
+test(function() {
+ assert_false("createTouch" in Document.prototype,
+ "Should not be supported on the prototype");
+
+ assert_false("createTouch" in document,
+ "Should not be supported on the instance");
+}, "Document::createTouch");
+
+test(function() {
+ assert_false("createTouchList" in Document.prototype,
+ "Should not be supported on the prototype");
+
+ assert_false("createTouchList" in document,
+ "Should not be supported on the instance");
+}, "Document::createTouchList");
+</script>
diff --git a/testing/web-platform/tests/touch-events/idlharness.window.js b/testing/web-platform/tests/touch-events/idlharness.window.js
new file mode 100644
index 0000000000..88573286a2
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/idlharness.window.js
@@ -0,0 +1,19 @@
+// META: script=/resources/WebIDLParser.js
+// META: script=/resources/idlharness.js
+
+// https://w3c.github.io/touch-events/
+
+'use strict';
+
+idl_test(
+ ['touch-events'],
+ ['uievents', 'html', 'dom'],
+ idl_array => {
+ idl_array.add_objects({
+ Document: ['document'],
+ GlobalEventHandlers: ['window', 'document', 'document.body'],
+ Touch: ['new Touch({identifier: 1, target: document})'],
+ TouchEvent: ['new TouchEvent("name")'],
+ });
+ }
+);
diff --git a/testing/web-platform/tests/touch-events/multi-touch-interactions.html b/testing/web-platform/tests/touch-events/multi-touch-interactions.html
new file mode 100644
index 0000000000..a10416bdfd
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/multi-touch-interactions.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+ Test cases for Touch Events v1 Recommendation
+ http://www.w3.org/TR/touch-events/
+
+ These tests are based on Mozilla-Nokia-Google's single-touch
+ tests and to some extent Olli Pettay's multi-touch tests.
+
+ The primary purpose of the tests in this document is checking that the interactions
+ of various Touch events are correctly implemented under any touch patterns.
+
+ This document references Test Assertions (abbrev TA below) written by Cathy Chan
+ http://www.w3.org/2010/webevents/wiki/TestAssertions
+-->
+
+<head>
+<title>Touch Events Multi-Touch Interaction Test</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="multi-touch-interactions.js"></script>
+<style>
+ div {
+ margin: 0em;
+ padding: 1.5em;
+ }
+ #target0 {
+ background: yellow;
+ border: 1px solid orange;
+ }
+ #target1 {
+ background: lightblue;
+ border: 1px solid blue;
+ }
+</style>
+</head>
+<body onload="run()">
+ <h1>Touch Events: Multi-Touch Interaction Test</h1>
+ <div id="target0">
+ Touch this box with one finger, then another one...
+ </div>
+ <div id="target1">
+ ...then drag to this box, then touch with a third finger, and lift all your fingers.
+ </div>
+ <div id="debug"></div>
+ <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/touch-events/multi-touch-interactions.js b/testing/web-platform/tests/touch-events/multi-touch-interactions.js
new file mode 100644
index 0000000000..9b883ef7e0
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/multi-touch-interactions.js
@@ -0,0 +1,392 @@
+setup({explicit_done: true});
+
+var debug = document.getElementById("debug");
+
+function debug_print (x) {
+/* uncomment below statement to show debug messages */
+// document.getElementById("debug").innerHTML += x;
+}
+
+var starting_elements = {};
+
+function check_list_subset_of_targetlist(list, list_name, targetlist, targetlist_name) {
+ var exist_in_targetlist;
+ for(i=0; i<list.length; i++) {
+ exist_in_targetlist=false;
+ for(j=0; j<targetlist.length; j++)
+ if(list.item(i).identifier==targetlist.item(j).identifier)
+ exist_in_targetlist=true;
+
+ assert_true(exist_in_targetlist, list_name + ".item("+i+") exists in " + targetlist_name);
+ }
+}
+
+function check_list_subset_of_two_targetlists(list, list_name, targetlist1, targetlist1_name, targetlist2, targetlist2_name) {
+ var exist_in_targetlists;
+ for(i=0; i<list.length; i++) {
+ exist_in_targetlists=false;
+ for(j=0; j<targetlist1.length; j++)
+ if(list.item(i).identifier==targetlist1.item(j).identifier)
+ exist_in_targetlists=true;
+
+ if(!exist_in_targetlists)
+ for(j=0; j<targetlist2.length; j++)
+ if(list.item(i).identifier==targetlist2.item(j).identifier)
+ exist_in_targetlists=true;
+
+ assert_true(exist_in_targetlists, list_name + ".item("+i+") exists in " + targetlist1_name + " or " + targetlist2_name);
+ }
+
+}
+
+function is_at_least_one_item_in_targetlist(list, targetlist) {
+ for(i=0; i<list.length; i++)
+ for(j=0; j<targetlist.length; j++)
+ if(list.item(i).identifier==targetlist.item(j).identifier)
+ return true;
+
+ return false;
+}
+
+function check_no_item_in_targetlist(list, list_name, targetlist, targetlist_name) {
+ for(i=0; i<list.length; i++)
+ for(j=0; j<targetlist.length; j++) {
+ assert_false(list.item(i).identifier==targetlist.item(j).identifier, list_name + ".item("+i+") exists in " + targetlist_name);
+ return;
+ }
+}
+
+function check_targets(list, target) {
+ for(i=0; i<list.length; i++)
+ assert_true(list.item(i).target==target, "item(" + i + ").target is element receiving event");
+}
+
+function check_starting_elements(list) {
+ for (i=0; i<list.length; i++) {
+ assert_equals(list.item(i).target, starting_elements[list.item(i).identifier], "item(" + i + ").target matches starting element");
+ }
+}
+
+function run() {
+ var target0 = document.getElementById("target0");
+ var target1 = document.getElementById("target1");
+
+ var test_touchstart = async_test("touchstart event received");
+ var test_touchmove = async_test("touchmove event received");
+ var test_touchend = async_test("touchend event received");
+ var test_mousedown = async_test("Interaction with mouse events");
+
+ var touchstart_received = 0;
+ var touchmove_received = 0;
+ var touchend_received = 0;
+ var touchstart_identifier;
+
+ // last received touch lists for comparison
+ var last_touches;
+ var last_targetTouches={};
+ var last_changedTouches={};
+
+ var actions_promise;
+
+ on_event(window, "touchstart", function onTouchStart(ev) {
+ // process event only if it's targeted at target0 or target1
+ if(ev.target != target0 && ev.target != target1 )
+ return;
+
+ ev.preventDefault();
+
+ if(!touchstart_received) {
+ // Check event ordering TA: 1.6.1
+ test_touchstart.step(function() {
+ assert_equals(touchmove_received, 0, "touchstart precedes touchmove");
+ assert_equals(touchend_received, 0, "touchstart precedes touchend");
+ });
+ test_touchstart.done();
+ test_mousedown.done(); // If we got here, then the mouse event test is not needed.
+ }
+ touchstart_received++;
+
+ // TA: 1.3.2.2, 1.3.2.4
+ test(function() {
+ assert_true(ev.changedTouches.length >= 1, "changedTouches.length is at least 1");
+ assert_true(ev.changedTouches.length <= ev.touches.length, "changedTouches.length is smaller than touches.length");
+ check_list_subset_of_targetlist(ev.changedTouches, "changedTouches", ev.touches, "touches");
+ }, "touchstart #" + touchstart_received + ": changedTouches is a subset of touches");
+
+ // TA: 1.3.3.2, 1.3.3.3
+ test(function() {
+ assert_true(ev.targetTouches.length >= 1, "targetTouches.length is at least 1");
+ assert_true(ev.targetTouches.length <= ev.touches.length, "targetTouches.length is smaller than touches.length");
+ check_list_subset_of_targetlist(ev.targetTouches, "targetTouches", ev.touches, "touches");
+ }, "touchstart #" + touchstart_received + ": targetTouches is a subset of touches");
+
+ // TA: 1.3.3.9
+ test(function() {
+ check_targets(ev.targetTouches, ev.target);
+ }, "touchstart #" + touchstart_received + ": targets of targetTouches are correct");
+
+ // TA: 1.3.4.2
+ test(function() {
+ assert_true(ev.touches.length >= 1, "touches.length is at least 1");
+ }, "touchstart #" + touchstart_received + ": touches.length is valid");
+
+ if(touchstart_received == 1) {
+ // TA: 1.3.3.5, 1.3.3.7
+ test(function() {
+ assert_true(ev.targetTouches.length <= ev.changedTouches.length, "targetTouches.length is smaller than changedTouches.length");
+ check_list_subset_of_targetlist(ev.targetTouches, "targetTouches", ev.changedTouches, "changedTouches");
+ }, "touchstart #" + touchstart_received + ": targetTouches is a subset of changedTouches");
+
+ // TA: 1.3.4.3
+ test(function() {
+ assert_equals(ev.touches.length, ev.changedTouches.length, "touches and changedTouches have the same length");
+ }, "touchstart #" + touchstart_received + ": touches and changedTouches have the same length");
+ } else {
+ // TA: 1.3.3.6
+ test(function() {
+ var diff_in_targetTouches = ev.targetTouches.length - (last_targetTouches[ev.target.id] ? last_targetTouches[ev.target.id].length : 0);
+ assert_true(diff_in_targetTouches > 0, "targetTouches.length is larger than last received targetTouches.length");
+ assert_true(diff_in_targetTouches <= ev.changedTouches.length, "change in targetTouches.length is smaller than changedTouches.length");
+ }, "touchstart #" + touchstart_received + ": change in targetTouches.length is valid");
+
+ // TA: 1.3.3.8
+ test(function() {
+ assert_true(is_at_least_one_item_in_targetlist(ev.targetTouches, ev.changedTouches), "at least one item of targetTouches is in changedTouches");
+ }, "touchstart #" + touchstart_received + ": at least one targetTouches item in changedTouches");
+
+ // TA: 1.3.4.4
+ test(function() {
+ var diff_in_touches = ev.touches.length - last_touches.length;
+ assert_true(diff_in_touches > 0, "touches.length is larger than last received touches.length");
+ assert_equals(diff_in_touches, ev.changedTouches.length, "change in touches.length equals changedTouches.length");
+ }, "touchstart #" + touchstart_received + ": change in touches.length is valid");
+
+ // TA: 1.3.4.5
+ test(function() {
+ check_list_subset_of_two_targetlists(ev.touches, "touches", ev.changedTouches, "changedTouches", last_touches, "last touches");
+ }, "touchstart #" + touchstart_received + ": touches is subset of {changedTouches, last received touches}");
+ }
+
+ // save starting element of each new touch point
+ for (i=0; i<ev.changedTouches.length; i++) {
+ starting_elements[ev.changedTouches.item(i).identifier] = ev.changedTouches.item(i).target;
+ }
+
+ last_touches = ev.touches;
+ last_targetTouches[ev.target.id] = ev.targetTouches;
+ last_changedTouches = {}; // changedTouches are only saved for touchend events
+ });
+
+ on_event(window, "touchmove", function onTouchMove(ev) {
+ // process event only if it's targeted at target0 or target1
+ if(ev.target != target0 && ev.target != target1 )
+ return;
+
+ ev.preventDefault();
+
+ // TA: 1.6.1
+ test_touchmove.step(function() {
+ assert_true(touchstart_received>0, "touchmove follows touchstart");
+ // assert_false(touchend_received, "touchmove precedes touchend"); // this applies to scenario tests
+ });
+ test_touchmove.done();
+
+ touchmove_received++;
+
+ // do the detailed checking only for a few times
+ if(touchmove_received<6) {
+ // TA: 1.4.2.2, 1.4.2.4
+ test(function() {
+ assert_true(ev.changedTouches.length >= 1, "changedTouches.length is at least 1");
+ assert_true(ev.changedTouches.length <= ev.touches.length, "changedTouches.length is smaller than touches.length");
+ check_list_subset_of_targetlist(ev.changedTouches, "changedTouches", ev.touches, "touches");
+ }, "touchmove #" + touchmove_received + ": changedTouches is a subset of touches");
+
+ // TA: 1.4.3.2, 1.4.3.4
+ test(function() {
+ assert_true(ev.targetTouches.length >= 1, "targetTouches.length is at least 1");
+ assert_true(ev.targetTouches.length <= ev.touches.length, "targetTouches.length is smaller than touches.length");
+ check_list_subset_of_targetlist(ev.targetTouches, "targetTouches", ev.touches, "touches");
+ }, "touchmove #" + touchmove_received + ": targetTouches is a subset of touches");
+
+ // TA: 1.4.3.6
+ test(function() {
+ assert_true(is_at_least_one_item_in_targetlist(ev.targetTouches, ev.changedTouches), "at least one item of targetTouches is in changedTouches");
+ }, "touchmove #" + touchmove_received + ": at least one targetTouches item in changedTouches");
+
+ // TA: 1.4.3.8
+ test(function() {
+ check_targets(ev.targetTouches, ev.target);
+ }, "touchmove #" + touchmove_received + ": targets of targetTouches are correct");
+
+ // TA: 1.4.4.2
+ test(function() {
+ assert_equals(ev.touches.length, last_touches.length, "length of touches is same as length of last received touches");
+ check_list_subset_of_targetlist(ev.touches, "touches", last_touches, "last received touches");
+ }, "touchmove #" + touchmove_received + ": touches must be same as last received touches");
+
+ // TA: 1.6.3
+ check_starting_elements(ev.changedTouches);
+ }
+
+ last_touches = ev.touches;
+ last_targetTouches[ev.target.id] = ev.targetTouches;
+ last_changedTouches = {}; // changedTouches are only saved for touchend events
+ });
+
+ on_event(window, "touchend", function onTouchEnd(ev) {
+ // process event only if it's targeted at target0 or target1
+ if(ev.target != target0 && ev.target != target1 )
+ return;
+
+ test_touchend.step(function() {
+ assert_true(touchstart_received>0, "touchend follows touchstart");
+ });
+ test_touchend.done();
+
+ touchend_received++;
+
+ debug_print("touchend #" + touchend_received + ":<br>");
+ debug_print("changedTouches.length=" + ev.changedTouches.length + "<br>");
+ debug_print("targetTouches.length=" + ev.targetTouches.length + "<br>");
+ debug_print("touches.length=" + ev.touches.length + "<br>");
+ for(i=0; i<ev.changedTouches.length; i++)
+ debug_print("changedTouches.item(" + i + ").target=" + ev.changedTouches.item(i).target.id + "<br>");
+
+ // TA: 1.5.2.2
+ test(function() {
+ assert_true(ev.changedTouches.length >= 1, "changedTouches.length is at least 1");
+ }, "touchend #" + touchend_received + ": length of changedTouches is valid");
+
+ // TA: 1.5.2.3
+ test(function() {
+ check_list_subset_of_targetlist(ev.changedTouches, "changedTouches", last_touches, "last received touches");
+ }, "touchend #" + touchend_received + ": changedTouches is a subset of last received touches");
+
+ // TA: 1.5.2.4, 1.5.2.5
+ test(function() {
+ check_no_item_in_targetlist(ev.changedTouches, "changedTouches", ev.touches, "touches");
+ check_no_item_in_targetlist(ev.changedTouches, "changedTouches", ev.targetTouches, "targetTouches");
+ }, "touchend #" + touchend_received + ": no item in changedTouches are in touches or targetTouches");
+
+ // TA: 1.5.2.6
+ test(function() {
+ var found=false;
+ for (i=0; i<ev.changedTouches.length; i++)
+ if (ev.changedTouches.item(i).target == ev.target)
+ found=true;
+ assert_true(found, "at least one item in changedTouches has matching target");
+ }, "touchend #" + touchend_received + ": at least one item in changedTouches targeted at this element");
+
+ // TA: 1.5.3.2, 1.5.3.3
+ test(function() {
+ assert_true(ev.targetTouches.length >= 0, "targetTouches.length is non-negative");
+ assert_true(ev.targetTouches.length <= ev.touches.length, "targetTouches.length is smaller than touches.length");
+ check_list_subset_of_targetlist(ev.targetTouches, "targetTouches", ev.touches, "touches");
+ }, "touchend #" + touchend_received + ": targetTouches is a subset of touches");
+
+ // TA: 1.5.3.5 (new)
+ test(function() {
+ check_targets(ev.targetTouches, ev.target);
+ }, "touchend #" + touchend_received + ": targets of targetTouches are correct");
+
+ // In some cases, when multiple touch points are released simultaneously
+ // the UA would dispatch the "same" touchend event (same changedTouches, same touches, but possibly different targetTouches)
+ // to each of the elements that are starting elements of the released touch points.
+ // in these situations, the subsequent events are exempt from TA 1.5.3.4 and 1.5.4.2
+ var same_event_as_last = false;
+ if (last_changedTouches && last_changedTouches.length==ev.changedTouches.length) {
+ same_event_as_last = true; // assume true until proven otherwise
+ for (i=0; i<last_changedTouches.length; i++) {
+ var match = false;
+ for (j=0; j<ev.changedTouches.length; j++)
+ if (last_changedTouches.item(i) == ev.changedTouches.item(j)) {
+ match = true;
+ break;
+ }
+ if (!match)
+ same_event_as_last = false;
+ }
+ }
+
+ if (!same_event_as_last) {
+ // TA: 1.5.3.4
+ // Getting semi-random failures on this and 1.5.4.2.
+ // See 1.5.4.2. Not sure if it's the same issue...
+ test(function() {
+ assert_true(last_targetTouches[ev.target.id].length > 0, "last received targetTouches.length is not zero");
+ var diff_in_targetTouches = last_targetTouches[ev.target.id].length - ev.targetTouches.length;
+ debug_print("diff_in_targetTouches=" + diff_in_targetTouches + "<br>");
+ assert_true(diff_in_targetTouches > 0, "targetTouches.length is smaller than last received targetTouches.length");
+ assert_true(diff_in_targetTouches <= ev.changedTouches.length, "change in targetTouches.length is smaller than changedTouches.length");
+ }, "touchend #" + touchend_received + ": change in targetTouches.length is valid");
+
+ // TA: 1.5.4.2
+ // Getting semi-random failures on this and 1.5.3.4.
+ // It looks like if fingers are lifted simultaneously, the "same" touchend event can be dispatched to two target elements
+ // but adapted to the element (same touches, changedTouches but different targetTouches).
+ // When one event is processed after another, ev.touches would end up being identical to last_touches, leading to failure.
+ // Question is why done() does not stop the processing of the latter event.
+ test(function() {
+ assert_true(last_touches.length > 0, "last received touches.length is not zero");
+ var diff_in_touches = last_touches.length - ev.touches.length;
+ debug_print("diff_in_touches=" + diff_in_touches + "<br>");
+ assert_true(diff_in_touches > 0, "touches.length is smaller than last received touches.length");
+ assert_equals(diff_in_touches, ev.changedTouches.length, "change in touches.length equals changedTouches.length");
+ }, "touchend #" + touchend_received + ": change in touches.length is valid");
+ }
+
+ // TA: 1.6.4
+ debug_print("touchend #" + touchend_received + ": TA 1.6.4<br>");
+ test(function() {
+ check_starting_elements(ev.changedTouches);
+ }, "touchend #" + touchend_received + ": event dispatched to correct element<br>");
+
+ debug_print("touchend #" + touchend_received + ": saving touch lists<br>");
+
+ last_touches = ev.touches;
+ last_targetTouches[ev.target.id] = ev.targetTouches;
+ last_changedTouches = ev.changedTouches;
+
+ debug_print("touchend #" + touchend_received + ": done<br>");
+ if(ev.touches.length==0)
+ actions_promise.then( () => done() );
+ });
+
+ on_event(target0, "mousedown", function onMouseDown(ev) {
+ test_mousedown.step(function() {
+ assert_true(touchstart_received,
+ "The touchstart event must be dispatched before any mouse " +
+ "events. (If this fails, it might mean that the user agent does " +
+ "not implement W3C touch events at all.)"
+ );
+ });
+ test_mousedown.done();
+
+ if (!touchstart_received) {
+ // Abort the tests. If touch events are not supported, then most of
+ // the other event handlers will never be called, and the test will
+ // time out with misleading results.
+ done();
+ }
+ });
+
+ actions_promise = new test_driver.Actions()
+ .addPointer("touchPointer1", "touch")
+ .addPointer("touchPointer2", "touch")
+ .addPointer("touchPointer3", "touch")
+ .pointerMove(0, 0, {origin: target0, sourceName: "touchPointer1"})
+ .pointerMove(3, 0, {origin: target0, sourceName: "touchPointer2"})
+ .pointerDown({sourceName: "touchPointer1"})
+ .pointerDown({sourceName: "touchPointer2"})
+ .pointerMove(0, 10, {origin: target0, sourceName: "touchPointer1"})
+ .pointerMove(3, 10, {origin: target0, sourceName: "touchPointer2"})
+ .pointerMove(0, 0, {origin: target1, sourceName: "touchPointer1"})
+ .pointerMove(3, 0, {origin: target1, sourceName: "touchPointer2"})
+ .pointerMove(6, 0, {origin: target0, sourceName: "touchPointer3"})
+ .pointerDown({sourceName: "touchPointer3"})
+ .pointerUp({sourceName: "touchPointer1"})
+ .pointerUp({sourceName: "touchPointer2"})
+ .pointerUp({sourceName: "touchPointer3"})
+ .send();
+}
diff --git a/testing/web-platform/tests/touch-events/multi-touch-interfaces.html b/testing/web-platform/tests/touch-events/multi-touch-interfaces.html
new file mode 100644
index 0000000000..8b5965c2c9
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/multi-touch-interfaces.html
@@ -0,0 +1,295 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+ Test cases for Touch Events v1 Recommendation
+ http://www.w3.org/TR/touch-events/
+
+ These tests are based on Mozilla-Nokia-Google's single-touch
+ tests and to some extent Olli Pettay's multi-touch tests.
+
+ The primary purpose of the tests in this document is checking that the
+ various interfaces of the Touch Events APIs are correctly implemented.
+ Other interactions are covered in other test files.
+
+ This document references Test Assertions (abbrev TA below) written by Cathy Chan
+ http://www.w3.org/2010/webevents/wiki/TestAssertions
+-->
+
+<head>
+<title>Touch Events Multi-Touch Interface Tests</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script>
+ setup({explicit_done: true});
+
+ // Check a Touch object's atttributes for existence and correct type
+ // TA: 1.1.2, 1.1.3
+ function check_Touch_object (t, element) {
+ test(function() {
+ assert_equals(Object.prototype.toString.call(t), "[object Touch]", "touch is of type Touch");
+ }, element + "'s touch point is a Touch object");
+ [
+ ["long", "identifier"],
+ ["EventTarget", "target"],
+ ["long", "screenX"],
+ ["long", "screenY"],
+ ["long", "clientX"],
+ ["long", "clientY"],
+ ["long", "pageX"],
+ ["long", "pageY"],
+ ].forEach(function(attr) {
+ var type = attr[0];
+ var name = attr[1];
+
+ // existence check
+ test(function() {
+ assert_true(name in t, name + " attribute in Touch object");
+ }, element + ".Touch." + name + " attribute exists");
+
+ // type check
+ switch(type) {
+ case "long":
+ test(function() {
+ assert_equals(typeof t[name], "number", name + " attribute of type long");
+ }, element + ".Touch." + name + " attribute is of type number (long)");
+ break;
+ case "EventTarget":
+ // An event target is some type of Element
+ test(function() {
+ assert_true(t[name] instanceof Element, "EventTarget must be an Element.");
+ }, element + ".Touch." + name + " attribute is of type Element");
+ break;
+ default:
+ break;
+ }
+ });
+ }
+
+ // Check a TouchList object's attributes and methods for existence and proper type
+ // Also make sure all of the members of the list are Touch objects
+ // TA: 1.2.1, 1.2.2, 1.2.5, 1.2.6
+ function check_TouchList_object (tl, element) {
+ test(function() {
+ assert_equals(Object.prototype.toString.call(tl), "[object TouchList]", "touch list is of type TouchList");
+ }, element + "'s touch list is a TouchList object");
+ [
+ ["unsigned long", "length"],
+ ["function", "item"],
+ ].forEach(function(attr) {
+ var type = attr[0];
+ var name = attr[1];
+
+ // existence check
+ test(function() {
+ assert_true(name in tl, name + " attribute in TouchList");
+ }, element + ".TouchList." + name + " attribute exists");
+
+ // type check
+ switch(type) {
+ case "unsigned long":
+ test(function() {
+ assert_equals(typeof tl[name], "number", name + " attribute of type long");
+ }, element + ".TouchList." + name + " attribute is of type number (unsigned long)");
+ break;
+ case "function":
+ test(function() {
+ assert_equals(typeof tl[name], "function", name + " attribute of type function");
+ }, element + ".TouchList." + name + " attribute is of type function");
+ break;
+ default:
+ break;
+ }
+ });
+ // Each member of tl should be a proper Touch object
+ for (var i=0; i < tl.length; i++) {
+ check_Touch_object(tl.item(i), element + "[" + i + "]");
+ }
+ }
+
+ // Check a TouchEvent event's attributes for existence and proper type
+ // Also check that each of the event's TouchList objects are valid
+ // TA: 1.{3,4,5}.1.1, 1.{3,4,5}.1.2
+ function check_TouchEvent(ev, touchstart_count) {
+ test(function() {
+ assert_true(ev instanceof TouchEvent, "event is a TouchEvent event");
+ }, ev.type + touchstart_count + " event is a TouchEvent event");
+ [
+ ["TouchList", "touches"],
+ ["TouchList", "targetTouches"],
+ ["TouchList", "changedTouches"],
+ ["boolean", "altKey"],
+ ["boolean", "metaKey"],
+ ["boolean", "ctrlKey"],
+ ["boolean", "shiftKey"],
+ ].forEach(function(attr) {
+ var type = attr[0];
+ var name = attr[1];
+
+ // existence check
+ test(function() {
+ assert_true(name in ev, name + " attribute in " + ev.type + " event");
+ }, ev.type + touchstart_count + "." + name + " attribute exists");
+
+ // type check
+ switch(type) {
+ case "boolean":
+ test(function() {
+ assert_equals(typeof ev[name], "boolean", name + " attribute of type boolean");
+ }, ev.type + touchstart_count + "." + name + " attribute is of type boolean");
+ break;
+ case "TouchList":
+ test(function() {
+ assert_equals(Object.prototype.toString.call(ev[name]), "[object TouchList]", name + " attribute of type TouchList");
+ }, ev.type + touchstart_count + "." + name + " attribute is of type TouchList");
+ // Now check the validity of the TouchList
+ check_TouchList_object(ev[name], ev.type + touchstart_count + "." + name);
+ break;
+ default:
+ break;
+ }
+ });
+ }
+
+ function is_touch_over_element(touch, element) {
+ var bounds = element.getBoundingClientRect();
+ return touch.pageX >= bounds.left && touch.pageX <= bounds.right &&
+ touch.pageY >= bounds.top && touch.pageY <= bounds.bottom;
+ }
+
+ function check_touch_clientXY(touch) {
+ assert_equals(touch.clientX, touch.pageX - window.pageXOffset, "touch.clientX is touch.pageX - window.pageXOffset.");
+ assert_equals(touch.clientY, touch.pageY - window.pageYOffset, "touch.clientY is touch.pageY - window.pageYOffset.");
+ }
+
+ async function run() {
+ var target0 = document.getElementById("target0");
+ var target1 = document.getElementById("target1");
+
+ var test_touchstart = async_test("touchstart event received");
+ var test_touchmove = async_test("touchmove event received");
+ var test_touchend = async_test("touchend event received");
+ var test_mousedown = async_test("Interaction with mouse events");
+
+ var touchstart_received = 0;
+ var touchmove_received = 0;
+ var touchend_received = false;
+ var invalid_touchmove_received = false;
+
+ on_event(target0, "touchstart", function onTouchStart(ev) {
+ ev.preventDefault();
+
+ if(!touchstart_received) {
+ // Check event ordering TA: 1.6.2
+ test_touchstart.step(function() {
+ assert_true(touchmove_received==0, "touchstart precedes touchmove");
+ assert_false(touchend_received, "touchstart precedes touchend");
+ });
+ test_touchstart.done();
+ test_mousedown.done(); // If we got here, then the mouse event test is not needed.
+ }
+
+ if(++touchstart_received <= 2)
+ check_TouchEvent(ev, touchstart_received);
+ });
+
+ on_event(target0, "touchmove", function onTouchMove(ev) {
+ ev.preventDefault();
+
+ if(!touchmove_received) {
+ test_touchmove.step(function() {
+ assert_true(touchstart_received>0, "touchmove follows touchstart");
+ assert_false(touchend_received, "touchmove precedes touchend");
+ });
+ test_touchmove.done();
+ }
+
+ if(++touchmove_received <= 2)
+ check_TouchEvent(ev, touchmove_received);
+ });
+
+ on_event(target1, "touchmove", function onTouchMove(ev) {
+ invalid_touchmove_received = true;
+ });
+
+ on_event(window, "touchend", function onTouchEnd(ev) {
+ touchend_received = true;
+
+ test_touchend.step(function() {
+ assert_true(touchstart_received>0, "touchend follows touchstart");
+ assert_true(touchmove_received>0, "touchend follows touchmove");
+ assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
+ });
+ test_touchend.done();
+
+ check_TouchEvent(ev, touchstart_received);
+ done();
+ });
+
+ on_event(target0, "mousedown", function onMouseDown(ev) {
+ test_mousedown.step(function() {
+ assert_true(touchstart_received,
+ "The touchstart event must be dispatched before any mouse " +
+ "events. (If this fails, it might mean that the user agent does " +
+ "not implement W3C touch events at all.)"
+ );
+ });
+ test_mousedown.done();
+
+ if (!touchstart_received) {
+ // Abort the tests. If touch events are not supported, then most of
+ // the other event handlers will never be called, and the test will
+ // time out with misleading results.
+ done();
+ }
+ });
+
+ await new test_driver.Actions()
+ .addPointer("touchPointer1", "touch")
+ .addPointer("touchPointer2", "touch")
+ .pointerMove(0, 0, {origin: target0, sourceName: "touchPointer1"})
+ .pointerMove(3, 0, {origin: target0, sourceName: "touchPointer2"})
+ .pointerDown({sourceName: "touchPointer1"})
+ .pointerDown({sourceName: "touchPointer2"})
+ .pointerMove(0, 10, {origin: target0, sourceName: "touchPointer1"})
+ .pause(10, "pointer", {sourceName: "touchPointer2"})
+ .pause(10, "pointer", {sourceName: "touchPointer1"})
+ .pointerMove(3, 10, {origin: target0, sourceName: "touchPointer2"})
+ .pointerMove(0, 0, {origin: target1, sourceName: "touchPointer1"})
+ .pause(10, "pointer", {sourceName: "touchPointer2"})
+ .pause(10, "pointer", {sourceName: "touchPointer1"})
+ .pointerMove(3, 0, {origin: target1, sourceName: "touchPointer2"})
+ .pointerUp({sourceName: "touchPointer1"})
+ .pointerUp({sourceName: "touchPointer2"})
+ .send();
+ }
+</script>
+<style>
+ div {
+ margin: 0em;
+ padding: 2em;
+ }
+ #target0 {
+ background: yellow;
+ border: 1px solid orange;
+ }
+ #target1 {
+ background: lightblue;
+ border: 1px solid blue;
+ }
+</style>
+</head>
+<body onload="run()">
+ <h1>Touch Events: multi-touch interface tests</h1>
+ <div id="target0">
+ Touch this box with one finger, then another one...
+ </div>
+ <div id="target1">
+ ...then drag to this box and lift your fingers.
+ </div>
+ <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/touch-events/single-touch-vertical-rl.html b/testing/web-platform/tests/touch-events/single-touch-vertical-rl.html
new file mode 100644
index 0000000000..857007b1f8
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/single-touch-vertical-rl.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Touch events with vertical-rl writing mode</title>
+ <meta name="viewport" content="width=device-width">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/resources/testdriver.js"></script>
+ <script src="/resources/testdriver-actions.js"></script>
+ <script src="/resources/testdriver-vendor.js"></script>
+
+ <script>
+ setup({explicit_done: true});
+
+ async function run() {
+ document.documentElement.addEventListener("touchstart", function onTouchStart(event) {
+ test(function() {
+ assert_equals(event.changedTouches[0].clientX, 10, "clientX");
+ assert_equals(event.changedTouches[0].clientY, 20, "clientY");
+ }, "touchstart client coordinates are correct in vertical-rl");
+ });
+
+ document.documentElement.addEventListener("click", function onClick(event) {
+ test(function() {
+ assert_equals(event.clientX, 10, "clientX");
+ assert_equals(event.clientY, 20, "clientY");
+ }, "click client coordinates are correct in vertical-rl");
+ done();
+ });
+
+ let actions = new test_driver.Actions()
+ .addPointer("touchPointer1", "touch")
+ .pointerMove(10, 20)
+ .pointerDown()
+ .pointerUp();
+ actions.send();
+ }
+ </script>
+ <style>
+ body {
+ margin: 0;
+ writing-mode: vertical-rl;
+ }
+ .forcescroll {
+ width: 5000px;
+ height: 20px;
+ }
+ </style>
+</head>
+<body onload="run()">
+ <div class="forcescroll"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/touch-events/single-touch.html b/testing/web-platform/tests/touch-events/single-touch.html
new file mode 100644
index 0000000000..4db96c208d
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/single-touch.html
@@ -0,0 +1,392 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+ Test cases for Touch Events v1 Recommendation
+ http://www.w3.org/TR/touch-events/
+
+ These tests are based on Matt Bruebeck's single-touch tests.
+ There are NO multi-touch tests in this document.
+
+ This document references Test Assertions (abbrev TA below) written by Cathy Chan
+ http://www.w3.org/2010/webevents/wiki/TestAssertions
+-->
+
+<head>
+ <title>Touch Events Single Touch Tests</title>
+ <meta name="viewport" content="width=device-width">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/resources/testdriver.js"></script>
+ <script src="/resources/testdriver-actions.js"></script>
+ <script src="/resources/testdriver-vendor.js"></script>
+
+ <script>
+ setup({explicit_done: true});
+
+ // Check a Touch object's atttributes for existence and correct type
+ // TA: 1.1.2, 1.1.3
+ function check_Touch_object (t, element) {
+ test(function() {
+ assert_equals(Object.prototype.toString.call(t), "[object Touch]", name + " attribute of type TouchList");
+ }, element + "'s touch point is a Touch object");
+ [
+ ["long", "identifier"],
+ ["EventTarget", "target"],
+ ["long", "screenX"],
+ ["long", "screenY"],
+ ["long", "clientX"],
+ ["long", "clientY"],
+ ["long", "pageX"],
+ ["long", "pageY"],
+ ].forEach(function(attr) {
+ var type = attr[0];
+ var name = attr[1];
+
+ // existence check
+ test(function() {
+ assert_true(name in t, name + " attribute in Touch object");
+ }, element + ".Touch." + name + " attribute exists check_Touch_object");
+
+ // type check
+ switch(type) {
+ case "long":
+ test(function() {
+ assert_equals(typeof t[name], "number", name + " attribute of type long");
+ }, element + ".Touch." + name + " attribute is of type number (long)");
+ break;
+ case "EventTarget":
+ // An event target is some type of Element
+ test(function() {
+ assert_true(t[name] instanceof Element, "EventTarget must be an Element.");
+ }, element + ".Touch." + name + " attribute is of type Element");
+ break;
+ default:
+ break;
+ }
+ });
+ }
+
+ // Check a TouchList object's attributes and methods for existence and proper type
+ // Also make sure all of the members of the list are Touch objects
+ // TA: 1.2.1, 1.2.2, 1.2.5
+ function check_TouchList_object (tl, element) {
+ test(function() {
+ assert_equals(Object.prototype.toString.call(tl), "[object TouchList]", name + " attribute of type TouchList");
+ }, element + "'s touch list is a TouchList object");
+ [
+ ["unsigned long", "length"],
+ ["function", "item"],
+ ].forEach(function(attr) {
+ var type = attr[0];
+ var name = attr[1];
+
+ // existence check
+ test(function() {
+ assert_true(name in tl, name + " attribute in TouchList");
+ }, element + ".TouchList." + name + " attribute exists check_TouchList_object");
+
+ // type check
+ switch(type) {
+ case "unsigned long":
+ test(function() {
+ assert_equals(typeof tl[name], "number", name + " attribute of type long");
+ }, element + ".TouchList." + name + " attribute is of type number (unsigned long)");
+ break;
+ case "function":
+ test(function() {
+ assert_equals(typeof tl[name], "function", name + " attribute of type function");
+ }, element + ".TouchList." + name + " attribute is of type function");
+ break;
+ default:
+ break;
+ }
+ });
+ // Each member of tl should be a proper Touch object
+ for (var i=0; i < tl.length; i++) {
+ check_Touch_object(tl.item(i), element + "[" + i + "]");
+ }
+ }
+
+ // Check a TouchEvent event's attributes for existence and proper type
+ // Also check that each of the event's TouchList objects are valid
+ // TA: 1.{3,4,5}.1.1, 1.{3,4,5}.1.2
+ function check_TouchEvent(ev) {
+ test(function() {
+ assert_true(ev instanceof TouchEvent, "event is a TouchEvent event");
+ }, ev.type + " event is a TouchEvent event");
+ [
+ ["TouchList", "touches"],
+ ["TouchList", "targetTouches"],
+ ["TouchList", "changedTouches"],
+ ["boolean", "altKey"],
+ ["boolean", "metaKey"],
+ ["boolean", "ctrlKey"],
+ ["boolean", "shiftKey"],
+ ].forEach(function(attr) {
+ var type = attr[0];
+ var name = attr[1];
+
+ // existence check
+ test(function() {
+ assert_true(name in ev, name + " attribute in " + ev.type + " event");
+ }, ev.type + "." + name + " attribute exists check_TouchEvent");
+
+ // type check
+ switch(type) {
+ case "boolean":
+ test(function() {
+ assert_equals(typeof ev[name], "boolean", name + " attribute of type boolean");
+ }, ev.type + "." + name + " attribute is of type boolean");
+ break;
+ case "TouchList":
+ test(function() {
+ assert_equals(Object.prototype.toString.call(ev[name]), "[object TouchList]", name + " attribute of type TouchList");
+ }, ev.type + "." + name + " attribute is of type TouchList");
+ // Now check the validity of the TouchList
+ check_TouchList_object(ev[name], ev.type + "." + name);
+ break;
+ default:
+ break;
+ }
+ });
+ }
+
+ function is_touch_over_element(touch, element) {
+ var bounds = element.getBoundingClientRect();
+ return touch.pageX >= bounds.left && touch.pageX <= bounds.right &&
+ touch.pageY >= bounds.top && touch.pageY <= bounds.bottom;
+ }
+
+ function check_touch_clientXY(touch) {
+ assert_equals(touch.clientX, touch.pageX - window.pageXOffset, "touch.clientX is touch.pageX - window.pageXOffset.");
+ assert_equals(touch.clientY, touch.pageY - window.pageYOffset, "touch.clientY is touch.pageY - window.pageYOffset.");
+ }
+
+ function check_screenXY_clientXY_pageXY(touch) {
+ assert_greater_than_equal(touch.screenX, 0, "touch.screenX is no less than 0");
+ assert_greater_than_equal(touch.screenY, 0, "touch.screenY is no less than 0");
+ assert_greater_than_equal(touch.clientX, 0, "touch.clientX is no less than 0");
+ assert_greater_than_equal(touch.clientY, 0, "touch.clientY is no less than 0");
+ assert_greater_than_equal(touch.pageX, 0, "touch.pageX is no less than 0");
+ assert_greater_than_equal(touch.pageY, 0, "touch.pageY is no less than 0");
+ }
+
+ async function run() {
+ var target0 = document.getElementById("target0");
+ var target1 = document.getElementById("target1");
+
+ var test_touchstart = async_test("touchstart event received");
+ var test_touchmove = async_test("touchmove event received");
+ var test_touchend = async_test("touchend event received");
+ var test_mousedown = async_test("Interaction with mouse events");
+
+ var touchstart_received = false;
+ var touchmove_received = false;
+ var touchend_received = false;
+ var invalid_touchmove_received = false;
+ var touchstart_identifier;
+
+ on_event(target0, "touchstart", function onTouchStart(ev) {
+ ev.preventDefault();
+
+ // Check event ordering TA: 1.6.2
+ test_touchstart.step(function() {
+ assert_false(touchstart_received, "duplicate touchstart event");
+ assert_false(touchmove_received, "touchstart precedes touchmove");
+ assert_false(touchend_received, "touchstart precedes touchend");
+ });
+ test_touchstart.done();
+ if (touchstart_received)
+ return;
+ touchstart_received = true;
+ test_mousedown.done(); // If we got here, then the mouse event test is not needed.
+
+ check_TouchEvent(ev);
+
+ // TA: 1.3.2.1, 1.3.3.1, 1.3.4.1
+ test(function() {
+ assert_equals(ev.touches.length, 1, "One touch point.");
+ assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
+ assert_equals(ev.targetTouches.length, 1, "One target touch point.");
+ }, "touchstart: all TouchList lengths are correct");
+
+ var t = ev.touches[0];
+ var ct = ev.changedTouches[0];
+ var tt = ev.targetTouches[0];
+
+ touchstart_identifier = t.identifier;
+ // TA: 1.3.3.3, 1.3.2.3, 1.3.3.4 (indirect (transitive))
+ test(function() {
+ assert_equals(ct.identifier, touchstart_identifier, "changedTouches identifier matches.");
+ assert_equals(tt.identifier, touchstart_identifier, "targetTouches identifier matches.");
+ }, "touchstart: all TouchList identifiers are consistent");
+
+ // TA: 1.3.3.9
+ test(function() {
+ assert_equals(tt.target, ev.target, "event target same as targetTouches target.");
+ }, "touchstart: event target same as targetTouches target");
+
+ test(function() {
+ assert_true(is_touch_over_element(t, target0), "touch.pageX/pageY is over target0.");
+ }, "touchstart: touch pageX/pageY inside of target element");
+ test(function() {
+ check_touch_clientXY(t);
+ }, "touchstart: touch clientX/clientY is consistent with pageX/pageY");
+ // Note we don't bother testing screenX/screenY values - there's no reliable way to
+ // verify they are consistent with clientX/clientY (due to unknown amount of window
+ // chrome), and also various forms of scaling mean they are in different units.
+
+ test(function() {
+ check_screenXY_clientXY_pageXY(t);
+ }, "touchstart: touch screenX/screenY pageX/pageY and clientX/clientY values are no less than 0");
+ });
+
+ on_event(target0, "touchmove", function ontouchmove(ev) {
+ ev.preventDefault();
+
+ if (touchmove_received)
+ return;
+ touchmove_received = true;
+
+ test_touchmove.step(function() {
+ assert_true(touchstart_received, "touchmove follows touchstart");
+ assert_false(touchend_received, "touchmove precedes touchend");
+ });
+ test_touchmove.done();
+
+ check_TouchEvent(ev);
+
+ // TA: 1.4.2.1, 1.4.3.1
+ test(function() {
+ assert_equals(ev.touches.length, 1, "One touch point.");
+ assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
+ assert_equals(ev.targetTouches.length, 1, "One target touch point.");
+ }, "touchmove: all TouchList lengths are correct");
+
+ // 1.4.2.3, 1.4.3.3, 1.4.3.5, 1.4.4.3
+ test(function() {
+ assert_equals(ev.touches[0].identifier, touchstart_identifier, "Touch identifier matches.");
+ assert_equals(ev.changedTouches[0].identifier, touchstart_identifier, "Changed touch identifier matches.");
+ assert_equals(ev.targetTouches[0].identifier, touchstart_identifier, "Target touch identifier matches.");
+ }, "touchmove: all TouchList identifiers matches touchstart identifier");
+
+ // TA: 1.4.3.8
+ var tt = ev.targetTouches[0];
+ test(function() {
+ assert_equals(tt.target, ev.target, "event target same as targetTouches target.");
+ }, "touchmove: event target same as targetTouches target");
+
+ test(function() {
+ assert_true(is_touch_over_element(tt, target0) || is_touch_over_element(tt, target1),
+ "touch.pageX/pageY is over one of the targets.");
+ }, "touchmove: touch pageX/pageY inside of one of the target elements");
+ test(function() {
+ check_touch_clientXY(tt);
+ }, "touchmove: touch clientX/clientY is consistent with pageX/pageY");
+
+ test(function() {
+ check_screenXY_clientXY_pageXY(tt);
+ }, "touchmove: touch screenX/screenY pageX/pageY and clientX/clientY values are no less than 0");
+
+ });
+
+ on_event(target1, "touchmove", function onTouchMove(ev) {
+ invalid_touchmove_received = true;
+ });
+
+ on_event(window, "touchend", function ontouchend(ev) {
+ touchend_received = true;
+
+ test_touchend.step(function() {
+ assert_equals(ev.target, target0, "touchend is dispatched to the original target");
+ assert_true(touchstart_received, "touchend follows touchstart");
+ assert_true(touchmove_received, "touchend follows touchmove");
+ assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
+ });
+ test_touchend.done();
+
+ check_TouchEvent(ev);
+
+ // TA: 1.5.1.2, 1.5.3.1, 1.5.4.1
+ test(function() {
+ assert_equals(ev.touches.length, 0, "Zero touch points.");
+ assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
+ assert_equals(ev.targetTouches.length, 0, "Zero target touch points.");
+ }, "touchend: all TouchList lengths are correct");
+
+ var t = ev.changedTouches[0];
+
+ // TA: 1.5.2.6, 1.5.2.3
+ test(function() {
+ assert_equals(t.identifier, touchstart_identifier, "changedTouches identifier matches.");
+ }, "touchend: touches identifier matches changedTouches identifier");
+
+ test(function() {
+ assert_true(is_touch_over_element(t, target1),
+ "touch.pageX/pageY is over target1.");
+ }, "touchend: touch pageX/pageY inside expected element");
+ test(function() {
+ check_touch_clientXY(t);
+ }, "touchend: touch clientX/clientY is consistent with pageX/pageY");
+
+ test(function() {
+ check_screenXY_clientXY_pageXY(t);
+ }, "touchend: touch screenX/screenY pageX/pageY and clientX/clientY values are no less than 0");
+
+ done();
+ });
+
+ on_event(target0, "mousedown", function onMouseDown(ev) {
+ test_mousedown.step(function() {
+ assert_true(touchstart_received,
+ "The touchstart event must be dispatched before any mouse " +
+ "events. (If this fails, it might mean that the user agent does " +
+ "not implement W3C touch events at all.)"
+ );
+ });
+ test_mousedown.done();
+
+ if (!touchstart_received) {
+ // Abort the tests. If touch events are not supported, then most of
+ // the other event handlers will never be called, and the test will
+ // time out with misleading results.
+ done();
+ }
+ });
+
+ await new test_driver.Actions()
+ .addPointer("touchPointer1", "touch")
+ .pointerMove(0, 0, {origin: target0, sourceName: "touchPointer1"})
+ .pointerDown({sourceName: "touchPointer1"})
+ .pointerMove(0, 10, {origin: target0, sourceName: "touchPointer1"})
+ .pointerMove(0, 0, {origin: target1, sourceName: "touchPointer1"})
+ .pointerUp({sourceName: "touchPointer1"})
+ .send();
+ }
+ </script>
+ <style>
+ div {
+ margin: 0em;
+ padding: 2em;
+ }
+ #target0 {
+ background: yellow;
+ border: 1px solid orange;
+ }
+ #target1 {
+ background: lightblue;
+ border: 1px solid blue;
+ }
+ </style>
+</head>
+<body onload="run()">
+ <h1>Touch Events: single-touch tests</h1>
+ <div id="target0">
+ Touch this box with one finger (or other pointing device)...
+ </div>
+ <div id="target1">
+ ...then drag to this box and lift your finger.
+ </div>
+ <div id="log"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/touch-events/support/touch.js b/testing/web-platform/tests/touch-events/support/touch.js
new file mode 100644
index 0000000000..f4bc0467db
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/support/touch.js
@@ -0,0 +1,106 @@
+// Check a Touch object's attributes for existence and correct type
+// TA: 1.1.2, 1.1.3
+function check_Touch_object(t) {
+ assert_equals(Object.prototype.toString.call(t), "[object Touch]", "touch is of type Touch");
+ [
+ ["long", "identifier"],
+ ["EventTarget", "target"],
+ ["long", "screenX"],
+ ["long", "screenY"],
+ ["long", "clientX"],
+ ["long", "clientY"],
+ ["long", "pageX"],
+ ["long", "pageY"],
+ ["long", "radiusX"],
+ ["long", "radiusY"],
+ ["long", "rotationAngle"],
+ ["long", "force"],
+ ].forEach(function(attr) {
+ var type = attr[0];
+ var name = attr[1];
+
+ // existence check
+ assert_true(name in t, name + " attribute in Touch object");
+
+ // type check
+ switch (type) {
+ case "long":
+ assert_equals(typeof t[name], "number", name + " attribute of type long");
+ break;
+ case "EventTarget":
+ // An event target is some type of Element
+ assert_true(t[name] instanceof Element, "EventTarget must be an Element.");
+ break;
+ default:
+ break;
+ }
+ });
+}
+
+// Check a TouchList object's attributes and methods for existence and proper type
+// Also make sure all of the members of the list are Touch objects
+// TA: 1.2.1, 1.2.2, 1.2.5, 1.2.6
+function check_TouchList_object(tl) {
+ assert_equals(Object.prototype.toString.call(tl), "[object TouchList]", "touch list is of type TouchList");
+ [
+ ["unsigned long", "length"],
+ ["function", "item"],
+ ].forEach(function(attr) {
+ var type = attr[0];
+ var name = attr[1];
+
+ // existence check
+ assert_true(name in tl, name + " attribute in TouchList");
+
+ // type check
+ switch (type) {
+ case "unsigned long":
+ assert_equals(typeof tl[name], "number", name + " attribute of type long");
+ break;
+ case "function":
+ assert_equals(typeof tl[name], "function", name + " attribute of type function");
+ break;
+ default:
+ break;
+ }
+ });
+ // Each member of tl should be a proper Touch object
+ for (var i = 0; i < tl.length; i++) {
+ check_Touch_object(tl.item(i));
+ }
+ // TouchList.item(x) should return null if x is >= TouchList.length
+ var t = tl.item(tl.length);
+ assert_equals(t, null, "TouchList.item returns null if the index is >= the length of the list");
+}
+
+// Check a TouchEvent event's attributes for existence and proper type
+// Also check that each of the event's TouchList objects are valid
+// TA: 1.{3,4,5}.1.1, 1.{3,4,5}.1.2
+function check_TouchEvent(ev) {
+ assert_true(ev instanceof TouchEvent, ev.type + " event is a TouchEvent event");
+ [
+ ["TouchList", "touches"],
+ ["TouchList", "targetTouches"],
+ ["TouchList", "changedTouches"],
+ ["boolean", "altKey"],
+ ["boolean", "metaKey"],
+ ["boolean", "ctrlKey"],
+ ["boolean", "shiftKey"],
+ ].forEach(function(attr) {
+ var type = attr[0];
+ var name = attr[1];
+ // existence check
+ assert_true(name in ev, name + " attribute in " + ev.type + " event");
+ // type check
+ switch (type) {
+ case "boolean":
+ assert_equals(typeof ev[name], "boolean", name + " attribute of type boolean");
+ break;
+ case "TouchList":
+ assert_equals(Object.prototype.toString.call(ev[name]), "[object TouchList]", name + " attribute of type TouchList");
+ break;
+ default:
+ break;
+ }
+ });
+}
diff --git a/testing/web-platform/tests/touch-events/touch-globaleventhandler-interface.html b/testing/web-platform/tests/touch-events/touch-globaleventhandler-interface.html
new file mode 100644
index 0000000000..1513cdaa21
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/touch-globaleventhandler-interface.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<title>GlobalEventHandlers Touch Interface Tests</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+function supportsTouchEvents() {
+ assert_implements_optional('ontouchstart' in document, "'expose legacy touch event APIs'");
+}
+test(function() {
+ supportsTouchEvents();
+ var touch_event_list = ['ontouchstart', 'ontouchmove', 'ontouchend', 'ontouchcancel'];
+ var global_event_handlers = [window, HTMLElement.prototype, SVGElement.prototype, Document.prototype];
+ for (var i in touch_event_list) {
+ for (var j in global_event_handlers) {
+ assert_true(touch_event_list[i] in global_event_handlers[j], "Touch event " + touch_event_list[i] + " in " + global_event_handlers[j].constructor.name);
+ }
+ }
+}, "Touch events in GlobalEventHandlers");
+
+test(function() {
+ supportsTouchEvents();
+ var touch_event_list = ['ontouchstart', 'ontouchmove', 'ontouchend', 'ontouchcancel'];
+ var global_event_handlers = [window, HTMLElement.prototype, SVGElement.prototype, Document.prototype];
+ for (var i in touch_event_list) {
+ for (var j in global_event_handlers) {
+ assert_true(global_event_handlers[j].hasOwnProperty(touch_event_list[i]), "GlobalEventHandler " + global_event_handlers[j].constructor.name + " hasOwnProperty " + touch_event_list[i]);
+ }
+ }
+}, "Touch events are GlobalEventHandlers' own property");
+
+test(function() {
+ var touch_event_list = ['ontouchstart', 'ontouchmove', 'ontouchend', 'ontouchcancel'];
+ var non_global_event_handlers = [Element.prototype];
+ for (var i in touch_event_list) {
+ for (var j in non_global_event_handlers) {
+ assert_false(touch_event_list[i] in non_global_event_handlers[j], "Touch event " + touch_event_list[i] + " not in " + non_global_event_handlers[j].constructor.name);
+ }
+ }
+}, "Touch events not in Element.prototype");
+</script>
diff --git a/testing/web-platform/tests/touch-events/touch-retargeting-manual.html b/testing/web-platform/tests/touch-events/touch-retargeting-manual.html
new file mode 100644
index 0000000000..a90bb48d64
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/touch-retargeting-manual.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>TouchEvent Retargeting Tests</title>
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+ <h1>Touch retargeting manual test</h1>
+ <div>This test requires touch input.</div>
+ <div id="host"></div>
+</body>
+<script>
+ var host = document.getElementById("host");
+ var root = host.attachShadow({ mode: "open" });
+ var target = document.createElement("h2");
+ target.textContent = "Tap on THIS line of text";
+ root.appendChild(target);
+
+ var test_touch_retargeting = async_test("touch_retargeting");
+
+ on_event(host, "touchstart", e => {
+ test_touch_retargeting.step(() => {
+ assert_equals(e.touches.length, 1, "touches.length is correct");
+ assert_equals(e.touches[0].target, host, "touches[0] is retargeted to host");
+
+ assert_equals(e.targetTouches.length, 1, "targetTouches.length is correct");
+ assert_equals(e.targetTouches[0].target, host, "targetTouches[0] is retargeted to host");
+
+ assert_equals(e.changedTouches.length, 1, "changedTouches.length is correct");
+ assert_equals(e.changedTouches[0].target, host, "changedTouches[0] is retargeted to host");
+ });
+ });
+ on_event(host, "touchend", e => test_touch_retargeting.done());
+</script>
+</html>
diff --git a/testing/web-platform/tests/touch-events/touch-touchevent-constructor.html b/testing/web-platform/tests/touch-events/touch-touchevent-constructor.html
new file mode 100644
index 0000000000..e2d0950d5e
--- /dev/null
+++ b/testing/web-platform/tests/touch-events/touch-touchevent-constructor.html
@@ -0,0 +1,145 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Touch and TouchEvent Constructor Tests</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/touch.js"></script>
+</head>
+<body>
+<div id="target0"></div>
+<script>
+test(function() {
+ var testIdentifier = 0;
+ var testTarget = document.getElementById('target0');
+
+ assert_throws_js(TypeError, function() {new Touch();}, "Touch constructor with no argument");
+ assert_throws_js(TypeError, function() {new Touch(null);}, "Touch constructor with null argument");
+ assert_throws_js(TypeError, function() {new Touch(undefined);}, "Touch constructor with undefined argument");
+ assert_throws_js(TypeError, function() {new Touch({});}, "Touch constructor with empty object");
+ assert_throws_js(TypeError, function() {new Touch({
+ identifier: testIdentifier
+ });}, "Touch constructor with only identifier");
+ assert_throws_js(TypeError, function() {new Touch({
+ target: testTarget
+ });}, "Touch constructor with only target");
+}, "Touch constructor with insufficient properties");
+
+test(function() {
+ var testIdentifier = 0;
+ var testTarget = document.getElementById('target0');
+
+ assert_throws_js(TypeError, function() {new Touch({
+ identifier: testIdentifier,
+ target: null
+ });}, "Touch constructor with null target");
+ assert_throws_js(TypeError, function() {new Touch({
+ identifier: testIdentifier,
+ target: undefined
+ });}, "Touch constructor with undefined target");
+ assert_throws_js(TypeError, function() {new Touch({
+ identifier: testIdentifier,
+ target: location
+ });}, "Touch constructor with Location target");
+}, "Touch constructor with non-EventTarget target");
+
+test(function() {
+ var testIdentifier = 74;
+ var testTarget = document.getElementById('target0');
+ var approxEpsilon = 0.00001;
+
+ var touch1 = new Touch({
+ identifier: testIdentifier,
+ target: testTarget,
+ });
+ check_Touch_object(touch1);
+ assert_equals(touch1.target, testTarget, "touch.target is requested value");
+ assert_equals(touch1.identifier, testIdentifier, "touch.identifier is requested value");
+ assert_approx_equals(touch1.pageX, 0, approxEpsilon, "touch.pageX is default value");
+ assert_approx_equals(touch1.pageY, 0, approxEpsilon, "touch.pageY is default value");
+ assert_approx_equals(touch1.screenX, 0, approxEpsilon, "touch.screenX is default value");
+ assert_approx_equals(touch1.screenY, 0, approxEpsilon, "touch.screenY is default value");
+ assert_approx_equals(touch1.clientX, 0, approxEpsilon, "touch.clientX is default value.");
+ assert_approx_equals(touch1.clientY, 0, approxEpsilon, "touch.clientY is default value.");
+}, "Touch constructor exists and creates a Touch object with minimum properties");
+
+test(function() {
+ var testIdentifier = 42;
+ var testTarget = document.getElementById('target0');
+ var testPageX = 15;
+ var testPageY = 20.2;
+ var testScreenX = 35.34;
+ var testScreenY = 40.56;
+ var testClientX = 10.175;
+ var testClientY = 5;
+ var approxEpsilon = 0.00001;
+
+ var touch1 = new Touch({
+ identifier: testIdentifier,
+ target: testTarget,
+ pageX: testPageX,
+ pageY: testPageY,
+ screenX: testScreenX,
+ screenY: testScreenY,
+ clientX: testClientX,
+ clientY: testClientY,
+ });
+ check_Touch_object(touch1);
+ assert_equals(touch1.identifier, testIdentifier, "touch.identifier is requested value");
+ assert_equals(touch1.target, testTarget, "touch.target is requested value");
+ assert_approx_equals(touch1.pageX, testPageX, approxEpsilon, "touch.pageX is requested value");
+ assert_approx_equals(touch1.pageY, testPageY, approxEpsilon, "touch.pageY is requested value");
+ assert_approx_equals(touch1.screenX, testScreenX, approxEpsilon, "touch.screenX is requested value");
+ assert_approx_equals(touch1.screenY, testScreenY, approxEpsilon, "touch.screenY is requested value");
+ assert_approx_equals(touch1.clientX, testClientX, approxEpsilon, "touch.clientX is requested value.");
+ assert_approx_equals(touch1.clientY, testClientY, approxEpsilon, "touch.clientY is requested value.");
+}, "Touch constructor exists and creates a Touch object with requested properties");
+
+
+test(function() {
+ var testTarget = document.getElementById('target0');
+
+ var touch1 = new Touch({
+ identifier: 45,
+ target: testTarget,
+ pageX: 45,
+ pageY: 50,
+ screenX: 65,
+ screenY: 60,
+ clientX: 70,
+ clientY: 75,
+ });
+ var touch2 = new Touch({
+ identifier: 52,
+ target: testTarget,
+ pageX: 15,
+ pageY: 20,
+ screenX: 15,
+ screenY: 20,
+ clientX: 15,
+ clientY: 20,
+ });
+
+ var touchEvent1 = new TouchEvent("ontouchstart", {
+ touches: [touch1, touch2],
+ targetTouches: [touch1],
+ altKey: true,
+ metaKey: false,
+ });
+
+ check_TouchEvent(touchEvent1);
+ assert_equals(touchEvent1.type, "ontouchstart", "touchEvent.type is requested value");
+ assert_equals(touchEvent1.touches.length, 2, "touchEvent.touches.length is requested value");
+ assert_equals(touchEvent1.touches[0], touch1, "touchEvent.touches[0] is requested value");
+ assert_equals(touchEvent1.touches[1], touch2, "touchEvent.touches[1] is requested value");
+ assert_equals(touchEvent1.targetTouches.length, 1, "touchEvent.targetTouches.length is requested value");
+ assert_equals(touchEvent1.targetTouches[0], touch1, "touchEvent.targetTouches[0] is requested value");
+ assert_equals(touchEvent1.changedTouches.length, 0, "touchEvent.changedTouches.length is requested value");
+ assert_equals(touchEvent1.altKey, true, "touchEvent.altKey is requested value");
+ assert_equals(touchEvent1.metaKey, false, "touchEvent.metaKey is requested value");
+ assert_equals(touchEvent1.ctrlKey, false, "touchEvent.ctrlKey is requested value");
+ assert_equals(touchEvent1.shiftKey, false, "touchEvent.shiftKey is requested value.");
+}, "TouchEvent constructor exists and creates a TouchEvent object with requested properties");
+</script>
+</body>
+</html>