resolution-change-on-page-zoom.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    @media (min-resolution: 2dppx) {
        body { background-color: green; }
    }
</style>
<p>The viewport should have a green background for page zoom = 200%.</p>
<script>
    setup({ "explicit_done": true });

    matchMedia("(min-resolution: 2dppx)").addListener((mq) => {
        test(() => {
            assert_true(mq.matches, "resolution query doesn't match after page zoom.");
        }, "Check that the MediaQueryList matches the resolution query.");

        test(() => {
            assert_equals(getComputedStyle(document.body).backgroundColor, "rgb(0, 128, 0)", "Background color of body is not green.");
        }, "Check that the background color is applied after the media query result changed.");
        done();
    });

    onload = () => {
        document.body.offsetTop;
        if (window.testRunner)
            testRunner.setPageZoomFactor(2.0);
    };
</script>

chromium/third_party/blink/web_tests/fast/media/resolution-change-on-page-zoom.html