| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: CSSOM Media Query Serialization</title> |
| <link rel="author" title="Ben Sheldon" href="mailto:ben@codeforamerica.org"> |
| <link rel="author" title="Chapman Shoop" href="mailto:chapman.shoop@gmail.com"> |
| <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-media-queries"> |
| <meta name="flags" content="dom"> |
| <meta name="assert" content="Media Queries are serialized according to the specification"> |
| <script src="/resources/testharness.js" type="text/javascript"></script> |
| <script src="/resources/testharnessreport.js" type="text/javascript"></script> |
| </head> |
| <script id="metadata_cache">/* |
| { |
| "mediatest_mediaquery_serialize_1": { |
| "assert": ["First explicit example input (first column) and output (second column) in specification."] |
| }, |
| "mediatest_mediaquery_serialize_2": { |
| "assert": ["Second explicit example input (first column) and output (second column) in specification."] |
| } |
| } |
| */</script> |
| <body> |
| <noscript>Test not run - javascript required.</noscript> |
| <div id="log"></div> |
| <script type="text/javascript"> |
| |
| var styleElement; |
| var styleSheet; |
| var mediaList; |
| |
| // Setup - accepts media value for style element, e.g. <style media=???"> |
| function setupMedia(media) { |
| styleElement = document.getElementById("styleElement"); |
| |
| if (styleElement) { |
| // teardown |
| document.getElementsByTagName("head")[0].removeChild(styleElement); |
| styleElement = undefined; |
| styleSheet = undefined; |
| mediaList = undefined; |
| } |
| |
| styleElement = document.createElement("style"); |
| styleElement.id = "styleElement"; |
| styleElement.type = "text/css"; |
| styleElement.media = media; |
| document.getElementsByTagName("head")[0].appendChild(styleElement); |
| styleSheet = styleElement.sheet; |
| mediaList = styleSheet.media; |
| } |
| |
| |
| test(function() { |
| setupMedia('not screen and (min-WIDTH:5px) AND (max-width:40px )'); |
| |
| assert_equals(mediaList.mediaText, "not screen and (max-width: 40px) and (min-width: 5px)"); |
| |
| }, "mediatest_mediaquery_serialize_1", |
| { assert: ["First explicit example input (first column) and output (second column) in specification."] }); |
| |
| test(function() { |
| setupMedia('all and (color) and (color) '); |
| |
| assert_equals(mediaList.mediaText, "(color)"); |
| |
| }, "mediatest_mediaquery_serialize_2", |
| { assert: ["Second explicit example input (first column) and output (second column) in specification."] }); |
| |
| </script> |
| </body> |
| </html> |
