<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: CSSOM View matchMedia and MediaQueryList</title>
        <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com" />
        <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-window-matchmedia" />
        <link rel="help" href="http://www.w3.org/TR/cssom-view/#the-mediaquerylist-interface" />
        <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-media-queries" />
        <meta name="flags" content="dom" />
        <script src="/resources/testharness.js" type="text/javascript" />
        <script src="/resources/testharnessreport.js" type="text/javascript" />
        <style type="text/css"><![CDATA[
            iframe { border: none; }
        ]]></style>
    </head>
    <body>
        <noscript>Test not run - javascript required.</noscript>
        <div id="log" />
        <iframe width="200" height="100" />
        <script type="text/javascript"><![CDATA[
            function reflow(doc) {
                doc.body.offsetWidth;
            }

            var iframe = document.querySelector("iframe");
            var iframe_window = window.frames[0];

            reflow(iframe_window.document);

            test(function(){
                assert_inherits(window, "matchMedia");
            }, "window.matchMedia exists");

            test(function(){
                assert_true(window.matchMedia instanceof Function, "FATAL ERROR: The window.matchMedia function is not present. The rest of the testsuite will fail to run.");
            }, "window.matchMedia is a Function");

            var mql, mql1, mql2, mql3;

            test(function(){
                mql = window.matchMedia("all");
                assert_true(mql instanceof MediaQueryList, "matchMedia(\"all\") returned MediaQueryList object.");
            }, "window.matchMedia(\"all\")");

            test(function(){
                assert_idl_attribute(mql, "media", "Check that MediaQueryList.media exists.");
            }, "MediaQueryList.media exists");

            test(function(){
                assert_readonly(mql, "media", "Check that MediaQueryList.media is readonly.");
            }, "MediaQueryList.media is readonly");

            test(function(){
                assert_equals(mql.media, "all");
            }, "MediaQueryList.media for \"all\"");

            test(function(){
                assert_idl_attribute(mql, "matches", "Check that MediaQueryList.matches exists.");
            }, "MediaQueryList.matches exists");

            test(function(){
                assert_readonly(mql, "matches", "Check that MediaQueryList.matches is readonly.");
            }, "MediaQueryList.matches is readonly");

            test(function(){
                assert_true(mql.matches);
            }, "MediaQueryList.matches for \"all\"");

            test(function(){
                assert_inherits(mql, "addListener");
            }, "MediaQueryList.addListener exists");

            test(function(){
                assert_true(mql.addListener instanceof Function);
            }, "MediaQueryList.addListener is a Function");

            test(function(){
                assert_inherits(mql, "removeListener");
            }, "MediaQueryList.removeListener exists");

            test(function(){
                assert_true(mql.removeListener instanceof Function);
            }, "MediaQueryList.removeListener is a Function");

            test(function(){
                mql = window.matchMedia("::");
                assert_true(mql instanceof MediaQueryList, "window.matchMedia(\"::\") returned MediaQueryList object.");
                assert_equals(mql.media, "not all", "MediaQueryList.media serialized as \"not all\" from original string with syntax error.");
            }, "MediaQueryList.media syntax error");

            test(function(){
                assert_false(mql.matches);
            }, "MediaQueryList.matches for \"not all\"");

            test(function(){
                mql = iframe_window.matchMedia("(max-width: 199px), all and (min-width: 200px)");
                assert_equals(mql.media, "(max-width: 199px), (min-width: 200px)");
                assert_true(mql.matches);
            }, "MediaQueryList.matches for \"(max-width: 199px), all and (min-width: 200px)\"")

            test(function(){
                mql = iframe_window.matchMedia("(min-aspect-ratio: 1/1)");
                assert_true(mql.matches);
            }, "MediaQueryList.matches for \"(min-aspect-ratio: 1/1)\"");

            test(function(){
                mql = iframe_window.matchMedia("(width: 200px)");
                assert_true(mql.matches);
            }, "MediaQueryList.matches for \"(width: 200px)\"");

            test(function(){
                mql1 = iframe_window.matchMedia("(max-height: 50px)");
                assert_false(mql1.matches);
            }, "MediaQueryList.matches for \"(max-height: 50px)\"");

            test(function(){
                mql2 = iframe_window.matchMedia("(min-width: 150px)");
                assert_true(mql2.matches);
            }, "MediaQueryList.matches for \"(min-width: 150px)\"");

            var resizeTest = async_test("Resize iframe from 200x100 to 200x50, then to 100x50");
            var listenerOrderTest = async_test("Listeners are called in the order which they have been added");
            var duplicateListenerTest = async_test("Listener added twice is only called once.");

            window.onload = function(){

                var rmListener = function(x){
                    resizeTest.step(function(){
                        assert_unreached("removeListener was not successful.");
                    });
                };

                var dupListener = function(x){
                    duplicateListenerTest.step(function(){
                        assert_false(mql1.dupListenerCalled, "Check that this listener has not been called before.");
                        mql1.dupListenerCalled = true;
                    });
                };

                mql1.firstListenerCalled = false;
                mql1.dupListenerCalled = false;
                // Add listener twice and remove it below. Should not be called.
                mql1.addListener(rmListener);
                mql1.addListener(rmListener);
                // Add listener twice. Should only be called once.
                mql1.addListener(dupListener);
                mql1.addListener(dupListener);

                mql1.addListener(function(x){
                    resizeTest.step(function(){
                        assert_equals(x, mql1, "Check that the MediaQueryList passed to the handler is the same that addListener was invoked on.");
                        assert_true(x.matches, "(max-height: 50px) should now pass.");
                        assert_true(mql2.matches, "(min-width: 150px) should still pass.");
                        iframe.width = "100";
                    });

                    listenerOrderTest.step(function(){
                        assert_false(mql1.firstListenerCalled, "Check that this listener is only called once.");
                        mql1.firstListenerCalled = true;
                    });
                });

                mql1.addListener(function(x){
                    listenerOrderTest.step(function(){
                        assert_true(mql1.firstListenerCalled, "Check that the listener added last is called last.");
                    });
                    listenerOrderTest.done();
                });

                mql1.removeListener(rmListener);

                mql2.addListener(function(x){
                    duplicateListenerTest.done();
                    resizeTest.step(function(){
                        assert_equals(x, mql2, "Check that the MediaQueryList passed to the handler is the same that addListener was invoked on.");
                        assert_true(mql1.matches, "(max-height: 50px) should still pass.");
                        assert_false(x.matches, "(min-width: 150px) should now fail.");
                    });
                    resizeTest.done();
                });

                iframe.height = "50";
            };]]>
        </script>
    </body>
</html>