<!
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>
