<html>
<head>
<title>CSS3 media query test: stylesheet media deleteMedium </title>
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/" />
<link rel="help" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html" />
<style type="text/css" media="braille, not screen">
p { color: green }
</style>

<script language="javascript">
function test() {
    var re = document.getElementById("result");
    var media = document.styleSheets[0].media;
    media.appendMedium("screen and (color)");
    while (media.length) {
        media.deleteMedium(media.item(0));
    }
    re.innerHTML = "media list is empty"
    var first = true;
    for (var i = 0; i < media.length; ++i) {
        if (!first)  re.innerHTML += ", " + media.item(i);
        else re.innerHTML = media.item(i);
        first = false;
    }
}
</script>

</head>
<body onload="test()">
<!-- FIXME: NOTE! This will fail until dynamic setting of media property causes style recalculation.
          This is not the case currently (24.07.2005)
-->
<p> This text should be green and below should read "media list is empty".  </p>
<p id="result">Failure: test not run</p>
<p> Expected to fail (24.7.2005) </p>
</body>
</html>