<!DOCTYPE html>

<html>
<head>
    <script src="../../../../resources/js-test-pre.js"></script>
    <style>
        body {
            margin: none;
        }
    </style>
    <meta name="viewport" content="initial-scale=1">
</head>
<body>
    <p id="description"></p>
    <div id="console">
    </div>
    <script>
        description("Test that an Apple Pencil produces touchforcechange events.");
        window.jsTestIsAsync = true;

        function getUIScript(x, y)
        {
            return `
            (function() {
                uiController.stylusDownAtPoint(${x}, ${y}, 2, 1, 0.5, function () {});
                uiController.stylusMoveToPoint(${x}, ${y}, 2.1, 1.1, 0.6, function () {});
                uiController.stylusUpAtPoint(${x}, ${y}, function () {});
            })();`
        }

        function runTest()
        {
            window.addEventListener("touchstart", (event) => {
                debug("touchstart fired.");
                shouldBe("event.touches.length", "1");
                shouldBe("event.touches[0].touchType", "'stylus'");
                shouldBeCloseTo("event.touches[0].altitudeAngle", 1, 0.01);
                shouldBeCloseTo("event.touches[0].azimuthAngle", 2, 0.01);
                shouldBeCloseTo("event.touches[0].force", 0.5, 0.01);
            });

            window.addEventListener("touchforcechange", (event) => {
                debug("touchforcechange fired.");
                shouldBe("event.touches.length", "1");
                shouldBe("event.touches[0].touchType", "'stylus'");
                shouldBeCloseTo("event.touches[0].altitudeAngle", 1.1, 0.01);
                shouldBeCloseTo("event.touches[0].azimuthAngle", 2.1, 0.01);
                shouldBeCloseTo("event.touches[0].force", 0.6, 0.01);
            });

            window.addEventListener("touchend", (event) => {
                debug("touchend fired.");
                finishJSTest();
            });

            if (window.testRunner)
                testRunner.runUIScript(getUIScript(50, 200), function(result) { });
        }

        window.addEventListener("load", runTest, false);
    </script>
    <script src="../../../../resources/js-test-post.js"></script>
</body>
</html>