| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| #touchActionDiv { |
| height: 50px; |
| width: 200px; |
| border: 1px solid blue; |
| } |
| |
| .display-none { |
| display: none; |
| } |
| |
| .touch-action-none { |
| touch-action: none; |
| } |
| </style> |
| </head> |
| <body onload="runTests()"> |
| <p id="description"> |
| This test verifies the touch event handlers tracked for the compositor for |
| elements with various touch-action settings. |
| </p> |
| |
| <div id="touchActionDiv"> </div> |
| |
| <div id="console"></div> |
| <div style="height: 1000px;"></div> |
| <script> |
| var nestedDocument; |
| |
| function getTouchHandlerCount(doc) { |
| window.internals.updateStyleAndReturnAffectedElementCount(); |
| return window.internals.touchStartOrMoveEventHandlerCount(doc); |
| } |
| |
| function runTests() { |
| if (!window.internals) { |
| return; |
| } |
| |
| var div = document.getElementById("touchActionDiv"); |
| |
| debug("Should start with no handlers"); |
| shouldBe("getTouchHandlerCount(document)", "0"); |
| |
| debug("touch-action: auto should not add any handlers"); |
| div.style.touchAction = "auto"; |
| shouldBe("getTouchHandlerCount(document)", "0"); |
| |
| debug("transition from auto should add a handler"); |
| div.style.touchAction = "none"; |
| shouldBe("getTouchHandlerCount(document)", "1"); |
| |
| debug("transition between non-auto values should maintain handler"); |
| div.style.touchAction = "pan-y"; |
| shouldBe("getTouchHandlerCount(document)", "1"); |
| |
| debug("multiple touch-action applications shouldn't affect handler count"); |
| div.className = "touch-action-none"; |
| shouldBe("getTouchHandlerCount(document)", "1"); |
| |
| debug("modifying any unrelated CSS property shouldn't affect handler count"); |
| div.style.backgroundColor = 'red'; |
| shouldBe("getTouchHandlerCount(document)", "1"); |
| |
| debug("setting display:none should remove handler"); |
| div.className = "display-none"; |
| shouldBe("getTouchHandlerCount(document)", "0"); |
| |
| debug("and removing it should bring back handler"); |
| div.className = ""; |
| shouldBe("getTouchHandlerCount(document)", "1"); |
| |
| debug("adding another listener should bump up handler count"); |
| var listener = function() { }; |
| div.addEventListener("touchstart", listener); |
| shouldBe("getTouchHandlerCount(document)", "2"); |
| |
| debug("removing node should remove touch-action handler but not others"); |
| document.body.removeChild(div); |
| shouldBe("getTouchHandlerCount(document)", "1"); |
| |
| debug("re-attaching node should add handler"); |
| document.body.insertBefore(div, document.body.firstChild); |
| shouldBe("getTouchHandlerCount(document)", "2"); |
| |
| debug("transitioning to auto should decrease handler count"); |
| div.style.touchAction = "auto"; |
| shouldBe("getTouchHandlerCount(document)", "1"); |
| |
| debug("touch-action on div inside frame should add a handler"); |
| var iframe = document.createElement("iframe"); |
| document.body.appendChild(iframe); |
| nestedDocument = iframe.contentWindow.document; |
| nestedDocument.open('text/html', 'replace'); |
| nestedDocument.write("<!DOCTYPE html>\n<div style='touch-action: none'></div>"); |
| nestedDocument.close(); |
| window.internals.forceCompositingUpdate(document); |
| shouldBe("getTouchHandlerCount(nestedDocument)", "2"); |
| shouldBe("getTouchHandlerCount(document)", "2"); |
| } |
| </script> |
| </body> |
| </html> |