layout/style/test/chrome/test_moz_document_nesting.html
author Zack Weinberg <zackw@panix.com>
Wed, 02 Sep 2015 13:54:30 -0400
changeset 260586 1fc07bdd9aa8d04a50c5f77956638bc452df45c5
parent 82614 layout/style/test/test_bug511909.html@ba1d8b3a53e493de189974d450fb5c543d7fb27d
permissions -rw-r--r--
Bug 1035091 part 2: disable @-moz-document in author sheets. r=heycam

<!doctype html><html><head><meta charset="UTF-8">
<title>@media and @-moz-document testcases</title>
<!-- This test was formerly known as test_bug511909.html.
     This is a chrome test because @-moz-document can only be used
     from user style sheets.  See bug 1035091. -->

<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css">

</head><body>
<script>
    SimpleTest.waitForExplicitFinish();

    var windowUtils =
        window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
              .getInterface(Components.interfaces.nsIDOMWindowUtils);

    var sheetURI =
        Components.classes["@mozilla.org/network/io-service;1"]
        .getService(Components.interfaces.nsIIOService)
        .newURI("moz_document_nesting.css", null, document.baseURIObject);

    windowUtils.loadSheet(sheetURI, windowUtils.USER_SHEET);

    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"), "");
      var cs8 = getComputedStyle(document.getElementById("mf"), "");
      var cs9 = getComputedStyle(document.getElementById("mg"), "");

      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");
      is(cs8.color, green.color, "@supports nested in @-moz-document applies");
      is(cs9.color, pink.color, "@-moz-document nested in @supports applies");

      SimpleTest.finish();
    });
</script>

<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-document {...}
}
</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>

<pre>@-moz-document {
  @supports { ... }
}
</pre>
<a id="mf">This line should be green</a><br>

<pre>@supports {
  @-moz-document { ... }
}
</pre>
<a id="mg">This line should be pink</a><br>

</body></html>