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

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

<style>
    #detector { width: 100px; }
    @media (-webkit-min-device-pixel-ratio: 1) { #detector { width: 10px; } }
    @media print and (-webkit-min-device-pixel-ratio: 3) { #detector { width: 30px; } }
</style>

<script>
    description("CSS3 media query test: -webkit-device-pixel-ratio combined with print.")

    if (window.testRunner && window.internals) {
        window.testRunner.dumpAsText();

        function resolutionFromStyle() {
            var width = getComputedStyle(document.getElementById("detector")).width;
            switch (width) {
                case "10px":
                    return 1;
                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);
        }

        shouldBe("matchMedia('(-webkit-min-device-pixel-ratio: 1)').matches", "true");
        shouldBe("resolutionFromStyle()", "1");

        // Test printing.

        window.internals.settings.setMediaTypeOverride("print");
        shouldBe("matchMedia('(-webkit-min-device-pixel-ratio: 3)').matches", "true");

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

        // As well as those matching 'all'.
        appendMediaRule("@media (-webkit-min-device-pixel-ratio: 3.125) { #detector { width: 31px; } }");
        shouldBe("resolutionFromStyle()", "3.125");
    }
</script>

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