test_group_insertRule.html 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>CSS Variables Allowed Syntax</title>
  5. <link rel="author" title="L. David Baron" href="https://dbaron.org/">
  6. <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
  7. <link rel="help" href="http://www.w3.org/TR/css3-conditional/#the-cssgroupingrule-interface">
  8. <meta name="assert" content="requirements in definition of insertRule">
  9. <script src="/resources/testharness.js"></script>
  10. <script src="/resources/testharnessreport.js"></script>
  11. <style id="style">
  12. @media print {}
  13. </style>
  14. <script id="metadata_cache">/*
  15. {
  16. "rule_type": {},
  17. "rule_length": {},
  18. "insert_import_throws": {},
  19. "insert_index_throws1": {},
  20. "insert_index_throws2": {},
  21. "insert_media_succeed": {},
  22. "insert_style_succeed": {},
  23. "insert_bad_media_throw": {},
  24. "insert_empty_throw": {},
  25. "insert_garbage_after_media_throw": {},
  26. "insert_garbage_after_style_throw": {},
  27. "insert_two_media_throw": {},
  28. "insert_style_media_throw": {},
  29. "insert_media_style_throw": {},
  30. "insert_two_style_throw": {},
  31. "insert_retval": {}
  32. }
  33. */</script>
  34. </head>
  35. <body onload="run()">
  36. <div id=log></div>
  37. <div id="test"></div>
  38. <script>
  39. var sheet = document.getElementById("style").sheet;
  40. var grouping_rule = sheet.cssRules[0];
  41. test(function() {
  42. assert_equals(grouping_rule.type, CSSRule.MEDIA_RULE,
  43. "Rule type of @media rule");
  44. },
  45. "rule_type");
  46. test(function() {
  47. assert_equals(grouping_rule.cssRules.length, 0,
  48. "Starting cssRules.length of @media rule");
  49. },
  50. "rule_length");
  51. test(function() {
  52. assert_throws("HIERARCHY_REQUEST_ERR",
  53. function() {
  54. grouping_rule.insertRule("@import url(foo.css);", 0);
  55. },
  56. "inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR");
  57. },
  58. "insert_import_throws");
  59. test(function() {
  60. assert_throws("INDEX_SIZE_ERR",
  61. function() {
  62. grouping_rule.insertRule("p { color: green }", 1);
  63. },
  64. "inserting at a bad index throws INDEX_SIZE_ERR");
  65. },
  66. "insert_index_throws1");
  67. test(function() {
  68. grouping_rule.insertRule("p { color: green }", 0);
  69. assert_equals(grouping_rule.cssRules.length, 1,
  70. "Modified cssRules.length of @media rule");
  71. grouping_rule.insertRule("p { color: blue }", 1);
  72. assert_equals(grouping_rule.cssRules.length, 2,
  73. "Modified cssRules.length of @media rule");
  74. grouping_rule.insertRule("p { color: aqua }", 1);
  75. assert_equals(grouping_rule.cssRules.length, 3,
  76. "Modified cssRules.length of @media rule");
  77. assert_throws("INDEX_SIZE_ERR",
  78. function() {
  79. grouping_rule.insertRule("p { color: green }", 4);
  80. },
  81. "inserting at a bad index throws INDEX_SIZE_ERR");
  82. assert_equals(grouping_rule.cssRules.length, 3,
  83. "Modified cssRules.length of @media rule");
  84. },
  85. "insert_index_throws2");
  86. test(function() {
  87. while (grouping_rule.cssRules.length > 0) {
  88. grouping_rule.deleteRule(0);
  89. }
  90. grouping_rule.insertRule("@media print {}", 0);
  91. assert_equals(grouping_rule.cssRules.length, 1,
  92. "Modified cssRules.length of @media rule");
  93. assert_equals(grouping_rule.cssRules[0].type, CSSRule.MEDIA_RULE,
  94. "inserting syntactically correct media rule succeeds");
  95. },
  96. "insert_media_succeed");
  97. test(function() {
  98. while (grouping_rule.cssRules.length > 0) {
  99. grouping_rule.deleteRule(0);
  100. }
  101. grouping_rule.insertRule("p { color: yellow }", 0);
  102. assert_equals(grouping_rule.cssRules.length, 1,
  103. "Modified cssRules.length of @media rule");
  104. assert_equals(grouping_rule.cssRules[0].type, CSSRule.STYLE_RULE,
  105. "inserting syntactically correct style rule succeeds");
  106. },
  107. "insert_style_succeed");
  108. test(function() {
  109. while (grouping_rule.cssRules.length > 0) {
  110. grouping_rule.deleteRule(0);
  111. }
  112. assert_throws("SYNTAX_ERR",
  113. function() {
  114. grouping_rule.insertRule("@media bad syntax;", 0);
  115. },
  116. "inserting syntactically invalid rule throws syntax error");
  117. assert_equals(grouping_rule.cssRules.length, 0,
  118. "Modified cssRules.length of @media rule");
  119. },
  120. "insert_bad_media_throw");
  121. test(function() {
  122. while (grouping_rule.cssRules.length > 0) {
  123. grouping_rule.deleteRule(0);
  124. }
  125. assert_throws("SYNTAX_ERR",
  126. function() {
  127. grouping_rule.insertRule("", 0);
  128. },
  129. "inserting empty rule throws syntax error");
  130. assert_equals(grouping_rule.cssRules.length, 0,
  131. "Modified cssRules.length of @media rule");
  132. },
  133. "insert_empty_throw");
  134. test(function() {
  135. while (grouping_rule.cssRules.length > 0) {
  136. grouping_rule.deleteRule(0);
  137. }
  138. assert_throws("SYNTAX_ERR",
  139. function() {
  140. grouping_rule.insertRule("@media print {} foo", 0);
  141. },
  142. "inserting rule with garbage afterwards throws syntax error");
  143. assert_equals(grouping_rule.cssRules.length, 0,
  144. "Modified cssRules.length of @media rule");
  145. },
  146. "insert_garbage_after_media_throw");
  147. test(function() {
  148. while (grouping_rule.cssRules.length > 0) {
  149. grouping_rule.deleteRule(0);
  150. }
  151. assert_throws("SYNTAX_ERR",
  152. function() {
  153. grouping_rule.insertRule("p { color: yellow } foo", 0);
  154. },
  155. "inserting rule with garbage afterwards throws syntax error");
  156. assert_equals(grouping_rule.cssRules.length, 0,
  157. "Modified cssRules.length of @media rule");
  158. },
  159. "insert_garbage_after_style_throw");
  160. test(function() {
  161. while (grouping_rule.cssRules.length > 0) {
  162. grouping_rule.deleteRule(0);
  163. }
  164. assert_throws("SYNTAX_ERR",
  165. function() {
  166. grouping_rule.insertRule("@media print {} @media print {}", 0);
  167. },
  168. "inserting multiple rules throws syntax error");
  169. assert_equals(grouping_rule.cssRules.length, 0,
  170. "Modified cssRules.length of @media rule");
  171. },
  172. "insert_two_media_throw");
  173. test(function() {
  174. while (grouping_rule.cssRules.length > 0) {
  175. grouping_rule.deleteRule(0);
  176. }
  177. assert_throws("SYNTAX_ERR",
  178. function() {
  179. grouping_rule.insertRule("p { color: yellow } @media print {}", 0);
  180. },
  181. "inserting multiple rules throws syntax error");
  182. assert_equals(grouping_rule.cssRules.length, 0,
  183. "Modified cssRules.length of @media rule");
  184. },
  185. "insert_style_media_throw");
  186. test(function() {
  187. while (grouping_rule.cssRules.length > 0) {
  188. grouping_rule.deleteRule(0);
  189. }
  190. assert_throws("SYNTAX_ERR",
  191. function() {
  192. grouping_rule.insertRule("@media print {} p { color: yellow }", 0);
  193. },
  194. "inserting multiple rules throws syntax error");
  195. assert_equals(grouping_rule.cssRules.length, 0,
  196. "Modified cssRules.length of @media rule");
  197. },
  198. "insert_media_style_throw");
  199. test(function() {
  200. while (grouping_rule.cssRules.length > 0) {
  201. grouping_rule.deleteRule(0);
  202. }
  203. assert_throws("SYNTAX_ERR",
  204. function() {
  205. grouping_rule.insertRule("p { color: yellow } p { color: yellow }", 0);
  206. },
  207. "inserting multiple rules throws syntax error");
  208. assert_equals(grouping_rule.cssRules.length, 0,
  209. "Modified cssRules.length of @media rule");
  210. },
  211. "insert_two_style_throw");
  212. test(function() {
  213. while (grouping_rule.cssRules.length > 0) {
  214. grouping_rule.deleteRule(0);
  215. }
  216. var res = grouping_rule.insertRule("p { color: green }", 0);
  217. assert_equals(res, 0, "return value should be index");
  218. assert_equals(grouping_rule.cssRules.length, 1,
  219. "Modified cssRules.length of @media rule");
  220. res = grouping_rule.insertRule("p { color: green }", 0);
  221. assert_equals(res, 0, "return value should be index");
  222. assert_equals(grouping_rule.cssRules.length, 2,
  223. "Modified cssRules.length of @media rule");
  224. res = grouping_rule.insertRule("p { color: green }", 2);
  225. assert_equals(res, 2, "return value should be index");
  226. assert_equals(grouping_rule.cssRules.length, 3,
  227. "Modified cssRules.length of @media rule");
  228. },
  229. "insert_retval");
  230. </script>
  231. </body>
  232. </html>