CSSStyleRule.html - mozsearch

Enable keyboard shortcuts

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

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