<html>
<head>
<style>
#styled { color: green }
@media all and(min-width: 2px) { #styled { color: red; } }
@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>