michael@0: /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:  http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: "use strict";
michael@0: 
michael@0: // Test expected outputs of the output-parser's parseCssProperty function.
michael@0: 
michael@0: // This is more of a unit test than a mochitest-browser test, but can't be
michael@0: // tested with an xpcshell test as the output-parser requires the DOM to work.
michael@0: 
michael@0: let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
michael@0: let {OutputParser} = devtools.require("devtools/output-parser");
michael@0: 
michael@0: const COLOR_CLASS = "color-class";
michael@0: const URL_CLASS = "url-class";
michael@0: 
michael@0: function test() {
michael@0:   function countAll(fragment) {
michael@0:     return fragment.querySelectorAll("*").length;
michael@0:   }
michael@0:   function countColors(fragment) {
michael@0:     return fragment.querySelectorAll("." + COLOR_CLASS).length;
michael@0:   }
michael@0:   function countUrls(fragment) {
michael@0:     return fragment.querySelectorAll("." + URL_CLASS).length;
michael@0:   }
michael@0:   function getColor(fragment, index) {
michael@0:     return fragment.querySelectorAll("." + COLOR_CLASS)[index||0].textContent;
michael@0:   }
michael@0:   function getUrl(fragment, index) {
michael@0:     return fragment.querySelectorAll("." + URL_CLASS)[index||0].textContent;
michael@0:   }
michael@0: 
michael@0:   let testData = [
michael@0:     {
michael@0:       name: "width",
michael@0:       value: "100%",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 0);
michael@0:         is(fragment.textContent, "100%");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "width",
michael@0:       value: "blue",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 0);
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "content",
michael@0:       value: "'red url(test.png) repeat top left'",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 0);
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "content",
michael@0:       value: "\"blue\"",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 0);
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "margin-left",
michael@0:       value: "url(something.jpg)",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 0);
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background-color",
michael@0:       value: "transparent",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 1);
michael@0:         is(countColors(fragment), 1);
michael@0:         is(fragment.textContent, "transparent");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "color",
michael@0:       value: "red",
michael@0:       test: fragment => {
michael@0:         is(countColors(fragment), 1);
michael@0:         is(fragment.textContent, "red");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "color",
michael@0:       value: "#F06",
michael@0:       test: fragment => {
michael@0:         is(countColors(fragment), 1);
michael@0:         is(fragment.textContent, "#F06");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "border-top-left-color",
michael@0:       value: "rgba(14, 255, 20, .5)",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 1);
michael@0:         is(countColors(fragment), 1);
michael@0:         is(fragment.textContent, "rgba(14, 255, 20, .5)");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "border",
michael@0:       value: "80em dotted pink",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 1);
michael@0:         is(countColors(fragment), 1);
michael@0:         is(getColor(fragment), "pink");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "color",
michael@0:       value: "red !important",
michael@0:       test: fragment => {
michael@0:         is(countColors(fragment), 1);
michael@0:         is(fragment.textContent, "red !important");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background",
michael@0:       value: "red url(test.png) repeat top left",
michael@0:       test: fragment => {
michael@0:         is(countColors(fragment), 1);
michael@0:         is(countUrls(fragment), 1);
michael@0:         is(getColor(fragment), "red");
michael@0:         is(getUrl(fragment), "test.png");
michael@0:         is(countAll(fragment), 2);
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background",
michael@0:       value: "blue url(test.png) repeat top left !important",
michael@0:       test: fragment => {
michael@0:         is(countColors(fragment), 1);
michael@0:         is(countUrls(fragment), 1);
michael@0:         is(getColor(fragment), "blue");
michael@0:         is(getUrl(fragment), "test.png");
michael@0:         is(countAll(fragment), 2);
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "list-style-image",
michael@0:       value: "url(\"images/arrow.gif\")",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 1);
michael@0:         is(getUrl(fragment), "images/arrow.gif");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "list-style-image",
michael@0:       value: "url(\"images/arrow.gif\")!important",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 1);
michael@0:         is(getUrl(fragment), "images/arrow.gif");
michael@0:         is(fragment.textContent, "url('images/arrow.gif')!important");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "-moz-binding",
michael@0:       value: "url(http://somesite.com/path/to/binding.xml#someid)",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 1);
michael@0:         is(countUrls(fragment), 1);
michael@0:         is(getUrl(fragment), "http://somesite.com/path/to/binding.xml#someid");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background",
michael@0:       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%)",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 5);
michael@0:         let allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
michael@0:         is(allSwatches.length, 5);
michael@0:         is(allSwatches[0].textContent, "rgba(183,222,237,1)");
michael@0:         is(allSwatches[1].textContent, "rgba(33,180,226,1)");
michael@0:         is(allSwatches[2].textContent, "rgba(31,170,217,.5)");
michael@0:         is(allSwatches[3].textContent, "#F06");
michael@0:         is(allSwatches[4].textContent, "red");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background",
michael@0:       value: "-moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 2);
michael@0:         let allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
michael@0:         is(allSwatches.length, 2);
michael@0:         is(allSwatches[0].textContent, "orange");
michael@0:         is(allSwatches[1].textContent, "red");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background",
michael@0:       value: "white  url(http://test.com/wow_such_image.png) no-repeat top left",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 2);
michael@0:         is(countUrls(fragment), 1);
michael@0:         is(countColors(fragment), 1);
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background",
michael@0:       value: "url(\"http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t\")",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 1);
michael@0:         is(getUrl(fragment), "http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background-image",
michael@0:       value: "url(this-is-an-incredible-image.jpeg)",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 1);
michael@0:         is(getUrl(fragment), "this-is-an-incredible-image.jpeg");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background",
michael@0:       value: "red url(    \"http://wow.com/cool/../../../you're(doingit)wrong\"   ) repeat center",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 2);
michael@0:         is(countColors(fragment), 1);
michael@0:         is(getUrl(fragment), "http://wow.com/cool/../../../you're(doingit)wrong");
michael@0:       }
michael@0:     },
michael@0:     {
michael@0:       name: "background-image",
michael@0:       value: "url(../../../look/at/this/folder/structure/../../red.blue.green.svg   )",
michael@0:       test: fragment => {
michael@0:         is(countAll(fragment), 1);
michael@0:         is(getUrl(fragment), "../../../look/at/this/folder/structure/../../red.blue.green.svg");
michael@0:       }
michael@0:     }
michael@0:   ];
michael@0: 
michael@0:   let parser = new OutputParser();
michael@0:   for (let i = 0; i < testData.length; i ++) {
michael@0:     let data = testData[i];
michael@0:     info("Output-parser test data " + i + ". {" + data.name + " : " + data.value + ";}");
michael@0:     data.test(parser.parseCssProperty(data.name, data.value, {
michael@0:       colorClass: COLOR_CLASS,
michael@0:       urlClass: URL_CLASS,
michael@0:       defaultColorType: false
michael@0:     }));
michael@0:   }
michael@0: 
michael@0:   finish();
michael@0: }