media-attr-non-matching-dynamic.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  iframe {
    height: 50px;
    width: 50px;
  }
</style>
<iframe></iframe>
<script>
  test(() => {
    var iframe = document.querySelector("iframe");
    var doc = iframe.contentDocument;
    var style = doc.createElement("style");
    style.setAttribute("media", "(min-width: 100px)");
    style.textContent = "body { background: green }";
    doc.head.appendChild(style);
    assert_equals(doc.defaultView.getComputedStyle(doc.body).backgroundColor, "rgba(0, 0, 0, 0)");
    iframe.setAttribute("style", "height: 100px; width: 100px");
    assert_equals(doc.defaultView.getComputedStyle(doc.body).backgroundColor, "rgb(0, 128, 0)");
  }, "Sheet with initially non-matching viewport media query applies after resize");
</script>

chromium/third_party/blink/web_tests/fast/css/media-attr-non-matching-dynamic.html