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