matchMedia.html (2982B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="flags" content="dom"> 4 <title>CSS Test: CSSOM View matchMedia and MediaQueryList</title> 5 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> 6 <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-window-matchmedia"> 7 <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#the-mediaquerylist-interface"> 8 <link rel="help" href="https://www.w3.org/TR/cssom-1/#serializing-media-queries"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="resources/matchMedia.js"></script> 12 <div id="log"></div> 13 <script> 14 "use strict"; 15 16 test(() => { 17 assert_equals( 18 typeof window.matchMedia, 19 "function", 20 "FATAL ERROR: The window.matchMedia function is not present. The rest of the testsuite will fail to run." 21 ); 22 }, "window.matchMedia is a function"); 23 24 test(() => { 25 const mql = window.matchMedia("all"); 26 assert_equals(mql.media, "all"); 27 assert_true(mql.matches); 28 }, 'window.matchMedia("all") matches'); 29 30 test(() => { 31 const mql = window.matchMedia(""); 32 assert_equals(mql.media, ""); 33 assert_true(mql.matches); 34 }, 'window.matchMedia("") matches'); 35 36 test(() => { 37 const mql = window.matchMedia("(min-width: 1px)"); 38 assert_equals(mql.media, "(min-width: 1px)"); 39 assert_true(mql.matches); 40 }, 'window.matchMedia("(min-width: 1px)") matches'); 41 42 test(() => { 43 const mql = window.matchMedia("::"); 44 assert_true(mql instanceof MediaQueryList); 45 assert_equals(mql.media, "not all"); 46 assert_false(mql.matches); 47 }, 'media query with syntax error is serialized as "not all"'); 48 49 promise_test(async t => { 50 const iframe = await createIFrame(t, 200); 51 const mql = iframe.contentWindow.matchMedia("(max-width: 199px), all and (min-width: 200px)"); 52 assert_equals(mql.media, "(max-width: 199px), (min-width: 200px)"); 53 assert_true(mql.matches); 54 }, 'iframe.matchMedia("(max-width: 199px), all and (min-width: 200px)") is serialized w/o "all"'); 55 56 promise_test(async t => { 57 const iframe = await createIFrame(t); 58 const mql = iframe.contentWindow.matchMedia("(min-aspect-ratio: 1/1)"); 59 assert_true(mql.matches); 60 }, 'iframe.matchMedia("(min-aspect-ratio: 1/1)") matches'); 61 62 promise_test(async t => { 63 const iframe = await createIFrame(t, 200); 64 const mql = iframe.contentWindow.matchMedia("(width: 200px)"); 65 assert_true(mql.matches); 66 }, 'iframe.matchMedia("(width: 200px)") matches'); 67 68 promise_test(async t => { 69 const iframe = await createIFrame(t, 200, 100); 70 const mql = iframe.contentWindow.matchMedia("(max-height: 50px)"); 71 assert_false(mql.matches); 72 }, 'iframe.matchMedia("(max-height: 50px)") matches'); 73 74 promise_test(async t => { 75 const iframe = await createIFrame(t, 200, 100); 76 const mql = iframe.contentWindow.matchMedia("(min-width: 150px)"); 77 assert_true(mql.matches); 78 }, 'iframe.matchMedia("(min-width: 150px)") matches'); 79 </script>