css/cssom/CSSStyleRule.html

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