Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: os == 'android'
- Manifest: layout/style/test/chrome/chrome.toml
<html><!--
--><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>@media and @-moz-document testcases</title>
<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() {
// Ensure all the sheets are re-parsed, so that the pref applies.
for (const sheet of Array.from(document.querySelectorAll('style'))) {
sheet.textContent += "/* dummy */";
}
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>