tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

CSSStyleSheet.html (7237B)


      1 <!doctype html>
      2 <html>
      3 <head>
      4    <meta charset="utf-8">
      5    <title>CSSOM - CSSStyleSheet interface</title>
      6    <link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstylesheet-interface">
      7    <link rel="help" href="https://drafts.csswg.org/cssom/#legacy-css-style-sheet-members">
      8    <script src="/resources/testharness.js"></script>
      9    <script src="/resources/testharnessreport.js"></script>
     10    <style id="my-stylesheet">
     11        body { width: 50%; }
     12        #foo { height: 100px; }
     13    </style>
     14    <style id="empty-stylesheet"></style>
     15 
     16    <script>
     17    var styleSheet, emptyStyleSheet;
     18 
     19    setup(function() {
     20        styleSheet = document.styleSheets[0];
     21        styleSheet.cssRules[0].randomProperty = 1;
     22        styleSheet.cssRules[1].randomProperty = 2;
     23        emptyStyleSheet = document.styleSheets[1];
     24    });
     25 
     26    test(function() {
     27        assert_equals(styleSheet, document.getElementById("my-stylesheet").sheet, "CSSStyleSheet and LinkStyle's sheet attribute");
     28        assert_equals(styleSheet.cssRules.length, 2, "CSSStyleSheet cssRules attribute");
     29        assert_equals(styleSheet.cssRules[0].cssText, "body { width: 50%; }", "CSSStyleSheet cssRules attribute");
     30        assert_equals(styleSheet.cssRules[1].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute");
     31        assert_equals(styleSheet.cssRules[2], undefined, "CSSStyleSheet cssRules attribute");
     32 
     33        assert_equals(emptyStyleSheet, document.getElementById("empty-stylesheet").sheet, "CSSStyleSheet and LinkStyle's sheet attribute");
     34        assert_equals(emptyStyleSheet.cssRules.length, 0, "CSSStyleSheet cssRules attribute");
     35    }, "preconditions");
     36 
     37    test(function() {
     38        styleSheet.insertRule("#bar { margin: 10px; }", 1);
     39        assert_equals(styleSheet.cssRules.length, 3, "CSSStyleSheet cssRules attribute after insertRule function");
     40        assert_equals(styleSheet.cssRules[0].cssText, "body { width: 50%; }", "CSSStyleSheet cssRules attribute");
     41        assert_equals(styleSheet.cssRules[1].cssText, "#bar { margin: 10px; }", "CSSStyleSheet cssRules attribute after insertRule function");
     42        assert_equals(styleSheet.cssRules[2].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute after insertRule function");
     43        assert_equals(styleSheet.cssRules[0].randomProperty, 1, "[SameObject] cssRules attribute after insertRule function");
     44        assert_equals(styleSheet.cssRules[2].randomProperty, 2, "[SameObject] cssRules attribute after insertRule function");
     45    }, 'insertRule with #bar selector');
     46 
     47    test(function() {
     48        assert_throws_js(TypeError, function() { styleSheet.insertRule() });
     49    }, 'insertRule with no argument throws');
     50 
     51    test(function() {
     52        assert_throws_dom("IndexSizeError", function() {
     53            styleSheet.insertRule("#bar { margin: 10px; }", styleSheet.cssRules.length + 1)
     54        });
     55    }, 'insertRule with index greater than length throws');
     56 
     57    test(function() {
     58        styleSheet.deleteRule(1);
     59        assert_equals(styleSheet.cssRules.length, 2, "CSSStyleSheet cssRules attribute after deleteRule function");
     60        assert_equals(styleSheet.cssRules[0].cssText, "body { width: 50%; }", "CSSStyleSheet cssRules attribute after deleteRule function");
     61        assert_equals(styleSheet.cssRules[1].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute after deleteRule function");
     62        assert_equals(styleSheet.cssRules[2], undefined, "CSSStyleSheet cssRules attribute after deleteRule function");
     63        assert_equals(styleSheet.cssRules[0].randomProperty, 1, "[SameObject] cssRules attribute after deleteRule function");
     64        assert_equals(styleSheet.cssRules[1].randomProperty, 2, "[SameObject] cssRules attribute after deleteRule function");
     65    }, 'deleteRule(1)');
     66 
     67    test(function() {
     68        assert_throws_js(TypeError, function() { styleSheet.deleteRule() });
     69    }, 'deleteRule with no argument throws');
     70 
     71    test(function() {
     72        assert_throws_dom("IndexSizeError", function() { emptyStyleSheet.deleteRule(0) });
     73    }, 'deleteRule on empty style sheet throws');
     74 
     75    test(function() {
     76        styleSheet.removeRule();
     77        assert_equals(styleSheet.cssRules.length, 1, "CSSStyleSheet cssRules attribute after removeRule function");
     78        assert_equals(styleSheet.cssRules[0].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute after removeRule function");
     79    }, 'removeRule with no argument removes first rule');
     80 
     81    test(function() {
     82        assert_throws_dom("IndexSizeError", function() { emptyStyleSheet.removeRule(0) });
     83    }, 'removeRule on empty style sheet throws');
     84 
     85    test(function() {
     86        assert_equals(styleSheet.addRule("@media all", "#foo { color: red }"), -1);
     87        assert_equals(styleSheet.cssRules.length, 2, "CSSStyleSheet cssRules attribute after addRule function");
     88        assert_true(styleSheet.cssRules[1] instanceof CSSMediaRule, "CSSStyleSheet addRule does some silly string concatenation");
     89    }, 'addRule with @media rule');
     90 
     91    test(function() {
     92        styleSheet.removeRule(1);
     93        assert_equals(styleSheet.cssRules.length, 1, "CSSStyleSheet cssRules attribute after removeRule function with index");
     94        assert_equals(styleSheet.cssRules[0].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute after deleteRule function with index");
     95    }, 'removeRule(1)');
     96 
     97    test(function() {
     98        assert_equals(styleSheet.addRule("#foo", "color: red"), -1);
     99        assert_equals(styleSheet.cssRules.length, 2, "CSSStyleSheet cssRules attribute after addRule function with simple selector");
    100        assert_equals(styleSheet.cssRules[1].cssText, "#foo { color: red; }", "CSSStyleSheet cssRules attribute after addRule function without index appends to the end");
    101 
    102        assert_equals(styleSheet.addRule("#foo", "color: blue", 0), -1);
    103        assert_equals(styleSheet.cssRules.length, 3, "CSSStyleSheet cssRules attribute after addRule function with simple selector with index");
    104        assert_equals(styleSheet.cssRules[0].cssText, "#foo { color: blue; }", "addRule function with index performs an insertion");
    105    }, 'addRule with #foo selectors');
    106 
    107    test(function() {
    108        assert_equals(styleSheet.addRule(), -1);
    109        assert_equals(styleSheet.cssRules.length, 4, "CSSStyleSheet cssRules attribute after addRule function without arguments");
    110        assert_equals(styleSheet.cssRules[3].cssText, "undefined { }", "addRule arguments default to undefined");
    111    }, 'addRule with no argument adds "undefined" selector');
    112 
    113    test(function() {
    114        assert_throws_dom("IndexSizeError", function() {
    115            styleSheet.addRule("#foo", "color: red", styleSheet.cssRules.length + 1);
    116        });
    117    }, 'addRule with index greater than length throws');
    118 
    119    test(function() {
    120        assert_equals(styleSheet.cssRules, styleSheet.rules);
    121    }, "cssRules and rules are the same object");
    122 
    123    test(function() {
    124        assert_equals(styleSheet.cssRules, styleSheet.cssRules);
    125    }, "cssRules returns the same object twice");
    126 
    127    test(function() {
    128        assert_equals(styleSheet.rules, styleSheet.rules);
    129    }, "rules returns the same object twice");
    130    </script>
    131 </head>
    132 </html>