<!DOCTYPE html> <html> <head> <title>CSS Test: CSSOM StyleSheet Modify Rule List</title> <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> <link rel="reviewer" title="Ms2ger" href="mailto:ms2ger@gmail.com"> <!-- 2012-06-17 --> <link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface"> <link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssrule-interface"> <meta name="flags" content="dom"> <meta name="assert" content="StyleSheet and CSSStyleSheet objects have the properties specified in their interfaces"> <script src="/resources/testharness.js" type="text/javascript"></script> <script src="/resources/testharnessreport.js" type="text/javascript"></script> <style id="styleElement" type="text/css" media="all" title="internal style sheet" disabled="disabled"> * { margin: 0; padding: 0; } </style> </head> <body> <noscript>Test not run - javascript required.</noscript> <div id="log"></div> <script type="text/javascript"> var sheet = document.getElementById("styleElement").sheet; // Initial rule list is of size 1 // Can add a rule at first index test(function() { assert_equals(sheet.cssRules.length, 1); sheet.insertRule("p { color: green; }", 0); assert_equals(sheet.cssRules.length, 2); assert_equals(sheet.cssRules.item(0).cssText, "p { color: green; }"); }, "add_rule"); // Can delete rules until rule list is empty test(function() { sheet.deleteRule(0); assert_equals(sheet.cssRules.length, 1); sheet.deleteRule(0); assert_equals(sheet.cssRules.length, 0); }, "delete_rule"); </script> </body> </html>