<html>
<head>
<title>Test CSSOM View module: MediaQueryList interface</title>
<style type="text/css">

</style>
<script type="text/javascript" charset="utf-8">
    if (window.testRunner)
        testRunner.dumpAsText();

    function log(m) {
        document.getElementById('results').innerHTML += m + '<br>';
    }

    function callback1(query) {
        log("[1] - query " + query.media + " changed to " + (query.matches ? "true" : "false"));
    }

    function callback2(query) {
        log("[2] - query " + query.media + " changed to " + (query.matches ? "true" : "false"));
    }

    function runTests()
    {
        if (!window.testRunner)
            return;

        testRunner.setViewModeMediaFeature("windowed");

        windowedQuery = window.matchMedia("(-webkit-view-mode: windowed)");
        floatingQuery = window.matchMedia("(-webkit-view-mode: floating)");
        minimizedQuery = window.matchMedia("(-webkit-view-mode: minimized)");
        maximizedQuery = window.matchMedia("(-webkit-view-mode: maximized)");

        windowedQuery.addListener(callback1);
        floatingQuery.addListener(callback1);
        minimizedQuery.addListener(callback1);
        maximizedQuery.addListener(callback1);

        windowedQuery.addListener(callback2);
        floatingQuery.addListener(callback2);
        minimizedQuery.addListener(callback2);
        maximizedQuery.addListener(callback2);

        log("------------- minimized -------------");
        testRunner.setViewModeMediaFeature("minimized");
        log("------------- maximized -------------");
        testRunner.setViewModeMediaFeature("maximized");
        log("------------- windowed -------------");
        testRunner.setViewModeMediaFeature("windowed");
        log("------------- floating -------------");
        testRunner.setViewModeMediaFeature("floating");
    }

</script>
</head>
<body onload="runTests()">
    <p>Test the MediaQueryList interface: <a href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface" title="CSSOM View Module">http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface</a>.</p>
    <p>Testing addListener in different MediaQueryList objects and the callback call sequence</p>
    <div id="results">
    </div>
</body>
</html>