1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/styleinspector/test/browser_styleinspector_output-parser.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,252 @@
1.4 +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +// Test expected outputs of the output-parser's parseCssProperty function.
1.11 +
1.12 +// This is more of a unit test than a mochitest-browser test, but can't be
1.13 +// tested with an xpcshell test as the output-parser requires the DOM to work.
1.14 +
1.15 +let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
1.16 +let {OutputParser} = devtools.require("devtools/output-parser");
1.17 +
1.18 +const COLOR_CLASS = "color-class";
1.19 +const URL_CLASS = "url-class";
1.20 +
1.21 +function test() {
1.22 + function countAll(fragment) {
1.23 + return fragment.querySelectorAll("*").length;
1.24 + }
1.25 + function countColors(fragment) {
1.26 + return fragment.querySelectorAll("." + COLOR_CLASS).length;
1.27 + }
1.28 + function countUrls(fragment) {
1.29 + return fragment.querySelectorAll("." + URL_CLASS).length;
1.30 + }
1.31 + function getColor(fragment, index) {
1.32 + return fragment.querySelectorAll("." + COLOR_CLASS)[index||0].textContent;
1.33 + }
1.34 + function getUrl(fragment, index) {
1.35 + return fragment.querySelectorAll("." + URL_CLASS)[index||0].textContent;
1.36 + }
1.37 +
1.38 + let testData = [
1.39 + {
1.40 + name: "width",
1.41 + value: "100%",
1.42 + test: fragment => {
1.43 + is(countAll(fragment), 0);
1.44 + is(fragment.textContent, "100%");
1.45 + }
1.46 + },
1.47 + {
1.48 + name: "width",
1.49 + value: "blue",
1.50 + test: fragment => {
1.51 + is(countAll(fragment), 0);
1.52 + }
1.53 + },
1.54 + {
1.55 + name: "content",
1.56 + value: "'red url(test.png) repeat top left'",
1.57 + test: fragment => {
1.58 + is(countAll(fragment), 0);
1.59 + }
1.60 + },
1.61 + {
1.62 + name: "content",
1.63 + value: "\"blue\"",
1.64 + test: fragment => {
1.65 + is(countAll(fragment), 0);
1.66 + }
1.67 + },
1.68 + {
1.69 + name: "margin-left",
1.70 + value: "url(something.jpg)",
1.71 + test: fragment => {
1.72 + is(countAll(fragment), 0);
1.73 + }
1.74 + },
1.75 + {
1.76 + name: "background-color",
1.77 + value: "transparent",
1.78 + test: fragment => {
1.79 + is(countAll(fragment), 1);
1.80 + is(countColors(fragment), 1);
1.81 + is(fragment.textContent, "transparent");
1.82 + }
1.83 + },
1.84 + {
1.85 + name: "color",
1.86 + value: "red",
1.87 + test: fragment => {
1.88 + is(countColors(fragment), 1);
1.89 + is(fragment.textContent, "red");
1.90 + }
1.91 + },
1.92 + {
1.93 + name: "color",
1.94 + value: "#F06",
1.95 + test: fragment => {
1.96 + is(countColors(fragment), 1);
1.97 + is(fragment.textContent, "#F06");
1.98 + }
1.99 + },
1.100 + {
1.101 + name: "border-top-left-color",
1.102 + value: "rgba(14, 255, 20, .5)",
1.103 + test: fragment => {
1.104 + is(countAll(fragment), 1);
1.105 + is(countColors(fragment), 1);
1.106 + is(fragment.textContent, "rgba(14, 255, 20, .5)");
1.107 + }
1.108 + },
1.109 + {
1.110 + name: "border",
1.111 + value: "80em dotted pink",
1.112 + test: fragment => {
1.113 + is(countAll(fragment), 1);
1.114 + is(countColors(fragment), 1);
1.115 + is(getColor(fragment), "pink");
1.116 + }
1.117 + },
1.118 + {
1.119 + name: "color",
1.120 + value: "red !important",
1.121 + test: fragment => {
1.122 + is(countColors(fragment), 1);
1.123 + is(fragment.textContent, "red !important");
1.124 + }
1.125 + },
1.126 + {
1.127 + name: "background",
1.128 + value: "red url(test.png) repeat top left",
1.129 + test: fragment => {
1.130 + is(countColors(fragment), 1);
1.131 + is(countUrls(fragment), 1);
1.132 + is(getColor(fragment), "red");
1.133 + is(getUrl(fragment), "test.png");
1.134 + is(countAll(fragment), 2);
1.135 + }
1.136 + },
1.137 + {
1.138 + name: "background",
1.139 + value: "blue url(test.png) repeat top left !important",
1.140 + test: fragment => {
1.141 + is(countColors(fragment), 1);
1.142 + is(countUrls(fragment), 1);
1.143 + is(getColor(fragment), "blue");
1.144 + is(getUrl(fragment), "test.png");
1.145 + is(countAll(fragment), 2);
1.146 + }
1.147 + },
1.148 + {
1.149 + name: "list-style-image",
1.150 + value: "url(\"images/arrow.gif\")",
1.151 + test: fragment => {
1.152 + is(countAll(fragment), 1);
1.153 + is(getUrl(fragment), "images/arrow.gif");
1.154 + }
1.155 + },
1.156 + {
1.157 + name: "list-style-image",
1.158 + value: "url(\"images/arrow.gif\")!important",
1.159 + test: fragment => {
1.160 + is(countAll(fragment), 1);
1.161 + is(getUrl(fragment), "images/arrow.gif");
1.162 + is(fragment.textContent, "url('images/arrow.gif')!important");
1.163 + }
1.164 + },
1.165 + {
1.166 + name: "-moz-binding",
1.167 + value: "url(http://somesite.com/path/to/binding.xml#someid)",
1.168 + test: fragment => {
1.169 + is(countAll(fragment), 1);
1.170 + is(countUrls(fragment), 1);
1.171 + is(getUrl(fragment), "http://somesite.com/path/to/binding.xml#someid");
1.172 + }
1.173 + },
1.174 + {
1.175 + name: "background",
1.176 + 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%)",
1.177 + test: fragment => {
1.178 + is(countAll(fragment), 5);
1.179 + let allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
1.180 + is(allSwatches.length, 5);
1.181 + is(allSwatches[0].textContent, "rgba(183,222,237,1)");
1.182 + is(allSwatches[1].textContent, "rgba(33,180,226,1)");
1.183 + is(allSwatches[2].textContent, "rgba(31,170,217,.5)");
1.184 + is(allSwatches[3].textContent, "#F06");
1.185 + is(allSwatches[4].textContent, "red");
1.186 + }
1.187 + },
1.188 + {
1.189 + name: "background",
1.190 + value: "-moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)",
1.191 + test: fragment => {
1.192 + is(countAll(fragment), 2);
1.193 + let allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
1.194 + is(allSwatches.length, 2);
1.195 + is(allSwatches[0].textContent, "orange");
1.196 + is(allSwatches[1].textContent, "red");
1.197 + }
1.198 + },
1.199 + {
1.200 + name: "background",
1.201 + value: "white url(http://test.com/wow_such_image.png) no-repeat top left",
1.202 + test: fragment => {
1.203 + is(countAll(fragment), 2);
1.204 + is(countUrls(fragment), 1);
1.205 + is(countColors(fragment), 1);
1.206 + }
1.207 + },
1.208 + {
1.209 + name: "background",
1.210 + value: "url(\"http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t\")",
1.211 + test: fragment => {
1.212 + is(countAll(fragment), 1);
1.213 + is(getUrl(fragment), "http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t");
1.214 + }
1.215 + },
1.216 + {
1.217 + name: "background-image",
1.218 + value: "url(this-is-an-incredible-image.jpeg)",
1.219 + test: fragment => {
1.220 + is(countAll(fragment), 1);
1.221 + is(getUrl(fragment), "this-is-an-incredible-image.jpeg");
1.222 + }
1.223 + },
1.224 + {
1.225 + name: "background",
1.226 + value: "red url( \"http://wow.com/cool/../../../you're(doingit)wrong\" ) repeat center",
1.227 + test: fragment => {
1.228 + is(countAll(fragment), 2);
1.229 + is(countColors(fragment), 1);
1.230 + is(getUrl(fragment), "http://wow.com/cool/../../../you're(doingit)wrong");
1.231 + }
1.232 + },
1.233 + {
1.234 + name: "background-image",
1.235 + value: "url(../../../look/at/this/folder/structure/../../red.blue.green.svg )",
1.236 + test: fragment => {
1.237 + is(countAll(fragment), 1);
1.238 + is(getUrl(fragment), "../../../look/at/this/folder/structure/../../red.blue.green.svg");
1.239 + }
1.240 + }
1.241 + ];
1.242 +
1.243 + let parser = new OutputParser();
1.244 + for (let i = 0; i < testData.length; i ++) {
1.245 + let data = testData[i];
1.246 + info("Output-parser test data " + i + ". {" + data.name + " : " + data.value + ";}");
1.247 + data.test(parser.parseCssProperty(data.name, data.value, {
1.248 + colorClass: COLOR_CLASS,
1.249 + urlClass: URL_CLASS,
1.250 + defaultColorType: false
1.251 + }));
1.252 + }
1.253 +
1.254 + finish();
1.255 +}
