<!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>