layout/inspector/tests/test_getMatchingCSSRules_starting_style.html

   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 </style>
  33 <pre id="log"></pre>
  34 <tagname></tagname>
  35 <tagnametwo></tagnametwo>
  36 <script>
  37 /**
  38  * This test checks that InspectorUtils.getMatchingCSSRules setting
  39  * withStartingStyle:true returns correct style set in various cases.
  40  * To avoid effects from UA sheets, we use an element with "unknowntagname".
  41  */
  42
  43 const InspectorUtils = SpecialPowers.InspectorUtils;
  44
  45 add_task(async function testBasic() {
  46   info("Check the basic case of @starting-style")
  47
  48   const styleSheet = document.styleSheets[1];
  49   const el = document.querySelector("tagname");
  50   let rules = InspectorUtils.getMatchingCSSRules(el, "", false, true);
  51   is(rules.length, 3, "Expected rules");
  52
  53   is(
  54     rules[0].cssText,
  55     styleSheet.cssRules[0].cssRules[0].cssText,
  56     "first returned rule is the one in the top-level starting-style rule"
  57   );
  58
  59   is(
  60     rules[1].cssText,
  61     styleSheet.cssRules[1].cssText,
  62     "second returned rule is top-level tagname rule"
  63   );
  64
  65   is(
  66     rules[2].cssText,
  67     styleSheet.cssRules[1].cssRules[0].cssRules[0].cssText,
  68     "third returned rule is the starting-style nested in tagname rule"
  69   );
  70
  71   info(
  72     "Check that starting style rules are not returned when withStartingStyle " +
  73     "param is false"
  74   );
  75   rules = InspectorUtils.getMatchingCSSRules(el, "", false);
  76   is(rules.length, 1, "Expected rules");
  77
  78   is(
  79     rules[0].cssText,
  80     styleSheet.cssRules[1].cssText,
  81     "Only returned rule is top-level tagname rule"
  82   );
  83 });
  84
  85 add_task(async function testCombinator() {
  86   info("Check that @starting-style with child/descendant combinator " +
  87        "selectors are retrieved")
  88
  89   const styleSheet = document.styleSheets[1];
  90   const el = document.querySelector("tagnametwo");
  91   const rules = InspectorUtils.getMatchingCSSRules(el, "", false, true);
  92   is(rules.length, 3, "Got expected rules");
  93
  94   is(
  95     rules[0].cssText,
  96     styleSheet.cssRules[2].cssRules[0].cssText,
  97     "first returned rule for `tagnametwo` is the one in the top-level " +
  98     "starting-style rule"
  99   );
 100
 101   is(
 102     rules[1]?.cssText,
 103     styleSheet.cssRules[3].cssText,
 104     "second returned rule for `tagnametwo` is top-level `body tagnametwo` rule"
 105   );
 106
 107   is(
 108     rules[2]?.cssText,
 109     styleSheet.cssRules[3].cssRules[0].cssRules[0].cssText,
 110     "third returned rule for `tagnametwo` is the starting-style nested " +
 111     "in `body tagnametwo` rule"
 112   );
 113 });
 114 </script>