browser/devtools/styleinspector/test/browser_styleinspector_output-parser.js@6474c204b198
browser/devtools/styleinspector/test/browser_styleinspector_output-parser.js
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
2 /* Any copyright is dedicated to the Public Domain.
3 http://creativecommons.org/publicdomain/zero/1.0/ */
5 "use strict";
7 // Test expected outputs of the output-parser's parseCssProperty function.
9 // This is more of a unit test than a mochitest-browser test, but can't be
10 // tested with an xpcshell test as the output-parser requires the DOM to work.
12 let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
13 let {OutputParser} = devtools.require("devtools/output-parser");
15 const COLOR_CLASS = "color-class";
16 const URL_CLASS = "url-class";
18 function test() {
19 function countAll(fragment) {
20 return fragment.querySelectorAll("*").length;
21 }
22 function countColors(fragment) {
23 return fragment.querySelectorAll("." + COLOR_CLASS).length;
24 }
25 function countUrls(fragment) {
26 return fragment.querySelectorAll("." + URL_CLASS).length;
27 }
28 function getColor(fragment, index) {
29 return fragment.querySelectorAll("." + COLOR_CLASS)[index||0].textContent;
30 }
31 function getUrl(fragment, index) {
32 return fragment.querySelectorAll("." + URL_CLASS)[index||0].textContent;
33 }
35 let testData = [
36 {
37 name: "width",
38 value: "100%",
39 test: fragment => {
40 is(countAll(fragment), 0);
41 is(fragment.textContent, "100%");
42 }
43 },
44 {
45 name: "width",
46 value: "blue",
47 test: fragment => {
48 is(countAll(fragment), 0);
49 }
50 },
51 {
52 name: "content",
53 value: "'red url(test.png) repeat top left'",
54 test: fragment => {
55 is(countAll(fragment), 0);
56 }
57 },
58 {
59 name: "content",
60 value: "\"blue\"",
61 test: fragment => {
62 is(countAll(fragment), 0);
63 }
64 },
65 {
66 name: "margin-left",
67 value: "url(something.jpg)",
68 test: fragment => {
69 is(countAll(fragment), 0);
70 }
71 },
72 {
73 name: "background-color",
74 value: "transparent",
75 test: fragment => {
76 is(countAll(fragment), 1);
77 is(countColors(fragment), 1);
78 is(fragment.textContent, "transparent");
79 }
80 },
81 {
82 name: "color",
83 value: "red",
84 test: fragment => {
85 is(countColors(fragment), 1);
86 is(fragment.textContent, "red");
87 }
88 },
89 {
90 name: "color",
91 value: "#F06",
92 test: fragment => {
93 is(countColors(fragment), 1);
94 is(fragment.textContent, "#F06");
95 }
96 },
97 {
98 name: "border-top-left-color",
99 value: "rgba(14, 255, 20, .5)",
100 test: fragment => {
101 is(countAll(fragment), 1);
102 is(countColors(fragment), 1);
103 is(fragment.textContent, "rgba(14, 255, 20, .5)");
104 }
105 },
106 {
107 name: "border",
108 value: "80em dotted pink",
109 test: fragment => {
110 is(countAll(fragment), 1);
111 is(countColors(fragment), 1);
112 is(getColor(fragment), "pink");
113 }
114 },
115 {
116 name: "color",
117 value: "red !important",
118 test: fragment => {
119 is(countColors(fragment), 1);
120 is(fragment.textContent, "red !important");
121 }
122 },
123 {
124 name: "background",
125 value: "red url(test.png) repeat top left",
126 test: fragment => {
127 is(countColors(fragment), 1);
128 is(countUrls(fragment), 1);
129 is(getColor(fragment), "red");
130 is(getUrl(fragment), "test.png");
131 is(countAll(fragment), 2);
132 }
133 },
134 {
135 name: "background",
136 value: "blue url(test.png) repeat top left !important",
137 test: fragment => {
138 is(countColors(fragment), 1);
139 is(countUrls(fragment), 1);
140 is(getColor(fragment), "blue");
141 is(getUrl(fragment), "test.png");
142 is(countAll(fragment), 2);
143 }
144 },
145 {
146 name: "list-style-image",
147 value: "url(\"images/arrow.gif\")",
148 test: fragment => {
149 is(countAll(fragment), 1);
150 is(getUrl(fragment), "images/arrow.gif");
151 }
152 },
153 {
154 name: "list-style-image",
155 value: "url(\"images/arrow.gif\")!important",
156 test: fragment => {
157 is(countAll(fragment), 1);
158 is(getUrl(fragment), "images/arrow.gif");
159 is(fragment.textContent, "url('images/arrow.gif')!important");
160 }
161 },
162 {
163 name: "-moz-binding",
164 value: "url(http://somesite.com/path/to/binding.xml#someid)",
165 test: fragment => {
166 is(countAll(fragment), 1);
167 is(countUrls(fragment), 1);
168 is(getUrl(fragment), "http://somesite.com/path/to/binding.xml#someid");
169 }
170 },
171 {
172 name: "background",
173 value: "linear-gradient(to right, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 30%, rgba(31,170,217,.5) 44%, #F06 75%, red 100%)",
174 test: fragment => {
175 is(countAll(fragment), 5);
176 let allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
177 is(allSwatches.length, 5);
178 is(allSwatches[0].textContent, "rgba(183,222,237,1)");
179 is(allSwatches[1].textContent, "rgba(33,180,226,1)");
180 is(allSwatches[2].textContent, "rgba(31,170,217,.5)");
181 is(allSwatches[3].textContent, "#F06");
182 is(allSwatches[4].textContent, "red");
183 }
184 },
185 {
186 name: "background",
187 value: "-moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)",
188 test: fragment => {
189 is(countAll(fragment), 2);
190 let allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
191 is(allSwatches.length, 2);
192 is(allSwatches[0].textContent, "orange");
193 is(allSwatches[1].textContent, "red");
194 }
195 },
196 {
197 name: "background",
198 value: "white url(http://test.com/wow_such_image.png) no-repeat top left",
199 test: fragment => {
200 is(countAll(fragment), 2);
201 is(countUrls(fragment), 1);
202 is(countColors(fragment), 1);
203 }
204 },
205 {
206 name: "background",
207 value: "url(\"http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t\")",
208 test: fragment => {
209 is(countAll(fragment), 1);
210 is(getUrl(fragment), "http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t");
211 }
212 },
213 {
214 name: "background-image",
215 value: "url(this-is-an-incredible-image.jpeg)",
216 test: fragment => {
217 is(countAll(fragment), 1);
218 is(getUrl(fragment), "this-is-an-incredible-image.jpeg");
219 }
220 },
221 {
222 name: "background",
223 value: "red url( \"http://wow.com/cool/../../../you're(doingit)wrong\" ) repeat center",
224 test: fragment => {
225 is(countAll(fragment), 2);
226 is(countColors(fragment), 1);
227 is(getUrl(fragment), "http://wow.com/cool/../../../you're(doingit)wrong");
228 }
229 },
230 {
231 name: "background-image",
232 value: "url(../../../look/at/this/folder/structure/../../red.blue.green.svg )",
233 test: fragment => {
234 is(countAll(fragment), 1);
235 is(getUrl(fragment), "../../../look/at/this/folder/structure/../../red.blue.green.svg");
236 }
237 }
238 ];
240 let parser = new OutputParser();
241 for (let i = 0; i < testData.length; i ++) {
242 let data = testData[i];
243 info("Output-parser test data " + i + ". {" + data.name + " : " + data.value + ";}");
244 data.test(parser.parseCssProperty(data.name, data.value, {
245 colorClass: COLOR_CLASS,
246 urlClass: URL_CLASS,
247 defaultColorType: false
248 }));
249 }
251 finish();
252 }
