<html><!-- https://bugzilla.mozilla.org/show_bug.cgi?id=511909 --><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>@media and @-moz-document testcases</title> <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> <style type="text/css"> a { font-weight: bold; } #pink { color: pink; } #green { color: green; } #blue { color: blue; } pre { border: 1px solid black; } </style> <style type="text/css"> @-moz-document regexp(".*test_bug511909.*"){ #d { color: pink; } } </style> <style type="text/css"> @media screen { #m { color: green; } } </style> <style type="text/css"> @-moz-document regexp(".*test_bug511909.*"){ @media screen { #dm { color: blue; } } } </style> <!-- should parse --> <style type="text/css"> @media print { @-moz-document regexp("not_this_url"),} #mx { color: pink; } } } </style> <!-- should parse --> <style type="text/css"> @-moz-document regexp("not_this_url"){ @media print ,} #mxx { color: blue; } } } </style> <style type="text/css"> @media screen { @-moz-document regexp(".*test_bug511909.*"){ #md { color: green; } } } </style> <style type="text/css"> @media screen { @-moz-document regexp(".*test_bug511909.*"){ @media screen { @-moz-document regexp(".*test_bug511909.*"){ @media screen { #me { color: blue; } } } } } } </style> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=511909">Mozilla Bug 511909</a> <p id="display"></p> <div id="content" style="display: none"> </div> <script class="testbody" type="text/javascript"> SimpleTest.waitForExplicitFinish(); addLoadEvent(function() { var pink = getComputedStyle(document.getElementById("pink"), ""); var green = getComputedStyle(document.getElementById("green"), ""); var blue = getComputedStyle(document.getElementById("blue"), ""); var cs1 = getComputedStyle(document.getElementById("d"), ""); var cs2 = getComputedStyle(document.getElementById("m"), ""); var cs3 = getComputedStyle(document.getElementById("dm"), ""); var cs4 = getComputedStyle(document.getElementById("md"), ""); var cs5 = getComputedStyle(document.getElementById("mx"), ""); var cs6 = getComputedStyle(document.getElementById("mxx"), ""); var cs7 = getComputedStyle(document.getElementById("me"), ""); is(cs1.color, pink.color, "@-moz-document applies"); is(cs2.color, green.color, "@media applies"); is(cs3.color, blue.color, "@media nested in @-moz-document applies"); is(cs4.color, green.color, "@-moz-document nested in @media applies"); is(cs5.color, pink.color, "broken @media nested in @-moz-document correctly handled"); is(cs6.color, blue.color, "broken @-moz-document nested in @media correctly handled"); is(cs7.color, blue.color, "@media nested in @-moz-document nested in @media applies"); SimpleTest.finish(); }); </script> <div> <pre>default style </pre> <a id="pink">This line should be pink</a><br> <a id="green">This line should be green</a><br> <a id="blue">This line should be blue</a><br> <pre>@-moz-document {...} </pre> <a id="d">This line should be pink</a><br> <pre>@media screen {...} </pre> <a id="m">This line should be green</a><br> <pre>@-moz-document { @media screen {...} } </pre> <a id="dm">This line should be blue</a><br> <pre>@media print { @-moz-document regexp("not_this_url"),} #mx { color: pink; } } } </pre> <a id="mx">This line should be pink</a><br></div> <pre>@-moz-document regexp("not_this_url"){ @media print ,} #mxx { color: blue; } } } </pre> <a id="mxx">This line should be blue</a><br> <pre>@media screen { @-moz-documen {...} } </pre> <a id="md">This line should be green</a><br> <pre>@media screen { @-moz-document { @media screen {...} } } </pre> <a id="me">This line should be blue</a><br> </body></html>