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