test_replaceBlockRuleBodyTextInStylesheet.html (7011B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test InspectorUtils::replaceBlockRuleBodyTextInStylesheet</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 8 <style> 9 #test-simple { 10 color: #f0c; 11 } 12 #test-unicode,[data-unicode="🦄👨👩👧👦"]::after { 13 content: /* test comment */ "👨👩👧👦🦄"; 14 outline: 2px solid salmon; 15 } 16 #test-empty {} /* 🛠️⚒️🛠️ */ #test-same-line { font-size: 3em; } 17 #test-nested-parent { 18 color: tomato; 19 #test-nested-child { 20 background: gold; 21 } 22 }#test-after-closing-bracket{--modified:false} 23 </style> 24 <script>SimpleTest.waitForExplicitFinish();</script> 25 <script defer> 26 const InspectorUtils = SpecialPowers.InspectorUtils; 27 let stylesheet = document.styleSheets[1]; 28 let authoredStyleSheetText = document.querySelector("style").textContent; 29 30 const existingRulesAuthoredText = [ 31 `#test-simple { 32 color: #f0c; 33 }`, 34 `#test-unicode,[data-unicode="🦄👨👩👧👦"]::after { 35 content: /* test comment */ "👨👩👧👦🦄"; 36 outline: 2px solid salmon; 37 }`, 38 `#test-empty {}`, 39 `#test-same-line { font-size: 3em; }`, 40 `#test-nested-parent { 41 color: tomato; 42 #test-nested-child { 43 background: gold; 44 } 45 }`, 46 `#test-nested-child { 47 background: gold; 48 }`, 49 `#test-after-closing-bracket{--modified:false}`, 50 ]; 51 52 const replaceBlockRuleBodyTextInStylesheet = (rule, newBodyText) => { 53 return InspectorUtils.replaceBlockRuleBodyTextInStylesheet( 54 authoredStyleSheetText, 55 InspectorUtils.getRelativeRuleLine(rule), 56 InspectorUtils.getRuleColumn(rule), 57 newBodyText 58 )}; 59 60 info("Check a simple case"); 61 let newBodyText = `border-color: cyan;`; 62 is( 63 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[0], newBodyText), 64 authoredStyleSheetText.replace( 65 existingRulesAuthoredText[0], 66 `#test-simple {${newBodyText}}`, 67 ), 68 "Got the expected result for #test-simple" 69 ); 70 71 info("Check that the rule body can be emptied"); 72 is( 73 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[0], ""), 74 authoredStyleSheetText.replace( 75 existingRulesAuthoredText[0], 76 `#test-simple {}`, 77 ), 78 "Successfuly removed rule content for #test-simple" 79 ); 80 81 info("Check that it can handle unicode characters"); 82 newBodyText = `content: "o 🦊 o";`; 83 is( 84 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[1], newBodyText), 85 authoredStyleSheetText.replace(existingRulesAuthoredText[1], 86 `#test-unicode,[data-unicode="🦄👨👩👧👦"]::after {${newBodyText}}`, 87 ), 88 "Got the expected result for #test-unicode" 89 ); 90 91 info("Check that it can replace content of an empty rule"); 92 newBodyText = `font-family: "Zilla;"`; 93 is( 94 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[2], newBodyText), 95 authoredStyleSheetText.replace( 96 existingRulesAuthoredText[2], 97 `#test-empty {${newBodyText}}`, 98 ), 99 "Got the expected result for #test-empty" 100 ); 101 102 info("Check that it can handle a rule on a same line as another rule"); 103 newBodyText = `color: pink;`; 104 is( 105 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[3], newBodyText), 106 authoredStyleSheetText.replace( 107 existingRulesAuthoredText[3], 108 `#test-same-line {${newBodyText}}`, 109 ), 110 "Got the expected result for #test-same-line" 111 ); 112 113 info("Check that it can handle a rule with a child rule"); 114 newBodyText = `background: silver; 115 & > span { 116 color: white; 117 }`; 118 is( 119 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[4], newBodyText), 120 authoredStyleSheetText.replace( 121 existingRulesAuthoredText[4], 122 `#test-nested-parent {${newBodyText}}`, 123 ), 124 "Got the expected result for #test-nested-parent" 125 ); 126 127 info("Check that it can handle a nested rule"); 128 newBodyText = `color: white;height: 100%;`; 129 is( 130 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[4].cssRules[0], newBodyText), 131 authoredStyleSheetText.replace( 132 existingRulesAuthoredText[5], 133 `#test-nested-child {${newBodyText}}`, 134 ), 135 "Got the expected result for #test-nested-child" 136 ); 137 138 // Covering fix for Bug 1890775 139 info("Check that it can handle rules whose declaration is directly after the } of the previous rule, without spaces"); 140 isnot( 141 InspectorUtils.getRelativeRuleLine(stylesheet.cssRules[5]), 142 1, 143 "The rule should not be on the first line of the stylesheet to check the issue it covers" 144 ); 145 newBodyText = `--modified:true`; 146 is( 147 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[5], newBodyText), 148 authoredStyleSheetText.replace( 149 existingRulesAuthoredText[6], 150 `#test-after-closing-bracket{${newBodyText}}`, 151 ), 152 "Got the expected result for #test-after-closing-bracket" 153 ); 154 155 info("Checking fix for files with crlf EOL sequence"); 156 let styleEl = document.createElement("style"); 157 let ruleText = `#test-after-closing-bracket-crlf{--modified-crlf:false}` 158 authoredStyleSheetText = `\r\nhtml{}${ruleText}`; 159 styleEl.append(document.createTextNode(authoredStyleSheetText)); 160 document.head.append(styleEl); 161 stylesheet = document.styleSheets[2]; 162 isnot( 163 InspectorUtils.getRelativeRuleLine(stylesheet.cssRules[1]), 164 1, 165 "The rule should not be on the first line of the stylesheet to check the issue it covers" 166 ); 167 newBodyText = `--modified-crlf:true`; 168 is( 169 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[1], newBodyText), 170 authoredStyleSheetText.replace( 171 ruleText, 172 `#test-after-closing-bracket-crlf{${newBodyText}}`, 173 ), 174 "Got the expected result for #test-after-closing-bracket-crlf" 175 ); 176 177 info("Checking fix for files with cr EOL sequence"); 178 ruleText = `#test-after-closing-bracket-cr{--modified-cr:false}` 179 authoredStyleSheetText = `\rhtml{}${ruleText}`; 180 styleEl.innerText = ""; 181 styleEl.append(document.createTextNode(authoredStyleSheetText)); 182 isnot( 183 InspectorUtils.getRelativeRuleLine(stylesheet.cssRules[1]), 184 1, 185 "The rule should not be on the first line of the stylesheet to check the issue it covers" 186 ); 187 newBodyText = `--modified-cr:true`; 188 is( 189 replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[1], newBodyText), 190 authoredStyleSheetText.replace( 191 ruleText, 192 `#test-after-closing-bracket-cr{${newBodyText}}`, 193 ), 194 "Got the expected result for #test-after-closing-bracket-cr" 195 ); 196 197 SimpleTest.finish(); 198 </script> 199 </head> 200 <body> 201 <h1>Test InspectorUtils::replaceBlockRuleBodyTextInStylesheet</h1> 202 <p id="display"></p> 203 <div id="content" style="display: none"> 204 205 </div> 206 <pre id="test"> 207 </pre> 208 </body> 209 </html>