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