third_party/WebKit/LayoutTests/fast/css/media-query-insert-rule.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <script>
   4 window.jsTestIsAsync = true;
   5 function runTest() {
   6     document.querySelector("iframe").style.width = "500px";
   7     shouldBe("getComputedStyle(document.querySelector('iframe').contentDocument.querySelector('.cssom')).backgroundColor", "\"rgb(0, 128, 0)\"");
   8     shouldBe("getComputedStyle(document.querySelector('iframe').contentDocument.querySelector('.cssom-import')).backgroundColor", "\"rgb(0, 128, 0)\"");
   9     finishJSTest();
  10 }
  11 </script>
  12 <iframe style="width: 300px; height: 300px;" srcdoc='
  13 <style>
  14 .cssom-import, .cssom, .std {
  15     background: green;
  16 }
  17
  18 @media (max-width: 400px) {
  19     .std {
  20         background-color: green;
  21     }
  22 }
  23 </style>
  24 <style id="media-rule"></style>
  25 <style id="import-rule"></style>
  26
  27 Tests that dynamically inserted media rules apply. The boxes below should be green. <br>
  28
  29 <div class="std">The styles for this box are handled in standard CSS.</div>
  30 <div class="cssom">The styles for this box are handled via CSS created dynamically.</div>
  31 <div class="cssom-import">The styles for this box are handled via CSS created dynamically with an import rule.</div>
  32
  33 <script>
  34 document.getElementById("media-rule").sheet.insertRule("@media (max-width: 400px) { .cssom { background: red; display: block; }}", 0);
  35 document.getElementById("import-rule").sheet.insertRule("@import url(resources/media-query-insert-rule.css) (max-width: 400px)", 0);
  36
  37 function hasImportLoaded() {
  38     return document.getElementById("import-rule").sheet.rules[0].styleSheet;
  39 }
  40
  41 function runTestOnImportLoad() {
  42     if (hasImportLoaded())
  43         top.runTest();
  44     else
  45         setTimeout(runTestOnImportLoad);
  46 }
  47
  48 document.documentElement.offsetTop;
  49 runTestOnImportLoad();
  50
  51 </script>'></iframe>