<!DOCTYPE html>
<style>
    html { font-size: 16px; }
</style>
<script src="../../resources/js-test.js"></script>
<script>
    if (!window.eventSender) {
        document.write("This test does not work in manual mode.");
    } else {
        if (window.testRunner)
            testRunner.dumpAsText();

        // These media queries should be equivalent, since the documentElement
        // has font-size:16px, so 300px should equal 18.75em. They should both
        // initially be false (as the layout test runner is 800px wide).
        shouldBeFalse(
            'matchMedia("(max-width: 300px)").matches');
        shouldBeFalse(
            'matchMedia("(max-width: 18.75em)").matches');
        debug("");

        // While zooming in, the two media queries should either
        // both match or both not match.
        var maxZoomLevel = 20;
        var zoomLevel = 0;
        while (zoomLevel < maxZoomLevel) {
            debug("eventSender.zoomPageIn()");
            eventSender.zoomPageIn();
            zoomLevel++;

            if (matchMedia("(max-width: 300px)").matches)
                break;

            shouldBe(
                'matchMedia("(max-width: 300px)").matches',
                'matchMedia("(max-width: 18.75em)").matches');
        }
        debug("");

        // Once sufficiently zoomed in, both should match.
        shouldBeTrue(
            'matchMedia("(max-width: 300px)").matches');
        shouldBeTrue(
            'matchMedia("(max-width: 18.75em)").matches');
        debug("");

        // As soon as we zoom back out, both should stop matching
        // and continue to not match.
        while (zoomLevel > 0) {
            debug("eventSender.zoomPageOut()");
            eventSender.zoomPageOut();
            zoomLevel--;

            shouldBeFalse(
                'matchMedia("(max-width: 300px)").matches');
            shouldBeFalse(
                'matchMedia("(max-width: 18.75em)").matches');
        }
    }
</script>