| <!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"> |
| <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> |
| <script id="metadata_cache">/* |
| { |
| "mediatest_medialist_serialize_element": { |
| "help": ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", |
| "http://www.w3.org/TR/cssom-1/#serializing-media-queries"], |
| "assert": ["MediaList.mediaText equals the 'media' value of the initial 'style' element."] |
| }, |
| "mediatest_medialist_serialize_comma": { |
| "help": ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", |
| "http://www.w3.org/TR/cssom-1/#serializing-media-queries"], |
| "assert": ["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)."] |
| }, |
| "mediatest_medialist_serialize_empty": { |
| "help": ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", |
| "http://www.w3.org/TR/cssom-1/#serializing-media-queries"], |
| "assert": ["If the media query list is empty return the empty string."] |
| }, |
| "mediatest_medialist_serialize_lexicographical": { |
| "help": ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", |
| "http://www.w3.org/TR/cssom-1/#serializing-media-queries"], |
| "assert": ["Each media query in the list of media queries should be sorted in lexicographical order."] |
| } |
| } |
| */</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; |
| } |
| |
| |
| test(function() { |
| setup(); |
| |
| assert_equals(mediaList.mediaText, "all"); |
| |
| }, "mediatest_medialist_serialize_element", |
| { help: ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", "http://www.w3.org/TR/cssom-1/#serializing-media-queries"], |
| assert: ["MediaList.mediaText equals the 'media' value of the initial 'style' element."] }); |
| |
| test(function() { |
| setup(); |
| |
| mediaList.appendMedium('screen'); |
| assert_equals(mediaList.mediaText, "all, screen"); |
| |
| }, "mediatest_medialist_serialize_comma", |
| { help: ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", "http://www.w3.org/TR/cssom-1/#serializing-media-queries"], |
| assert: ["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.deleteMedium('all'); |
| assert_equals(mediaList.mediaText, ""); |
| |
| }, "mediatest_medialist_serialize_empty", |
| { help: ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", "http://www.w3.org/TR/cssom-1/#serializing-media-queries"], |
| assert: ["If the media query list is empty return the empty string."] }); |
| |
| test(function() { |
| setup(); |
| |
| mediaList.appendMedium('screen'); |
| mediaList.appendMedium('print'); |
| assert_equals(mediaList.mediaText, "all, print, screen"); |
| |
| }, "mediatest_medialist_serialize_lexicographical", |
| { help: ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", "http://www.w3.org/TR/cssom-1/#serializing-media-queries"], |
| assert: ["Each media query in the list of media queries should be sorted in lexicographical order."] }); |
| |
| </script> |
| </body> |
| </html> |
