test_prettifyCSS.js (4639B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 // Test prettifyCSS. 5 6 "use strict"; 7 8 const { 9 prettifyCSS, 10 } = require("resource://devtools/shared/inspector/css-logic.js"); 11 12 const EXPAND_TAB = "devtools.editor.expandtab"; 13 const TAB_SIZE = "devtools.editor.tabsize"; 14 15 const TESTS_TAB_INDENT = [ 16 { 17 name: "simple test. indent using tabs", 18 input: "div { font-family:'Arial Black', Arial, sans-serif; }", 19 expected: ["div {", "\tfont-family:'Arial Black', Arial, sans-serif;", "}"], 20 }, 21 22 { 23 name: "whitespace before open brace. indent using tabs", 24 input: "div{}", 25 expected: ["div {", "}"], 26 }, 27 28 { 29 name: "minified with trailing newline. indent using tabs", 30 input: 31 "\nbody{background:white;}div{font-size:4em;color:red}span{color:green;}\n", 32 expected: [ 33 "body {", 34 "\tbackground:white;", 35 "}", 36 "div {", 37 "\tfont-size:4em;", 38 "\tcolor:red", 39 "}", 40 "span {", 41 "\tcolor:green;", 42 "}", 43 ], 44 }, 45 46 { 47 name: "leading whitespace. indent using tabs", 48 input: "\n div{color: red;}", 49 expected: ["div {", "\tcolor: red;", "}"], 50 }, 51 52 { 53 name: "CSS with extra closing brace. indent using tabs", 54 input: "body{margin:0}} div{color:red}", 55 expected: ["body {", "\tmargin:0", "}", "}", "div {", "\tcolor:red", "}"], 56 }, 57 ]; 58 59 const TESTS_SPACE_INDENT = [ 60 { 61 name: "simple test. indent using spaces", 62 input: "div { font-family:'Arial Black', Arial, sans-serif; }", 63 expected: [ 64 "div {", 65 " font-family:'Arial Black', Arial, sans-serif;", 66 "}", 67 ], 68 }, 69 70 { 71 name: "whitespace before open brace. indent using spaces", 72 input: "div{}", 73 expected: ["div {", "}"], 74 }, 75 76 { 77 name: "minified with trailing newline. indent using spaces", 78 input: 79 "\nbody{background:white;}div{font-size:4em;color:red}span{color:green;}\n", 80 expected: [ 81 "body {", 82 " background:white;", 83 "}", 84 "div {", 85 " font-size:4em;", 86 " color:red", 87 "}", 88 "span {", 89 " color:green;", 90 "}", 91 ], 92 }, 93 94 { 95 name: "leading whitespace. indent using spaces", 96 input: "\n div{color: red;}", 97 expected: ["div {", " color: red;", "}"], 98 }, 99 100 { 101 name: "CSS with extra closing brace. indent using spaces", 102 input: "body{margin:0}} div{color:red}", 103 expected: [ 104 "body {", 105 " margin:0", 106 "}", 107 "}", 108 "div {", 109 " color:red", 110 "}", 111 ], 112 }, 113 114 { 115 name: "HTML comments with some whitespace padding", 116 input: " \n\n\t <!--\n\n\t body {color:red} \n\n--> \t\n", 117 expected: ["body {", " color:red", "}"], 118 }, 119 120 { 121 name: "HTML comments without whitespace padding", 122 input: "<!--body {color:red}-->", 123 expected: ["body {", " color:red", "}"], 124 }, 125 126 { 127 name: "Breaking after commas in selectors", 128 input: 129 "@media screen, print {div, span, input {color: red;}}" + 130 "div, div, input, pre, table {color: blue;}", 131 expected: [ 132 "@media screen, print {", 133 " div,", 134 " span,", 135 " input {", 136 " color: red;", 137 " }", 138 "}", 139 "div,", 140 "div,", 141 "input,", 142 "pre,", 143 "table {", 144 " color: blue;", 145 "}", 146 ], 147 }, 148 149 { 150 name: "Multiline comment in CSS", 151 input: "/*\n * comment\n */\n#example{display:grid;}", 152 expected: [ 153 "/*", 154 " * comment", 155 " */", 156 "#example {", 157 " display:grid;", 158 "}", 159 ], 160 }, 161 ]; 162 163 function run_test() { 164 // Note that prettifyCSS.LINE_SEPARATOR is computed lazily, so we 165 // ensure it is set. 166 prettifyCSS(""); 167 168 Services.prefs.setBoolPref(EXPAND_TAB, true); 169 Services.prefs.setIntPref(TAB_SIZE, 4); 170 171 for (const test of TESTS_SPACE_INDENT) { 172 info(test.name); 173 174 const input = test.input.split("\n").join(prettifyCSS.LINE_SEPARATOR); 175 const { result: output } = prettifyCSS(input); 176 const expected = 177 test.expected.join(prettifyCSS.LINE_SEPARATOR) + 178 prettifyCSS.LINE_SEPARATOR; 179 equal(output, expected, test.name); 180 } 181 182 Services.prefs.setBoolPref(EXPAND_TAB, false); 183 for (const test of TESTS_TAB_INDENT) { 184 info(test.name); 185 186 const input = test.input.split("\n").join(prettifyCSS.LINE_SEPARATOR); 187 const { result: output } = prettifyCSS(input); 188 const expected = 189 test.expected.join(prettifyCSS.LINE_SEPARATOR) + 190 prettifyCSS.LINE_SEPARATOR; 191 equal(output, expected, test.name); 192 } 193 Services.prefs.clearUserPref(EXPAND_TAB); 194 Services.prefs.clearUserPref(TAB_SIZE); 195 }