test_parseStyleSheet_nested.html (2224B)
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>