media-query-in-supports-dynamic.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    iframe { width: 10px; height: 100px }
</style>
<iframe id="frame" src=""></iframe>
<script>
    var tParser = async_test("Check that @media inside @supports respond to width changes.");
    var tCSSOM = async_test("Check that CSSOM-inserted @media inside @supports respond to width changes.");

    onload = () => {
        frame.contentDocument.body.innerHTML =
            "<style>@supports (color:red) { @media (min-width: 50px) { p { color:green } } }</style>"
            + "<style>@supports (color:red) {}</style>"
            + "<p>Should be green and italic.</p>";

        frame.contentDocument.styleSheets[1].cssRules[0].insertRule("@media (min-width: 150px) { p { font-style: italic } }", 0);

        var frameP = frame.contentDocument.querySelector("p");
        var frameWindow = frame.contentDocument.defaultView;

        tParser.step(() => assert_equals(frameWindow.getComputedStyle(frameP).color, "rgb(0, 0, 0)", "The color of P was not black before the resize."));
        tParser.step(() => {
            frame.style.width = "100px";
            assert_equals(frameWindow.getComputedStyle(frameP).color, "rgb(0, 128, 0)", "The color of P was not green after the resize.");
        });
        tParser.done();

        tCSSOM.step(() => assert_equals(frameWindow.getComputedStyle(frameP).fontStyle, "normal", "The font-style of P was not normal before the resize."));
        tCSSOM.step(() => {
            frame.style.width = "200px";
            assert_equals(frameWindow.getComputedStyle(frameP).fontStyle, "italic", "The font-style of P was not italic after the resize.");
        });
        tCSSOM.done();
    };
</script>
chromium/third_party/blink/web_tests/fast/css/media-query-in-supports-dynamic.html
