<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>

<div id="detector"></div>

<style>
    #detector { width: 100px; }
    @media (resolution: 1.00dppx) { #detector { width: 10px; } }
    @media (resolution: 1.50dppx) { #detector { width: 15px; } }
    @media (resolution: 2.00dppx) { #detector { width: 20px; } }
    @media (resolution: 2.25dppx) { #detector { width: 23px; } }
    @media print and (min-resolution: 3dppx) { #detector { width: 30px; } }
</style>

<script>
    description("CSS3 media query test: resolution query with dppx. Using style element, @media css rule.")

    if (window.testRunner && window.internals) {
        window.testRunner.dumpAsText();
        window.testRunner.waitUntilDone();
        window.jsTestIsAsync = true;

        function setBackingScaleFactorPromise(factor) {
            return new Promise((resolve, reject) => {
                try {
                    testRunner.setBackingScaleFactor(factor, resolve);
                } catch(e) {
                    reject(e);
                }
            });
        }

        function resolutionFromStyle() {
            var width = getComputedStyle(document.getElementById("detector")).width;
            switch (width) {
                case "10px":
                    return 1;
                case "15px":
                    return 1.5;
                case "20px":
                    return 2;
                case "23px":
                    return 2.25;
                case "30px":
                    return 3;
                case "31px":
                    return 3.125;
                default:
                    return undefined;
            }
        }

        function appendMediaRule(rule) {
            var lastStyleSheet = document.styleSheets[document.styleSheets.length - 1];
            lastStyleSheet.insertRule(rule, lastStyleSheet.cssRules.length);
        }

        (async function() {
            shouldBe("matchMedia('(resolution: 0dpi)').matches", "false");
            shouldBe("matchMedia('(min-resolution: 0dpi)').matches", "false");
            shouldBe("matchMedia('(max-resolution: 0dpi)').matches", "false");

            await setBackingScaleFactorPromise(1.5);
            shouldBe("matchMedia('(resolution: 1.5dppx)').matches", "true");
            shouldBe("resolutionFromStyle()", "1.5");

            await setBackingScaleFactorPromise(2);
            shouldBe("matchMedia('(resolution: 2dppx)').matches", "true");
            shouldBe("resolutionFromStyle()", "2");

            await setBackingScaleFactorPromise(1);
            shouldBe("matchMedia('(resolution: 1dppx)').matches", "true");
            shouldBe("resolutionFromStyle()", "1");

            await setBackingScaleFactorPromise(2.25);
            shouldBe("matchMedia('(resolution: 2.25dppx)').matches", "true");
            shouldBe("resolutionFromStyle()", "2.25");
            shouldBe("matchMedia('(resolution)').matches", "true");
            shouldBe("matchMedia('(resolution: 216dpi)').matches", "true");
            shouldBe("matchMedia('(min-resolution: 216dpi)').matches", "true");
            shouldBe("matchMedia('(max-resolution: 216dpi)').matches", "true");

            await setBackingScaleFactorPromise(2.54);  // use 2.54 to give us integral dpcm
            shouldBe("matchMedia('(resolution: 96dpcm)').matches", "true");
            shouldBe("matchMedia('(min-resolution: 96dpcm)').matches", "true");
            shouldBe("matchMedia('(max-resolution: 96dpcm)').matches", "true");

            // Test printing.

            window.internals.settings.setMediaTypeOverride("print");
            shouldBe("matchMedia('(min-resolution: 300dpi)').matches", "true");
            shouldBe("matchMedia('(min-resolution: 118dpcm)').matches", "true");

            // Should match the one requiring 'print' media type.
            shouldBe("resolutionFromStyle()", "3");

            // As well as those matching 'all'.
            appendMediaRule("@media (resolution: 3.125dppx) { #detector { width: 31px; } }");
            shouldBe("resolutionFromStyle()", "3.125");
        })().then(() => finishJSTest());
    }
</script>

<script src="../../resources/js-test-post.js"></script>
</body>
</html>