<!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) {
internals.updateStyleAndReturnAffectedElementCount();
return 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();
internals.forceCompositingUpdate(document);
shouldBe("getTouchHandlerCount(nestedDocument)", "2");
shouldBe("getTouchHandlerCount(document)", "2");
}
</script>
</body>
</html>