tor-browser

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

test_getMatchingCSSRules_starting_style.html (3549B)

      1 <!DOCTYPE HTML>
      2 <title>Test for InspectorUtils.getMatchingCSSRules for starting style</title>
      3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
      4 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
      5 <style>
      6  @starting-style {
      7    tagname {
      8      color: red;
      9    }
     10  }
     11  tagname {
     12    color: blue;
     13    opacity: 1;
     14 
     15    @starting-style {
     16      opacity: 0;
     17    }
     18  }
     19 
     20  @starting-style {
     21    body > tagnametwo {
     22      background-color: salmon;
     23    }
     24  }
     25  body tagnametwo {
     26    background-color: tomato;
     27 
     28    @starting-style {
     29      background-color: gold;
     30    }
     31  }
     32 
     33  body tagnamethree {
     34    color: bisque;
     35 
     36    @starting-style {
     37      color: hotpink;
     38    }
     39 
     40    &::after {
     41      content: "Hi";
     42    }
     43  }
     44 </style>
     45 <pre id="log"></pre>
     46 <tagname></tagname>
     47 <tagnametwo></tagnametwo>
     48 <tagnamethree></tagnamethree>
     49 <script>
     50 /**
     51 * This test checks that InspectorUtils.getMatchingCSSRules setting
     52 * withStartingStyle:true returns correct style set in various cases.
     53 * To avoid effects from UA sheets, we use an element with "unknowntagname".
     54 */
     55 
     56 const InspectorUtils = SpecialPowers.InspectorUtils;
     57 
     58 add_task(async function testBasic() {
     59  info("Check the basic case of @starting-style")
     60 
     61  const styleSheet = document.styleSheets[1];
     62  const el = document.querySelector("tagname");
     63  let rules = InspectorUtils.getMatchingCSSRules(el, "", false, true);
     64  is(rules.length, 3, "Expected rules");
     65 
     66  is(
     67    rules[0].cssText,
     68    styleSheet.cssRules[0].cssRules[0].cssText,
     69    "first returned rule is the one in the top-level starting-style rule"
     70  );
     71 
     72  is(
     73    rules[1].cssText,
     74    styleSheet.cssRules[1].cssText,
     75    "second returned rule is top-level tagname rule"
     76  );
     77 
     78  is(
     79    rules[2].cssText,
     80    styleSheet.cssRules[1].cssRules[0].cssRules[0].cssText,
     81    "third returned rule is the starting-style nested in tagname rule"
     82  );
     83 
     84  info(
     85    "Check that starting style rules are not returned when withStartingStyle " +
     86    "param is false"
     87  );
     88  rules = InspectorUtils.getMatchingCSSRules(el, "", false);
     89  is(rules.length, 1, "Expected rules");
     90 
     91  is(
     92    rules[0].cssText,
     93    styleSheet.cssRules[1].cssText,
     94    "Only returned rule is top-level tagname rule"
     95  );
     96 });
     97 
     98 add_task(async function testCombinator() {
     99  info("Check that @starting-style with child/descendant combinator " +
    100       "selectors are retrieved")
    101 
    102  const styleSheet = document.styleSheets[1];
    103  const el = document.querySelector("tagnametwo");
    104  const rules = InspectorUtils.getMatchingCSSRules(el, "", false, true);
    105  is(rules.length, 3, "Got expected rules");
    106 
    107  is(
    108    rules[0].cssText,
    109    styleSheet.cssRules[2].cssRules[0].cssText,
    110    "first returned rule for `tagnametwo` is the one in the top-level " +
    111    "starting-style rule"
    112  );
    113 
    114  is(
    115    rules[1]?.cssText,
    116    styleSheet.cssRules[3].cssText,
    117    "second returned rule for `tagnametwo` is top-level `body tagnametwo` rule"
    118  );
    119 
    120  is(
    121    rules[2]?.cssText,
    122    styleSheet.cssRules[3].cssRules[0].cssRules[0].cssText,
    123    "third returned rule for `tagnametwo` is the starting-style nested " +
    124    "in `body tagnametwo` rule"
    125  );
    126 });
    127 
    128 add_task(async function testPseudo() {
    129  info("Check that pseudo element on element with @starting-style are retrieved")
    130 
    131  const styleSheet = document.styleSheets[1];
    132  const el = document.querySelector("tagnamethree");
    133  const rules = InspectorUtils.getMatchingCSSRules(el, ":after", false, true);
    134  is(rules.length, 1, "Got expected number of rules");
    135  is(rules[0].selectorText, "&::after", "Got expected ::after rule");
    136 })
    137 </script>