| <?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> |
| <meta name="timeout" content="long"/> |
| <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> |