<html>
    <head>
        <style>
            @media all and(min-width: 2px) { #styled { color: green; } }
            @media all and(max-width: 1px) { #styled { color: red; } }
        </style>
        <script>
            function runTest() {
                if (window.testRunner)
                    testRunner.dumpAsText();

                var element = document.getElementById('styled');
                var computedColor = window.getComputedStyle(element).color;
                if (computedColor === "rgb(0, 128, 0)")
                    document.getElementById("result").textContent = "SUCCESS";
                else
                    document.getElementById("result").textContent = "FAILURE: " + computedColor;
            }
        </script>
    </head>
    <body onload="runTest();">
        <div id="styled">This should be green</div>
        <div id="result">FAILURE</div>
    </body>
</html>