| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: CSSOM Media Query List 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/#the-medialist-interface"> |
| <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-media-queries"> |
| <link rel="help" href="http://www.w3.org/TR/cssom-1/#serialize-a-media-query-list"> |
| <meta name="flags" content="dom"> |
| <meta name="assert" content="MediaLists 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> |
| <body> |
| <noscript>Test not run - javascript required.</noscript> |
| <div id="log"></div> |
| <script type="text/javascript"> |
| |
| var styleElement; |
| var styleSheet; |
| var mediaList; |
| |
| // Setup |
| function setup() { |
| 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 = "all"; |
| document.getElementsByTagName("head")[0].appendChild(styleElement); |
| styleSheet = styleElement.sheet; |
| mediaList = styleSheet.media; |
| } |
| |
| // MediaList.mediaText equals the 'media' value of the initial 'style' element. |
| test(function() { |
| setup(); |
| |
| assert_equals(mediaList.mediaText, "all"); |
| |
| }, "mediatest_medialist_serialize_element"); |
| |
| // To serialize a comma-separated list concatenate all items of the list in list order while separating them by \",\" (U+002C), followed by a space (U+0020). |
| test(function() { |
| setup(); |
| |
| mediaList.appendMedium('screen'); |
| assert_equals(mediaList.mediaText, "all, screen"); |
| |
| }, "mediatest_medialist_serialize_comma"); |
| |
| // If the media query list is empty return the empty string. |
| test(function() { |
| setup(); |
| |
| mediaList.deleteMedium('all'); |
| assert_equals(mediaList.mediaText, ""); |
| |
| }, "mediatest_medialist_serialize_empty"); |
| |
| // Each media query should be sorted in the same order as they appear in the list of media queries. |
| test(function() { |
| setup(); |
| |
| mediaList.appendMedium('screen'); |
| mediaList.appendMedium('print'); |
| assert_equals(mediaList.mediaText, "all, screen, print"); |
| |
| }, "mediatest_medialist_serialize_order"); |
| |
| </script> |
| </body> |
| </html> |
