| <!DOCTYPE html> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| window.jsTestIsAsync = true; |
| function runTest() { |
| document.querySelector("iframe").style.width = "500px"; |
| shouldBe("getComputedStyle(document.querySelector('iframe').contentDocument.querySelector('.cssom')).backgroundColor", "\"rgb(0, 128, 0)\""); |
| shouldBe("getComputedStyle(document.querySelector('iframe').contentDocument.querySelector('.cssom-import')).backgroundColor", "\"rgb(0, 128, 0)\""); |
| finishJSTest(); |
| } |
| </script> |
| <iframe style="width: 300px; height: 300px;" srcdoc=' |
| <style> |
| .cssom-import, .cssom, .std { |
| background: green; |
| } |
| |
| @media (max-width: 400px) { |
| .std { |
| background-color: green; |
| } |
| } |
| </style> |
| <style id="media-rule"></style> |
| <style id="import-rule"></style> |
| |
| Tests that dynamically inserted media rules apply. The boxes below should be green. <br> |
| |
| <div class="std">The styles for this box are handled in standard CSS.</div> |
| <div class="cssom">The styles for this box are handled via CSS created dynamically.</div> |
| <div class="cssom-import">The styles for this box are handled via CSS created dynamically with an import rule.</div> |
| |
| <script> |
| document.getElementById("media-rule").sheet.insertRule("@media (max-width: 400px) { .cssom { background: red; display: block; }}", 0); |
| document.getElementById("import-rule").sheet.insertRule("@import url(resources/media-query-insert-rule.css) (max-width: 400px)", 0); |
| |
| function hasImportLoaded() { |
| return document.getElementById("import-rule").sheet.rules[0].styleSheet; |
| } |
| |
| function runTestOnImportLoad() { |
| if (hasImportLoaded()) |
| top.runTest(); |
| else |
| setTimeout(runTestOnImportLoad); |
| } |
| |
| document.documentElement.offsetTop; |
| runTestOnImportLoad(); |
| |
| </script>'></iframe> |
