media-query-dynamic.html | Explore in Territory

<!DOCTYPE html>
<style>
    iframe {
        height: 0;
        width: 0;
    }
</style>
<script src="../../resources/js-test.js"></script>
<body onload="update()">
    <iframe></iframe>
</body>
<script>
    var iframe = document.querySelector("iframe");
    var doc = iframe.contentDocument;
    var p = doc.createElement('p');
    p.id = 'y1';

    function update() {
        doc.body.appendChild(p);

        var style = doc.createElement('style');
        style.textContent    = '@media all and (min-height: 10px) and (min-width: 10px) { #y1 { text-transform: uppercase; } }';
        doc.head.appendChild(style);

        // here the viewport is 0x0
        shouldBe('iframe.contentDocument.defaultView.getComputedStyle(p).textTransform', '"none"');
        iframe.setAttribute("style", "height: 100px; width: 100px");
        // now the viewport is more than 10px X 10px
        shouldBe('iframe.contentDocument.defaultView.getComputedStyle(p).textTransform', '"uppercase"');
    }
</script>

chromium/third_party/blink/web_tests/fast/css/media-query-dynamic.html