layout/inspector/tests/test_parseStyleSheet_nested.html

   1 <!DOCTYPE HTML>
   2 <html>
   3   <head>
   4     <title>Test InspectorUtils.parseStyleSheet with nested rules</title>
   5     <script src="/tests/SimpleTest/SimpleTest.js"></script>
   6     <style>
   7       h1 {
   8         .mySpan {
   9           background: gold;
  10           &.mySpan {
  11             color: red;
  12           }
  13         }
  14       }
  15     </style>
  16   </head>
  17   <body>
  18     <h1>Hello<span class="mySpan">world</span>
  19     <script>
  20       add_task(function() {
  21         info("Flush layout");
  22         // This is important to reproduce the original issue
  23         document.documentElement.getBoundingClientRect();
  24
  25         const InspectorUtils = SpecialPowers.InspectorUtils;
  26         const sheet = document.styleSheets[0];
  27         const spanEl = document.querySelector(".mySpan");
  28
  29         is(
  30           sheet.cssRules[0].cssRules[0].cssRules[0].cssText,
  31           `&.mySpan { color: red; }`,
  32           "Nested rule has expected initial text"
  33         );
  34
  35         is(
  36           InspectorUtils.getMatchingCSSRules(spanEl).length,
  37           2,
  38           "getMatchingCSSRules returned 2 rules for .mySpan"
  39         );
  40
  41         info("Modify stylesheet using InspectorUtils.parseStyleSheet");
  42         InspectorUtils.parseStyleSheet(
  43           sheet,
  44           `h1 {
  45             .mySpan {
  46               background: gold;
  47               &.mySpan {
  48                 color: black;
  49               }
  50             }
  51           }`
  52         );
  53
  54         is(
  55           sheet.cssRules[0].cssRules[0].cssRules[0].cssText,
  56           `&.mySpan { color: black; }`,
  57           "Nested rule has expected text after updating the stylesheet"
  58         );
  59
  60         info("Flush layout");
  61         // This is important to reproduce the original issue
  62         document.documentElement.getBoundingClientRect();
  63
  64         is(
  65           getComputedStyle(spanEl).color,
  66           "rgb(0, 0, 0)",
  67           "the color of the span element was properly updated"
  68         );
  69         const rules = InspectorUtils.getMatchingCSSRules(spanEl);
  70         is(
  71           rules.length,
  72           2,
  73           "getMatchingCSSRules still returned 2 rules for .mySpan after stylesheet was updated"
  74         );
  75         is(rules[1].style.color, "black", "rule was properly updated");
  76       });
  77     </script>
  78   </body>
  79 </html>