123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557 |
- <!DOCTYPE HTML>
- <html>
- <!--
- https://bugzilla.mozilla.org/show_bug.cgi?id=508906
- -->
- <head>
- <title>Test for Bug 603008</title>
- <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
- <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
- </head>
- <body>
- <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508906">Mozilla Bug 603008</a>
- <p id="display"></p>
- <div id="content" style="display: none">
-
- </div>
- <pre id="test">
- <script class="testbody" type="application/javascript;version=1.8">
- /** Test for Bug 306008 - Touch* Events **/
- let tests = [], testTarget, parent;
- let touch = {
- id: 0,
- point: {x: 0, y: 0},
- radius: {x: 0, y: 0},
- rotation: 0,
- force: 0.5,
- target: null
- }
- function nextTest() {
- if (tests.length)
- SimpleTest.executeSoon(tests.shift());
- }
- function random() {
- return Math.floor(Math.random() * 100);
- }
- function checkEvent(aFakeEvent) {
- return function(aEvent) {
- is(aFakeEvent.ctrlKey, aEvent.ctrlKey, "Correct ctrlKey");
- is(aFakeEvent.altKey, aEvent.altKey, "Correct altKey");
- is(aFakeEvent.shiftKey, aEvent.shiftKey, "Correct shiftKey");
- is(aFakeEvent.metaKey, aEvent.metaKey, "Correct metaKey");
- checkTouches(aFakeEvent.touches, aEvent.touches);
- checkTouches(aFakeEvent.targetTouches, aEvent.targetTouches);
- checkTouches(aFakeEvent.changedTouches, aEvent.changedTouches);
- }
- }
- function checkTouches(aTouches1, aTouches2) {
- is(aTouches1.length, aTouches2.length, "Correct touches length");
- for (var i = 0; i < aTouches1.length; i++) {
- checkTouch(aTouches1[i], aTouches2[i]);
- }
- }
- function checkTouch(aFakeTouch, aTouch) {
- is(aFakeTouch.identifier, aTouch.identifier, "Touch has correct identifier");
- is(aFakeTouch.target, aTouch.target, "Touch has correct target");
- is(aFakeTouch.page.x, aTouch.pageX, "Touch has correct pageX");
- is(aFakeTouch.page.y, aTouch.pageY, "Touch has correct pageY");
- is(aFakeTouch.page.x + Math.round(window.mozInnerScreenX), aTouch.screenX, "Touch has correct screenX");
- is(aFakeTouch.page.y + Math.round(window.mozInnerScreenY), aTouch.screenY, "Touch has correct screenY");
- is(aFakeTouch.page.x, aTouch.clientX, "Touch has correct clientX");
- is(aFakeTouch.page.y, aTouch.clientY, "Touch has correct clientY");
- is(aFakeTouch.radius.x, aTouch.radiusX, "Touch has correct radiusX");
- is(aFakeTouch.radius.y, aTouch.radiusY, "Touch has correct radiusY");
- is(aFakeTouch.rotationAngle, aTouch.rotationAngle, "Touch has correct rotationAngle");
- is(aFakeTouch.force, aTouch.force, "Touch has correct force");
- }
- function sendTouchEvent(windowUtils, aType, aEvent, aModifiers) {
- var ids = [], xs=[], ys=[], rxs = [], rys = [],
- rotations = [], forces = [];
- for (var touchType of ["touches", "changedTouches", "targetTouches"]) {
- for (var i = 0; i < aEvent[touchType].length; i++) {
- if (ids.indexOf(aEvent[touchType][i].identifier) == -1) {
- ids.push(aEvent[touchType][i].identifier);
- xs.push(aEvent[touchType][i].page.x);
- ys.push(aEvent[touchType][i].page.y);
- rxs.push(aEvent[touchType][i].radius.x);
- rys.push(aEvent[touchType][i].radius.y);
- rotations.push(aEvent[touchType][i].rotationAngle);
- forces.push(aEvent[touchType][i].force);
- }
- }
- }
- return windowUtils.sendTouchEvent(aType,
- ids, xs, ys, rxs, rys,
- rotations, forces,
- ids.length, aModifiers, 0);
- }
- function touchEvent(aOptions) {
- if (!aOptions) {
- aOptions = {};
- }
- this.ctrlKey = aOptions.ctrlKey || false;
- this.altKey = aOptions.altKey || false;
- this.shiftKey = aOptions.shiftKey || false;
- this.metaKey = aOptions.metaKey || false;
- this.touches = aOptions.touches || [];
- this.targetTouches = aOptions.targetTouches || [];
- this.changedTouches = aOptions.changedTouches || [];
- }
- function testtouch(aOptions) {
- if (!aOptions)
- aOptions = {};
- this.identifier = aOptions.identifier || 0;
- this.target = aOptions.target || 0;
- this.page = aOptions.page || {x: 0, y: 0};
- this.radius = aOptions.radius || {x: 0, y: 0};
- this.rotationAngle = aOptions.rotationAngle || 0;
- this.force = aOptions.force || 1;
- }
- function testSingleTouch(name) {
- let cwu = SpecialPowers.getDOMWindowUtils(window);
- let target = document.getElementById("testTarget");
- let target2 = document.getElementById("testTarget2");
- let bcr = target.getBoundingClientRect();
- let bcr2 = target2.getBoundingClientRect();
- let touch1 = new testtouch({
- page: {x: Math.round(bcr.left + bcr.width/2),
- y: Math.round(bcr.top + bcr.height/2)},
- target: target
- });
- let event = new touchEvent({
- touches: [touch1],
- targetTouches: [touch1],
- changedTouches: [touch1]
- });
- // test touchstart event fires correctly
- var checkFunction = checkEvent(event);
- window.addEventListener("touchstart", checkFunction, false);
- sendTouchEvent(cwu, "touchstart", event, 0);
- window.removeEventListener("touchstart", checkFunction, false);
- // test touchmove event fires correctly
- event.touches[0].page.x -= 1;
- event.targetTouches[0].page.x -= 1;
- event.changedTouches[0].page.x -= 1;
- checkFunction = checkEvent(event);
- window.addEventListener("touchmove", checkFunction, false);
- sendTouchEvent(cwu, "touchmove", event, 0);
- window.removeEventListener("touchmove", checkFunction, false);
- // test touchend event fires correctly
- event.touches = [];
- event.targetTouches = [];
- checkFunction = checkEvent(event);
- window.addEventListener("touchend", checkFunction, false);
- sendTouchEvent(cwu, "touchend", event, 0);
- window.removeEventListener("touchend", checkFunction, false);
- nextTest();
- }
- function testSingleTouch2(name) {
- // firing a touchstart that includes only one touch will evict any touches in the queue with touchend messages
- let cwu = SpecialPowers.getDOMWindowUtils(window);
- let target = document.getElementById("testTarget");
- let target2 = document.getElementById("testTarget2");
- let bcr = target.getBoundingClientRect();
- let bcr2 = target2.getBoundingClientRect();
- let touch1 = new testtouch({
- identifier: 0,
- page: {x: Math.round(bcr.left + bcr.width/2),
- y: Math.round(bcr.top + bcr.height/2)},
- target: target
- });
- let event1 = new touchEvent({
- touches: [touch1],
- targetTouches: [touch1],
- changedTouches: [touch1]
- });
- let touch2 = new testtouch({
- identifier: 1,
- page: {x: Math.round(bcr2.left + bcr2.width/2),
- y: Math.round(bcr2.top + bcr2.height/2)},
- target: target2
- });
- let event2 = new touchEvent({
- touches: [touch2],
- targetTouches: [touch2],
- changedTouches: [touch2]
- });
- // test touchstart event fires correctly
- var checkFunction1 = checkEvent(event1);
- window.addEventListener("touchstart", checkFunction1, false);
- sendTouchEvent(cwu, "touchstart", event1, 0);
- window.removeEventListener("touchstart", checkFunction1, false);
- event1.touches = [];
- event1.targetTouches = [];
- checkFunction1 = checkEvent(event1);
- var checkFunction2 = checkEvent(event2);
- window.addEventListener("touchend", checkFunction1, false);
- window.addEventListener("touchstart", checkFunction2, false);
- sendTouchEvent(cwu, "touchstart", event2, 0);
- window.removeEventListener("touchend", checkFunction1, false);
- window.removeEventListener("touchstart", checkFunction2, false);
- sendTouchEvent(cwu, "touchstart", event1, 0);
- nextTest();
- }
- function testMultiTouch(name) {
- let cwu = SpecialPowers.getDOMWindowUtils(window);
- let target1 = document.getElementById("testTarget");
- let target2 = document.getElementById("testTarget2");
- let bcr = target1.getBoundingClientRect();
- let bcr2 = target2.getBoundingClientRect();
- let touch1 = new testtouch({
- identifier: 0,
- page: {x: Math.round(bcr.left + bcr.width/2),
- y: Math.round(bcr.top + bcr.height/2)},
- target: target1
- });
- let touch2 = new testtouch({
- identifier: 1,
- page: {x: Math.round(bcr2.left + bcr2.width/2),
- y: Math.round(bcr2.top + bcr2.height/2)},
- target: target2
- });
- let event = new touchEvent({
- touches: [touch1],
- targetTouches: [touch1],
- changedTouches: [touch1]
- });
- // test touchstart event fires correctly
- var checkFunction = checkEvent(event);
- window.addEventListener("touchstart", checkFunction, false);
- sendTouchEvent(cwu, "touchstart", event, 0);
- window.removeEventListener("touchstart", checkFunction, false);
- event.touches.push(touch2);
- event.targetTouches = [touch2];
- event.changedTouches = [touch2];
- window.addEventListener("touchstart", checkFunction, false);
- sendTouchEvent(cwu, "touchstart", event, 0);
- window.removeEventListener("touchstart", checkFunction, false);
- // test moving one touch point
- event.touches[0].page.x -= 1;
- event.targetTouches = [event.touches[0]];
- event.changedTouches = [event.touches[0]];
- window.addEventListener("touchmove", checkFunction, false);
- sendTouchEvent(cwu, "touchmove", event, 0);
- window.removeEventListener("touchmove", checkFunction, false);
- // test moving both touch points -- two touchmove events should fire, one on each target
- event.touches[0].page.x -= 1;
- event.touches[1].page.x -= 1;
- event.targetTouches = event.touches;
- event.changedTouches = event.touches;
- var touchMoveEvents = 0;
- var checkFunction2 = function(aEvent) {
- is(event.ctrlKey, aEvent.ctrlKey, "Correct ctrlKey");
- is(event.altKey, aEvent.altKey, "Correct altKey");
- is(event.shiftKey, aEvent.shiftKey, "Correct shiftKey");
- is(event.metaKey, aEvent.metaKey, "Correct metaKey");
- checkTouches(event.touches, aEvent.touches);
- checkTouches(event.changedTouches, aEvent.changedTouches);
- if (aEvent.targetTouches[0].target == target1) {
- checkTouches([event.touches[0]], aEvent.targetTouches);
- } else if (aEvent.targetTouches[0].target == target2) {
- checkTouches([event.touches[1]], aEvent.targetTouches);
- } else
- ok(false, "Event target is incorrect: " + event.targetTouches[0].target.nodeName + "#" + event.targetTouches[0].target.id);
- touchMoveEvents++;
- };
- window.addEventListener("touchmove", checkFunction2, false);
- sendTouchEvent(cwu, "touchmove", event, 0);
- ok(touchMoveEvents, 2, "Correct number of touchmove events fired");
- window.removeEventListener("touchmove", checkFunction2, false);
- // test removing just one finger
- var expected = new touchEvent({
- touches: [touch2],
- targetTouches: [],
- changedTouches: [touch1]
- });
- checkFunction = checkEvent(expected);
- event.touches = [];
- event.targetTouches = [];
- event.changedTouches = [touch1];
- // test removing the other finger
- window.addEventListener("touchend", checkFunction, false);
- sendTouchEvent(cwu, "touchend", event, 0);
- window.removeEventListener("touchend", checkFunction, false);
- event.touches = [];
- event.targetTouches = [];
- event.changedTouches = [touch2];
- checkFunction = checkEvent(event);
- window.addEventListener("touchend", checkFunction, false);
- sendTouchEvent(cwu, "touchend", event, 0);
- window.removeEventListener("touchend", checkFunction, false);
- nextTest();
- }
- function testTouchChanged() {
- let cwu = SpecialPowers.getDOMWindowUtils(window);
- let target1 = document.getElementById("testTarget");
- let bcr = target1.getBoundingClientRect();
- let touch1 = new testtouch({
- identifier: 0,
- page: {x: Math.round(bcr.left + bcr.width/2),
- y: Math.round(bcr.top + bcr.height/2)},
- target: target1
- });
- let event = new touchEvent({
- touches: [touch1],
- targetTouches: [touch1],
- changedTouches: [touch1]
- });
- var checkFunction = checkEvent(event);
- sendTouchEvent(cwu, "touchstart", event, 0);
- var moveEvents = 0;
- function onMove(aEvent) {
- moveEvents++;
- }
- window.addEventListener("touchmove", onMove, false);
- // the first touchmove should always fire an event
- sendTouchEvent(cwu, "touchmove", event, 0);
- // changing nothing should not fire a touchmove event
- sendTouchEvent(cwu, "touchmove", event, 0);
- // test moving x
- event.touches[0].page.x -= 1;
- sendTouchEvent(cwu, "touchmove", event, 0);
- // test moving y
- event.touches[0].page.y -= 1;
- sendTouchEvent(cwu, "touchmove", event, 0);
- // test changing y radius
- event.touches[0].radius.y += 1;
- sendTouchEvent(cwu, "touchmove", event, 0);
-
- // test changing x radius
- event.touches[0].radius.x += 1;
- sendTouchEvent(cwu, "touchmove", event, 0);
- // test changing rotationAngle
- event.touches[0].rotationAngle += 1;
- sendTouchEvent(cwu, "touchmove", event, 0);
- // test changing force
- event.touches[0].force += 1;
- sendTouchEvent(cwu, "touchmove", event, 0);
- // changing nothing again
- sendTouchEvent(cwu, "touchmove", event, 0);
-
- is(moveEvents, 7, "Six move events fired");
- window.removeEventListener("touchmove", onMove, false);
- sendTouchEvent(cwu, "touchend", event, 0);
- nextTest();
- }
- function testPreventDefault() {
- let cwu = SpecialPowers.getDOMWindowUtils(window);
- let target = document.getElementById("testTarget");
- let target2 = document.getElementById("testTarget2");
- let bcr = target.getBoundingClientRect();
- let bcr2 = target2.getBoundingClientRect();
- let touch1 = new testtouch({
- page: {x: bcr.left + bcr.width/2,
- y: bcr.top + bcr.height/2},
- target: target
- });
- let event = new touchEvent({
- touches: [touch1],
- targetTouches: [touch1],
- changedTouches: [touch1]
- });
- let preventFunction = function(aEvent) {
- aEvent.preventDefault();
- }
-
- let tests = [
- [{ name: "touchstart", prevent: false },
- { name: "touchmove", prevent: false },
- { name: "touchmove", prevent: false },
- { name: "touchend", prevent: false }],
- [{ name: "touchstart", prevent: true, doPrevent: true },
- { name: "touchmove", prevent: false },
- { name: "touchmove", prevent: false },
- { name: "touchend", prevent: false }],
- [{ name: "touchstart", prevent: false },
- { name: "touchmove", prevent: true, doPrevent: true },
- { name: "touchmove", prevent: false },
- { name: "touchend", prevent: false }],
- [{ name: "touchstart", prevent: false },
- { name: "touchmove", prevent: false },
- { name: "touchmove", prevent: false, doPrevent: true },
- { name: "touchend", prevent: false }],
- [{ name: "touchstart", prevent: false },
- { name: "touchmove", prevent: false },
- { name: "touchmove", prevent: false },
- { name: "touchend", prevent: true, doPrevent: true }]
- ];
- var dotest = function(aTest) {
- if (aTest.doPrevent) {
- target.addEventListener(aTest.name, preventFunction, false);
- }
- if (aTest.name == "touchmove") {
- touch1.page.x++;
- event.touches[0] = touch1;
- }
- is(sendTouchEvent(cwu, aTest.name, event, 0), aTest.prevent, "Got correct status");
- if (aTest.doPrevent)
- target.removeEventListener(aTest.name, preventFunction, false);
- }
- for (var i = 0; i < tests.length; i++) {
- for (var j = 0; j < tests[i].length; j++) {
- dotest(tests[i][j]);
- }
- }
- nextTest();
- }
- function testRemovingElement() {
- let cwu = SpecialPowers.getDOMWindowUtils(window);
- let target = document.getElementById("testTarget");
- let bcr = document.getElementById("testTarget").getBoundingClientRect();
- let touch1 = new testtouch({
- page: {x: bcr.left + bcr.width/2,
- y: bcr.top + bcr.height/2},
- });
- let e = new touchEvent({
- touches: [touch1],
- targetTouches: [touch1],
- changedTouches: [touch1]
- });
- var touchEvents = 0;
- var removeTarget = function(aEvent) {
- aEvent.target.parentNode.removeChild(aEvent.target);
- };
- var checkTarget = function(aEvent) {
- is(aEvent.target, target, "Event has correct target");
- touchEvents++;
- };
- target.addEventListener("touchstart", removeTarget, false);
- target.addEventListener("touchmove", checkTarget, false);
- target.addEventListener("touchend", checkTarget, false);
- sendTouchEvent(cwu, "touchstart", e, 0);
- e.touches[0].page.x++;
- sendTouchEvent(cwu, "touchmove", e, 0);
- sendTouchEvent(cwu, "touchend", e, 0);
- target.removeEventListener("touchstart", removeTarget, false);
- target.removeEventListener("touchmove", checkTarget, false);
- target.removeEventListener("touchend", checkTarget, false);
- is(touchEvents, 2, "Check target was called twice");
- nextTest();
- }
- function testNAC() {
- let cwu = SpecialPowers.getDOMWindowUtils(window);
- let target = document.getElementById("testTarget3");
- let bcr = target.getBoundingClientRect();
- let touch1 = new testtouch({
- page: {x: Math.round(bcr.left + bcr.width/2),
- y: Math.round(bcr.top + bcr.height/2)},
- target: target
- });
- let event = new touchEvent({
- touches: [touch1],
- targetTouches: [touch1],
- changedTouches: [touch1]
- });
- // test touchstart event fires correctly
- var checkFunction = checkEvent(event);
- window.addEventListener("touchstart", checkFunction, false);
- sendTouchEvent(cwu, "touchstart", event, 0);
- window.removeEventListener("touchstart", checkFunction, false);
- sendTouchEvent(cwu, "touchend", event, 0);
- nextTest();
- }
- function doTest() {
- tests.push(testSingleTouch);
- tests.push(testSingleTouch2);
- tests.push(testMultiTouch);
- tests.push(testPreventDefault);
- tests.push(testTouchChanged);
- tests.push(testRemovingElement);
- tests.push(testNAC);
- tests.push(function() {
- SimpleTest.finish();
- });
- nextTest();
- }
- SimpleTest.waitForExplicitFinish();
- addLoadEvent(doTest);
- </script>
- </pre>
- <div id="parent">
- <span id="testTarget" style="padding: 5px; border: 1px solid black;">testTarget</span>
- <span id="testTarget2" style="padding: 5px; border: 1px solid blue;">testTarget</span>
- <input type="text" id="testTarget3">
- </div>
- </body>
- </html>
|