<html>
    <head>
        <script src="../../resources/js-test-pre.js"></script>
    </head>

    <body id="body-elem">
        <div id="child"></div>
        <p id="description"></p>
        <script>
            description("Testing the computed style of touch-action:");
            let styleElement = document.createElement("style");
            document.head.appendChild(styleElement);
            let stylesheet = styleElement.sheet;

            debug("Testing touch-action: manipulation;");
            stylesheet.insertRule("body { touch-action: manipulation; }", 0);
            shouldBe("window.getComputedStyle(document.body).getPropertyValue('touch-action')", "'manipulation'");
            stylesheet.deleteRule(0);

            debug("Testing touch-action: auto;");
            stylesheet.insertRule("body { touch-action: auto; }", 0);
            shouldBe("window.getComputedStyle(document.body).getPropertyValue('touch-action')", "'auto'");
            stylesheet.deleteRule(0);

            debug("Testing a bogus value");
            stylesheet.insertRule("body { touch-action: typo; }", 0);
            shouldBe("window.getComputedStyle(document.body).getPropertyValue('touch-action')", "'auto'");
            stylesheet.deleteRule(0);

            debug("Testing all caps");
            stylesheet.insertRule("body { touch-action: MANIPULATION; }", 0);
            shouldBe("window.getComputedStyle(document.body).getPropertyValue('touch-action')", "'manipulation'");
            stylesheet.deleteRule(0);

            debug("Testing weird casing");
            stylesheet.insertRule("body { touch-action: aUtO; }", 0);
            shouldBe("window.getComputedStyle(document.body).getPropertyValue('touch-action')", "'auto'");
            stylesheet.deleteRule(0);

            debug("Testing !important (auto)");
            stylesheet.insertRule("body { touch-action: auto !important; }", 0);
            stylesheet.insertRule("#body-elem { touch-action: manipulation; }", 1);
            shouldBe("window.getComputedStyle(document.body).getPropertyValue('touch-action')", "'auto'");
            stylesheet.deleteRule(1);
            stylesheet.deleteRule(0);

            debug("Testing !important (manipulation)");
            stylesheet.insertRule("body { touch-action: manipulation !important; }", 0);
            stylesheet.insertRule("#body-elem { touch-action: auto; }", 1);
            shouldBe("window.getComputedStyle(document.body).getPropertyValue('touch-action')", "'manipulation'");
            stylesheet.deleteRule(1);
            stylesheet.deleteRule(0);

            debug("Testing non-inheritance");
            stylesheet.insertRule("body { touch-action: manipulation; }", 0);
            shouldBe("window.getComputedStyle(document.getElementById('child')).getPropertyValue('touch-action')", "'auto'");
            stylesheet.deleteRule(0);
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>