window_bug1429572.html

mozilla-central/dom/events/test/window_bug1429572.html (file symbol)

Enable keyboard shortcuts

Source code

File a bug in Core :: DOM: UI Events & Focus Handling

Revision control

Copy as Markdown

Other Tools

<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>