diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/touch-events | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/touch-events')
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> |