serialize-media-rule.html (5834B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSSOM - Serialization of CSSMediaRule</title> 6 <link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <body> 11 <script> 12 function makeSheet(t) { 13 var style = document.createElement('style'); 14 document.body.appendChild(style); 15 t.add_cleanup(function() { 16 document.body.removeChild(style); 17 }); 18 return style.sheet; 19 } 20 21 test(function(t) { 22 var sheet = makeSheet(t); 23 sheet.insertRule('@media {}', 0); 24 25 assert_equals(sheet.cssRules.length, 1); 26 assert_equals(sheet.cssRules[0].cssText, '@media {\n}'); 27 }, 'empty media query list'); 28 29 test(function(t) { 30 var sheet = makeSheet(t); 31 sheet.insertRule('@media all {}'); 32 sheet.insertRule('@media print {}'); 33 sheet.insertRule('@media screen {}'); 34 sheet.insertRule('@media speech {}'); 35 36 assert_equals(sheet.cssRules.length, 4); 37 assert_equals(sheet.cssRules[0].cssText, '@media speech {\n}'); 38 assert_equals(sheet.cssRules[1].cssText, '@media screen {\n}'); 39 assert_equals(sheet.cssRules[2].cssText, '@media print {\n}'); 40 assert_equals(sheet.cssRules[3].cssText, '@media all {\n}'); 41 }, 'type - no features'); 42 43 test(function(t) { 44 var sheet = makeSheet(t); 45 sheet.insertRule('@media not all {}'); 46 sheet.insertRule('@media not print {}'); 47 sheet.insertRule('@media not screen {}'); 48 sheet.insertRule('@media not speech {}'); 49 50 assert_equals(sheet.cssRules.length, 4); 51 assert_equals(sheet.cssRules[0].cssText, '@media not speech {\n}'); 52 assert_equals(sheet.cssRules[1].cssText, '@media not screen {\n}'); 53 assert_equals(sheet.cssRules[2].cssText, '@media not print {\n}'); 54 assert_equals(sheet.cssRules[3].cssText, '@media not all {\n}'); 55 }, 'type - no features - negation'); 56 57 test(function(t) { 58 var sheet = makeSheet(t); 59 sheet.insertRule('@media aLL {}'); 60 sheet.insertRule('@media pRiNt {}'); 61 sheet.insertRule('@media screEN {}'); 62 sheet.insertRule('@media spEech {}'); 63 64 assert_equals(sheet.cssRules.length, 4); 65 assert_equals(sheet.cssRules[0].cssText, '@media speech {\n}'); 66 assert_equals(sheet.cssRules[1].cssText, '@media screen {\n}'); 67 assert_equals(sheet.cssRules[2].cssText, '@media print {\n}'); 68 assert_equals(sheet.cssRules[3].cssText, '@media all {\n}'); 69 }, 'type - no features - character case normalization'); 70 71 test(function(t) { 72 var sheet = makeSheet(t); 73 sheet.insertRule('@media all and (color) {}'); 74 75 assert_equals(sheet.cssRules.length, 1); 76 assert_equals(sheet.cssRules[0].cssText, '@media (color) {\n}'); 77 }, 'type - omission of all'); 78 79 test(function(t) { 80 var sheet = makeSheet(t); 81 sheet.insertRule('@media not all and (color) {}'); 82 83 assert_equals(sheet.cssRules.length, 1); 84 assert_equals(sheet.cssRules[0].cssText, '@media not all and (color) {\n}'); 85 }, 'type - inclusion of negated all'); 86 87 test(function(t) { 88 var sheet = makeSheet(t); 89 sheet.insertRule('@media screen and (Color) {}'); 90 sheet.insertRule('@media screen and (cOLor) {}'); 91 92 assert_equals(sheet.cssRules.length, 2); 93 assert_equals(sheet.cssRules[0].cssText, '@media screen and (color) {\n}'); 94 assert_equals(sheet.cssRules[1].cssText, '@media screen and (color) {\n}'); 95 }, 'features - character case normalization'); 96 97 /** 98 * The following test is disabled pending clarification of the intended 99 * behavior: https://github.com/w3c/csswg-drafts/issues/533 100 */ 101 //test(function(t) { 102 // var sheet = makeSheet(t); 103 // sheet.insertRule('@media screen and (color) and (color) {}'); 104 // 105 // assert_equals(sheet.cssRules.length, 1); 106 // assert_equals( 107 // sheet.cssRules[0].cssText, 108 // '@media screen and (color) {\n}' 109 // ); 110 //}, 'features - de-duplication'); 111 112 test(function(t) { 113 var sheet = makeSheet(t); 114 sheet.insertRule('@media print and (max-width: 23px) and (max-width: 45px) {}'); 115 116 assert_equals(sheet.cssRules.length, 1); 117 assert_equals( 118 sheet.cssRules[0].cssText, 119 '@media print and (max-width: 23px) and (max-width: 45px) {\n}' 120 ); 121 }, 'features - preservation of overspecified features'); 122 123 test(function(t) { 124 var sheet = makeSheet(t); 125 sheet.insertRule('@media screen and (max-width: 0px) and (color) {}'); 126 sheet.insertRule('@media screen and (color) and (max-width: 0px) {}'); 127 128 assert_equals(sheet.cssRules.length, 2); 129 assert_equals( 130 sheet.cssRules[0].cssText, 131 '@media screen and (color) and (max-width: 0px) {\n}' 132 ); 133 assert_equals( 134 sheet.cssRules[1].cssText, 135 '@media screen and (max-width: 0px) and (color) {\n}' 136 ); 137 }, 'features - no lexicographical sorting'); 138 139 test(function(t) { 140 var sheet = makeSheet(t); 141 sheet.insertRule('@media screen and (max-width: 0px), screen and (color) {}'); 142 143 assert_equals(sheet.cssRules.length, 1); 144 assert_equals( 145 sheet.cssRules[0].cssText, 146 '@media screen and (max-width: 0px), screen and (color) {\n}' 147 ); 148 }, 'media query list'); 149 150 test(function(t) { 151 var sheet = makeSheet(t); 152 sheet.insertRule('@media print {}'); 153 154 assert_equals(sheet.cssRules.length, 1); 155 sheet.cssRules[0].insertRule('#foo { z-index: 23; float: left; }', 0); 156 assert_equals( 157 sheet.cssRules[0].cssText, 158 [ 159 '@media print {', 160 ' #foo { z-index: 23; float: left; }', 161 '}' 162 ].join('\n') 163 ); 164 }, 'one rule'); 165 166 test(function(t) { 167 var sheet = makeSheet(t); 168 sheet.insertRule('@media print {}'); 169 170 assert_equals(sheet.cssRules.length, 1); 171 sheet.cssRules[0].insertRule('#foo { z-index: 23; float: left; }', 0); 172 sheet.cssRules[0].insertRule('#bar { float: none; z-index: 45; }', 0); 173 assert_equals( 174 sheet.cssRules[0].cssText, 175 [ 176 '@media print {', 177 ' #bar { float: none; z-index: 45; }', 178 ' #foo { z-index: 23; float: left; }', 179 '}' 180 ].join('\n') 181 ); 182 }, 'many rules'); 183 </script> 184 </body> 185 </html>