<!
DOCTYPE html>
<
html>
<
head>
<
title>CSSOM CSSRule CSSStyleRule interface</
title>
<
link rel=
"author" title=
"Letitia Lew" href=
"mailto:lew.letitia@gmail.com">
<
link rel=
"help" href=
"http://www.w3.org/TR/cssom-1/#css-rules">
<
link rel=
"help" href=
"http://www.w3.org/TR/cssom-1/#the-cssrule-interface">
<
link rel=
"help" href=
"http://www.w3.org/TR/cssom-1/#the-cssstylerule-interface">
<
meta name=
"flags" content=
"dom">
<
meta name=
"assert" content=
"All properties for this CSSStyleRule instance of CSSRule are initialized correctly">
<
script src=
"/resources/testharness.js"></
script>
<
script src=
"/resources/testharnessreport.js"></
script>
<
style id=
"styleElement" type=
"text/css">
div { margin: 10px; padding: 0px; }
</
style>
</
head>
<
body>
<
div id=
"log"></
div>
<
script type=
"text/javascript">
var rule;
setup(function() {
var styleSheet = document.getElementById(
"styleElement").sheet;
var ruleList = styleSheet.cssRules;
rule = ruleList[0];
});
test(function() {
assert_true(rule instanceof CSSRule);
assert_true(rule instanceof CSSStyleRule);
},
"CSSRule and CSSStyleRule types");
test(function() {
assert_equals(rule.STYLE_RULE, 1);
assert_equals(rule.IMPORT_RULE, 3);
assert_equals(rule.MEDIA_RULE, 4);
assert_equals(rule.FONT_FACE_RULE, 5);
assert_equals(rule.PAGE_RULE, 6);
assert_equals(rule.NAMESPACE_RULE, 10);
assert_idl_attribute(rule,
"type");
assert_equals(typeof rule.type,
"number");
},
"Type of CSSRule#type and constant values");
test(function() {
assert_true(rule instanceof CSSRule);
assert_idl_attribute(rule,
"cssText");
assert_idl_attribute(rule,
"parentRule");
assert_idl_attribute(rule,
"parentStyleSheet");
},
"Existence of CSSRule attributes");
test(function() {
assert_readonly(rule,
"type");
assert_readonly(rule,
"parentRule");
assert_readonly(rule,
"parentStyleSheet");
},
"Writability of CSSRule attributes");
test(function() {
assert_equals(rule.type, rule.STYLE_RULE);
assert_equals(typeof rule.cssText,
"string");
assert_equals(rule.cssText,
"div { margin: 10px; padding: 0px; }");
assert_equals(rule.parentRule, null);
assert_true(rule.parentStyleSheet instanceof CSSStyleSheet);
},
"Values of CSSRule attributes");
test(function() {
assert_idl_attribute(rule,
"selectorText");
assert_equals(typeof rule.selectorText,
"string");
assert_idl_attribute(rule,
"style");
},
"Existence and type of CSSStyleRule attributes");
test(function() {
// CSSStyleRule.
style has PutForwards=cssText and SameObject.
var initial = rule.
style.cssText;
var style = rule.
style;
rule.
style =
"";
assert_equals(rule.
style.cssText,
"");
assert_equals(rule.
style,
style);
rule.
style =
"margin: 42px;";
assert_equals(rule.
style.margin,
"42px");
assert_equals(rule.
style,
style);
rule.
style = initial;
assert_equals(rule.
style,
style);
},
"Assigning to CSSStyleRule.style assigns to cssText; CSSStyleRule.style returns the same object");
test(function() {
assert_equals(rule.selectorText,
"div");
assert_true(rule.
style instanceof CSSStyleDeclaration);
},
"Values of CSSStyleRule attributes");
test(function() {
assert_equals(rule.
style.margin,
"10px");
assert_equals(rule.
style.padding,
"0px");
rule.
style.padding =
"5px";
rule.
style.border =
"1px solid";
assert_equals(rule.
style.padding,
"5px");
assert_equals(rule.
style.border,
"1px solid");
},
"Mutability of CSSStyleRule's style attribute");
test(function() {
rule.
style =
"margin: 15px; padding: 2px;";
assert_equals(rule.
style.margin,
"15px",
"margin");
assert_equals(rule.
style.padding,
"2px",
"padding");
},
"CSSStyleRule's style has [PutForwards]");
</
script>
</
body>
</
html>
