Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom/CSSStyleRule.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>CSSOM CSSRule CSSStyleRule interface</title>
<link rel="author" title="Letitia Lew" href="mailto:lew.letitia@gmail.com">
<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>