<!DOCTYPE HTML> <html> <head> <title>CSS Variables Allowed Syntax</title> <link rel="author" title="L. David Baron" href="https://dbaron.org/"> <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> <link rel="help" href="http://www.w3.org/TR/css3-conditional/#the-cssgroupingrule-interface"> <meta name="assert" content="requirements in definition of insertRule"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style id="style"> @media print {} </style> <script id="metadata_cache">/* { "rule_type": {}, "rule_length": {}, "insert_import_throws": {}, "insert_index_throws1": {}, "insert_index_throws2": {}, "insert_media_succeed": {}, "insert_style_succeed": {}, "insert_bad_media_throw": {}, "insert_empty_throw": {}, "insert_garbage_after_media_throw": {}, "insert_garbage_after_style_throw": {}, "insert_two_media_throw": {}, "insert_style_media_throw": {}, "insert_media_style_throw": {}, "insert_two_style_throw": {}, "insert_retval": {} } */</script> </head> <body onload="run()"> <div id=log></div> <div id="test"></div> <script> var sheet = document.getElementById("style").sheet; var grouping_rule = sheet.cssRules[0]; test(function() { assert_equals(grouping_rule.type, CSSRule.MEDIA_RULE, "Rule type of @media rule"); }, "rule_type"); test(function() { assert_equals(grouping_rule.cssRules.length, 0, "Starting cssRules.length of @media rule"); }, "rule_length"); test(function() { assert_throws("HIERARCHY_REQUEST_ERR", function() { grouping_rule.insertRule("@import url(foo.css);", 0); }, "inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR"); }, "insert_import_throws"); test(function() { assert_throws("INDEX_SIZE_ERR", function() { grouping_rule.insertRule("p { color: green }", 1); }, "inserting at a bad index throws INDEX_SIZE_ERR"); }, "insert_index_throws1"); test(function() { grouping_rule.insertRule("p { color: green }", 0); assert_equals(grouping_rule.cssRules.length, 1, "Modified cssRules.length of @media rule"); grouping_rule.insertRule("p { color: blue }", 1); assert_equals(grouping_rule.cssRules.length, 2, "Modified cssRules.length of @media rule"); grouping_rule.insertRule("p { color: aqua }", 1); assert_equals(grouping_rule.cssRules.length, 3, "Modified cssRules.length of @media rule"); assert_throws("INDEX_SIZE_ERR", function() { grouping_rule.insertRule("p { color: green }", 4); }, "inserting at a bad index throws INDEX_SIZE_ERR"); assert_equals(grouping_rule.cssRules.length, 3, "Modified cssRules.length of @media rule"); }, "insert_index_throws2"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } grouping_rule.insertRule("@media print {}", 0); assert_equals(grouping_rule.cssRules.length, 1, "Modified cssRules.length of @media rule"); assert_equals(grouping_rule.cssRules[0].type, CSSRule.MEDIA_RULE, "inserting syntactically correct media rule succeeds"); }, "insert_media_succeed"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } grouping_rule.insertRule("p { color: yellow }", 0); assert_equals(grouping_rule.cssRules.length, 1, "Modified cssRules.length of @media rule"); assert_equals(grouping_rule.cssRules[0].type, CSSRule.STYLE_RULE, "inserting syntactically correct style rule succeeds"); }, "insert_style_succeed"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } assert_throws("SYNTAX_ERR", function() { grouping_rule.insertRule("@media bad syntax;", 0); }, "inserting syntactically invalid rule throws syntax error"); assert_equals(grouping_rule.cssRules.length, 0, "Modified cssRules.length of @media rule"); }, "insert_bad_media_throw"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } assert_throws("SYNTAX_ERR", function() { grouping_rule.insertRule("", 0); }, "inserting empty rule throws syntax error"); assert_equals(grouping_rule.cssRules.length, 0, "Modified cssRules.length of @media rule"); }, "insert_empty_throw"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } assert_throws("SYNTAX_ERR", function() { grouping_rule.insertRule("@media print {} foo", 0); }, "inserting rule with garbage afterwards throws syntax error"); assert_equals(grouping_rule.cssRules.length, 0, "Modified cssRules.length of @media rule"); }, "insert_garbage_after_media_throw"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } assert_throws("SYNTAX_ERR", function() { grouping_rule.insertRule("p { color: yellow } foo", 0); }, "inserting rule with garbage afterwards throws syntax error"); assert_equals(grouping_rule.cssRules.length, 0, "Modified cssRules.length of @media rule"); }, "insert_garbage_after_style_throw"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } assert_throws("SYNTAX_ERR", function() { grouping_rule.insertRule("@media print {} @media print {}", 0); }, "inserting multiple rules throws syntax error"); assert_equals(grouping_rule.cssRules.length, 0, "Modified cssRules.length of @media rule"); }, "insert_two_media_throw"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } assert_throws("SYNTAX_ERR", function() { grouping_rule.insertRule("p { color: yellow } @media print {}", 0); }, "inserting multiple rules throws syntax error"); assert_equals(grouping_rule.cssRules.length, 0, "Modified cssRules.length of @media rule"); }, "insert_style_media_throw"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } assert_throws("SYNTAX_ERR", function() { grouping_rule.insertRule("@media print {} p { color: yellow }", 0); }, "inserting multiple rules throws syntax error"); assert_equals(grouping_rule.cssRules.length, 0, "Modified cssRules.length of @media rule"); }, "insert_media_style_throw"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } assert_throws("SYNTAX_ERR", function() { grouping_rule.insertRule("p { color: yellow } p { color: yellow }", 0); }, "inserting multiple rules throws syntax error"); assert_equals(grouping_rule.cssRules.length, 0, "Modified cssRules.length of @media rule"); }, "insert_two_style_throw"); test(function() { while (grouping_rule.cssRules.length > 0) { grouping_rule.deleteRule(0); } var res = grouping_rule.insertRule("p { color: green }", 0); assert_equals(res, 0, "return value should be index"); assert_equals(grouping_rule.cssRules.length, 1, "Modified cssRules.length of @media rule"); res = grouping_rule.insertRule("p { color: green }", 0); assert_equals(res, 0, "return value should be index"); assert_equals(grouping_rule.cssRules.length, 2, "Modified cssRules.length of @media rule"); res = grouping_rule.insertRule("p { color: green }", 2); assert_equals(res, 2, "return value should be index"); assert_equals(grouping_rule.cssRules.length, 3, "Modified cssRules.length of @media rule"); }, "insert_retval"); </script> </body> </html>