diff options
Diffstat (limited to 'dom/events/test/window_bug1429572.html')
| -rw-r--r-- | dom/events/test/window_bug1429572.html | 351 |
1 files changed, 351 insertions, 0 deletions
diff --git a/dom/events/test/window_bug1429572.html b/dom/events/test/window_bug1429572.html new file mode 100644 index 0000000000..694794b1e4 --- /dev/null +++ b/dom/events/test/window_bug1429572.html @@ -0,0 +1,351 @@ +<html> + <head> + <title></title> + <script src="/tests/SimpleTest/EventUtils.js"></script> + <script> + var tests = [ + simpleNonShadowTest, + nonShadowInputDate, + jsDispatchedNonShadowTouchEvents, + shadowDOMTest1, + shadowDOMTest2, + shadowDOMTest3, + jsDispatchedShadowTouchEvents, + jsDispatchedShadowTouchEvents2 + ]; + var host; + var host2; + var shadowRoot; + var shadowRoot2; + var winUtils; + + var touchCounter = 0; + function createTouchArray(targetList) { + var touchArray = []; + for (var i = 0; i < targetList.length; ++i) { + touchArray.push(new Touch({identifier: ++touchCounter, target: targetList[i]})); + } + return touchArray; + } + + function synthesizeTouches(targets, xOffsets) { + if (xOffsets) { + opener.is(targets.length, xOffsets.length, "Wrong xOffsets length!"); + } + var touches = []; + var xs = []; + var ys = []; + var rxs = []; + var rys = []; + var angles = []; + var forces = []; + var tiltXs = []; + var tiltYs = []; + var twists = []; + for (var i = 0; i < targets.length; ++i) { + touches.push(++touchCounter); + var rect = targets[i].getBoundingClientRect(); + if (xOffsets) { + xs.push(rect.left + (rect.width / 2) + xOffsets[i]); + } else { + xs.push(rect.left + (rect.width / 2)); + } + ys.push(rect.top + (rect.height / 2)); + rxs.push(1); + rys.push(1); + angles.push(0); + forces.push(1); + tiltXs.push(0); + tiltYs.push(0); + twists.push(0); + } + winUtils.sendTouchEvent("touchstart", + touches, xs, ys, rxs, rys, angles, forces, tiltXs, tiltYs, twists, 0); + winUtils.sendTouchEvent("touchend", + touches, xs, ys, rxs, rys, angles, forces, tiltXs, tiltYs, twists, 0); + } + + function next() { + if (!tests.length) { + opener.done(); + window.close(); + } else { + var test = tests.shift(); + requestAnimationFrame(function() { setTimeout(test); }); + } + } + + function simpleNonShadowTest() { + var s1 = document.getElementById("span1"); + var s2 = document.getElementById("span2"); + var s3 = document.getElementById("span3"); + var nonShadow = document.getElementById("nonshadow"); + var event; + nonShadow.ontouchstart = function(e) { + event = e; + opener.is(e.targetTouches.length, 1, "Should have only one entry in targetTouches."); + opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); + opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); + opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); + } + synthesizeTouches([s1, s2, s3]); + + opener.is(event.targetTouches.length, 1, "Should have only one entry in targetTouches. (2)"); + opener.is(event.targetTouches[0].target, event.target, "targetTouches should contain event.target. (2)"); + opener.is(event.touches.length, 3, "touches list should contain all the touch objects. (2)"); + opener.is(event.changedTouches.length, 3, "changedTouches list should contain all the touch objects. (2)"); + + next(); + } + + function jsDispatchedNonShadowTouchEvents() { + var s1 = document.getElementById("span1"); + var s2 = document.getElementById("span2"); + var s3 = document.getElementById("span3"); + var nonShadow = document.getElementById("nonshadow"); + var didCallListener = false; + nonShadow.ontouchstart = function(e) { + didCallListener = true; + opener.is(e.targetTouches.length, 3, "Should have all the entries in targetTouches."); + opener.is(e.targetTouches[0].target, s1, "targetTouches should contain s1 element."); + opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); + opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); + } + var touchArray = createTouchArray([s1, s2, s3]); + var touchEvent = new TouchEvent("touchstart", + { + touches: touchArray, + targetTouches: touchArray, + changedTouches: touchArray + }); + opener.is(touchEvent.targetTouches.length, 3, "Should have 3 entries in targetTouches"); + nonShadow.dispatchEvent(touchEvent); + opener.ok(didCallListener, "Should have called the listener."); + opener.is(touchEvent.targetTouches.length, 3, "Should have all the entries in targetTouches. (2)"); + opener.is(touchEvent.targetTouches[0].target, s1, "targetTouches should contain s1 element. (2)"); + opener.is(touchEvent.touches.length, 3, "touches list should contain all the touch objects. (2)"); + opener.is(touchEvent.changedTouches.length, 3, "changedTouches list should contain all the touch objects. (2)"); + + nonShadow.ontouchstart = null; + next(); + } + + function nonShadowInputDate() { + // This is a test for dispathing several touches to an element with + // native anonymous content. + var s1 = document.getElementById("span1"); + var date = document.getElementById("date"); + var nonShadow = document.getElementById("nonshadow"); + var hasDateAsTarget = false; + var didCallListener = false; + nonShadow.ontouchstart = function(e) { + didCallListener = true; + if (e.targetTouches[0].target == date) { + hasDateAsTarget = true; + opener.is(e.targetTouches.length, 2, "Should have two entries in targetTouches."); + opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain date."); + opener.is(e.targetTouches[1].target, e.target, "targetTouches should contain date twice."); + } + opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); + opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); + } + + var rect = date.getBoundingClientRect(); + var quarter = rect.width / 4; + synthesizeTouches([date, date, s1], [-quarter, quarter, 0]); + opener.ok(didCallListener, "Should have called listener."); + opener.ok(hasDateAsTarget, "Should have seen touchstart with date element as the target.") + nonShadow.ontouchstart = null; + next(); + } + + function shadowDOMTest1() { + var shadowS1 = shadowRoot.getElementById("shadowSpan1"); + + // Ensure retargeting works. + var hostHandled = false; + host.ontouchstart = function(e) { + hostHandled = true; + opener.is(e.targetTouches.length, 1, "Should have only one entry in targetTouches."); + opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); + opener.is(e.target, host, "Event and touch should have been retargeted."); + opener.is(e.touches.length, 1, "touches list should contain one touch object."); + opener.is(e.changedTouches.length, 1, "changedTouches list should contain one touch objects."); + } + + // Ensure retargeting doesn't happen inside shadow DOM. + var shadowHandled = false; + shadowS1.ontouchstart = function(e) { + shadowHandled = true; + opener.is(e.targetTouches.length, 1, "Should have only one entry in targetTouches."); + opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); + opener.is(e.target, shadowS1, "Event and touch should not have been retargeted."); + opener.is(e.touches.length, 1, "touches list should contain one touch object."); + opener.is(e.changedTouches.length, 1, "changedTouches list should contain one touch objects."); + } + synthesizeTouches([shadowS1]); + opener.ok(hostHandled, "Should have called listener on host."); + opener.ok(shadowHandled, "Should have called listener on shadow DOM element."); + host.ontouchstart = null; + shadowS1.ontouchstart = null; + + next(); + } + + function shadowDOMTest2() { + var shadowS1 = shadowRoot.getElementById("shadowSpan1"); + var shadowS2 = shadowRoot.getElementById("shadowSpan2"); + var s1 = document.getElementById("span1"); + + var hostHandled = false; + host.ontouchstart = function(e) { + opener.is(e.target, host, "Event.target should be the host element."); + hostHandled = true; + opener.is(e.targetTouches.length, 2, "Should have two entries in targetTouches."); + opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); + opener.is(e.targetTouches[1].target, e.target, "targetTouches should contain event.target twice."); + opener.is(e.touches.length, 3, "touches list should contain one touch object."); + opener.is(e.changedTouches.length, 3, "changedTouches list should contain one touch objects."); + } + + synthesizeTouches([shadowS1, shadowS2, s1]); + opener.ok(hostHandled, "Should have called listener on host."); + host.ontouchstart = null; + + next(); + } + + + function shadowDOMTest3() { + var shadowS1 = shadowRoot.getElementById("shadowSpan1"); + var shadowS2 = shadowRoot2.getElementById("shadowSpan2"); + var s1 = document.getElementById("span1"); + + var hostHandled = false; + host.ontouchstart = function(e) { + opener.is(e.target, host, "Event.target should be the host element."); + hostHandled = true; + opener.is(e.targetTouches.length, 1, "Should have one entry in targetTouches."); + opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); + opener.is(e.touches.length, 3, "touches list should contain one touch object."); + opener.is(e.touches[0].target, host, "Should have retargeted the first Touch object."); + opener.is(e.touches[1].target, host2, "Should have retargeted the second Touch object."); + opener.is(e.touches[3].target, s1, "Touch object targeted to light DOM should keep its target as is."); + opener.is(e.changedTouches.length, 3, "changedTouches list should contain one touch objects."); + } + + synthesizeTouches([shadowS1, shadowS2, s1]); + opener.ok(hostHandled, "Should have called listener on host."); + host.ontouchstart = null; + + next(); + } + + function jsDispatchedShadowTouchEvents() { + var s1 = document.getElementById("span1"); + var shadowS1 = shadowRoot.getElementById("shadowSpan1"); + var shadowS2 = shadowRoot.getElementById("shadowSpan2"); + var hostHandled = false; + var shadowHandled = false; + host.ontouchstart = function(e) { + hostHandled = true; + opener.is(e.targetTouches.length, 2, "Should have all the shadow entries in targetTouches."); + opener.is(e.targetTouches[0].target, host, "targetTouches shouldn't reveal shadow DOM."); + opener.is(e.targetTouches[1].target, host, "targetTouches shouldn't reveal shadow DOM."); + opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); + opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); + } + shadowS1.ontouchstart = function(e) { + shadowHandled = true; + opener.is(e.targetTouches.length, 3, "Should have all the in targetTouches."); + opener.is(e.targetTouches[0].target, shadowS1, "targetTouches should contain two shadow elements."); + opener.is(e.targetTouches[1].target, shadowS2, "targetTouches should contain two shadow elements."); + opener.is(e.targetTouches[2].target, s1, "targetTouches should contain a slight element."); + opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); + opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); + } + var touchArray = createTouchArray([shadowS1, shadowS2, s1]); + var touchEvent = new TouchEvent("touchstart", + { + composed: true, + touches: touchArray, + targetTouches: touchArray, + changedTouches: touchArray + }); + opener.is(touchEvent.targetTouches.length, 3, "Should have 3 entries in targetTouches"); + shadowS1.dispatchEvent(touchEvent); + opener.ok(hostHandled, "Should have called listener on host."); + opener.ok(shadowHandled, "Should have called listener on shadow DOM element."); + host.ontouchstart = null; + shadowS1.ontouchstart = null; + next(); + } + + function jsDispatchedShadowTouchEvents2() { + var s1 = document.getElementById("span1"); + var shadowS1 = shadowRoot.getElementById("shadowSpan1"); + var shadowS2 = shadowRoot2.getElementById("shadowSpan2"); + var hostHandled = false; + var shadowHandled = false; + host.ontouchstart = function(e) { + hostHandled = true; + opener.is(e.targetTouches.length, 1, "Should have one shadow entry in targetTouches."); + opener.is(e.targetTouches[0].target, host, "targetTouches shouldn't reveal shadow DOM."); + opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); + opener.is(e.touches[0].target, host, "Should have retargeted the first Touch object."); + opener.is(e.touches[1].target, host2, "Should have retargeted the second Touch object."); + opener.is(e.touches[2].target, s1, "Touch object targeted to light DOM should keep its target as is."); + opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); + } + shadowS1.ontouchstart = function(e) { + shadowHandled = true; + opener.is(e.targetTouches.length, 3, "Should have all the in targetTouches."); + opener.is(e.targetTouches[0].target, shadowS1, "targetTouches should contain two shadow elements."); + opener.is(e.targetTouches[1].target, shadowS2, "targetTouches should contain two shadow elements."); + opener.is(e.targetTouches[2].target, s1, "targetTouches should contain a slight element."); + opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); + opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); + } + var touchArray = createTouchArray([shadowS1, shadowS2, s1]); + var touchEvent = new TouchEvent("touchstart", + { + composed: true, + touches: touchArray, + targetTouches: touchArray, + changedTouches: touchArray + }); + opener.is(touchEvent.targetTouches.length, 3, "Should have 3 entries in targetTouches"); + shadowS1.dispatchEvent(touchEvent); + opener.ok(hostHandled, "Should have called listener on host."); + opener.ok(shadowHandled, "Should have called listener on shadow DOM element."); + host.ontouchstart = null; + shadowS1.ontouchstart = null; + next(); + } + + function start() { + winUtils = _getDOMWindowUtils(this); + host = document.getElementById("host"); + shadowRoot = host.attachShadow({ mode: "open" }); + shadowRoot.innerHTML = + "<span id='shadowSpan1'>shadowFoo </span><span id='shadowSpan2'>shadowBar </span><span id='shadowSpan3'>shadowBaz </span><slot></slot>"; + + host2 = document.getElementById("host2"); + shadowRoot2 = host2.attachShadow({ mode: "open" }); + shadowRoot2.innerHTML = + "<span id='shadowSpan1'>shadowFoo </span><span id='shadowSpan2'>shadowBar </span><span id='shadowSpan3'>shadowBaz </span><slot></slot>"; + next(); + } + </script> + <style> + </style> + </head> + <body onload="start();"> + <div id="nonshadow"> + <span id="span1">foo </span><span id="span2">bar </span><span id="span3"> baz</span> + <input type="date" id="date"> + </div> + <div id="host"><span id="assignedNode"> assigned node </span></div> + <div id="host2"><span id="assignedNode2"> assigned node 2 </span></div> + </body> +</html> |