third_party/WebKit/LayoutTests/fast/events/touch/touch-action-touch-handlers.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <style>
   6 #touchActionDiv {
   7     height: 50px;
   8     width: 200px;
   9     border: 1px solid blue;
  10 }
  11
  12 .display-none {
  13     display: none;
  14 }
  15
  16 .touch-action-none {
  17     touch-action: none;
  18 }
  19 </style>
  20 </head>
  21 <body onload="runTests()">
  22 <p id="description">
  23 This test verifies the touch event handlers tracked for the compositor for
  24 elements with various touch-action settings.
  25 </p>
  26
  27 <div id="touchActionDiv"> </div>
  28
  29 <div id="console"></div>
  30 <div style="height: 1000px;"></div>
  31 <script>
  32 var nestedDocument;
  33
  34 function getTouchHandlerCount(doc) {
  35     window.internals.updateStyleAndReturnAffectedElementCount();
  36     return window.internals.touchEventHandlerCount(doc);
  37 }
  38
  39 function runTests() {
  40     if (!window.internals) {
  41         return;
  42     }
  43
  44     var div = document.getElementById("touchActionDiv");
  45
  46     debug("Should start with no handlers");
  47     shouldBe("getTouchHandlerCount(document)", "0");
  48
  49     debug("touch-action: auto should not add any handlers");
  50     div.style.touchAction = "auto";
  51     shouldBe("getTouchHandlerCount(document)", "0");
  52
  53     debug("transition from auto should add a handler");
  54     div.style.touchAction = "none";
  55     shouldBe("getTouchHandlerCount(document)", "1");
  56
  57     debug("transition between non-auto values should maintain handler");
  58     div.style.touchAction = "pan-y";
  59     shouldBe("getTouchHandlerCount(document)", "1");
  60
  61     debug("multiple touch-action applications shouldn't affect handler count");
  62     div.className = "touch-action-none";
  63     shouldBe("getTouchHandlerCount(document)", "1");
  64
  65     debug("modifying any unrelated CSS property shouldn't affect handler count");
  66     div.style.backgroundColor = 'red';
  67     shouldBe("getTouchHandlerCount(document)", "1");
  68
  69     debug("setting display:none should remove handler");
  70     div.className = "display-none";
  71     shouldBe("getTouchHandlerCount(document)", "0");
  72
  73     debug("and removing it should bring back handler");
  74     div.className = "";
  75     shouldBe("getTouchHandlerCount(document)", "1");
  76
  77     debug("adding another listener should bump up handler count");
  78     var listener = function() { };
  79     div.addEventListener("touchstart", listener);
  80     shouldBe("getTouchHandlerCount(document)", "2");
  81
  82     debug("removing node should remove touch-action handler but not others");
  83     document.body.removeChild(div);
  84     shouldBe("getTouchHandlerCount(document)", "1");
  85
  86     debug("re-attaching node should add handler");
  87     document.body.insertBefore(div, document.body.firstChild);
  88     shouldBe("getTouchHandlerCount(document)", "2");
  89
  90     debug("transitioning to auto should decrease handler count");
  91     div.style.touchAction = "auto";
  92     shouldBe("getTouchHandlerCount(document)", "1");
  93
  94     debug("touch-action on div inside frame should add a handler");
  95     var iframe = document.createElement("iframe");
  96     document.body.appendChild(iframe);
  97     nestedDocument = iframe.contentWindow.document;
  98     nestedDocument.open('text/html', 'replace');
  99     nestedDocument.write("<!DOCTYPE html>\n<div style='touch-action: none'></div>");
 100     nestedDocument.close();
 101     window.internals.forceCompositingUpdate(document);
 102     shouldBe("getTouchHandlerCount(nestedDocument)", "2");
 103     shouldBe("getTouchHandlerCount(document)", "2");
 104 }
 105 </script>
 106 </body>
 107 </html>