michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:    http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: let {Services} = Cu.import("resource://gre/modules/Services.jsm", {});
michael@0: let {Loader} = Cu.import("resource://gre/modules/commonjs/toolkit/loader.js", {});
michael@0: let {OutputParser} = devtools.require("devtools/output-parser");
michael@0: 
michael@0: let parser;
michael@0: let doc;
michael@0: 
michael@0: function test() {
michael@0:   waitForExplicitFinish();
michael@0: 
michael@0:   gBrowser.selectedTab = gBrowser.addTab();
michael@0:   gBrowser.selectedBrowser.addEventListener("load", function onload() {
michael@0:     gBrowser.selectedBrowser.removeEventListener("load", onload, true);
michael@0:     waitForFocus(init, content);
michael@0:     doc = content.document;
michael@0:   }, true);
michael@0: 
michael@0:   content.location = "data:text/html,<h1>browser_outputParser.js</h1>" +
michael@0:                      "<div></div>";
michael@0: }
michael@0: 
michael@0: function init() {
michael@0:   parser = new OutputParser();
michael@0:   testParseCssProperty();
michael@0: }
michael@0: 
michael@0: function testParseCssProperty() {
michael@0:   let frag = parser.parseCssProperty("border", "1px solid red", {
michael@0:     colorSwatchClass: "test-colorswatch"
michael@0:   });
michael@0: 
michael@0:   let target = doc.querySelector("div");
michael@0:   ok(target, "captain, we have the div");
michael@0:   target.appendChild(frag);
michael@0: 
michael@0:   is(target.innerHTML,
michael@0:      '1px solid <span style="background-color:red" class="test-colorswatch"></span><span>#F00</span>',
michael@0:      "CSS property correctly parsed");
michael@0: 
michael@0:   target.innerHTML = "";
michael@0: 
michael@0:   let frag = parser.parseCssProperty("background-image", "linear-gradient(to right, #F60 10%, rgba(0,0,0,1))", {
michael@0:     colorSwatchClass: "test-colorswatch",
michael@0:     colorClass: "test-color"
michael@0:   });
michael@0:   target.appendChild(frag);
michael@0:   is(target.innerHTML,
michael@0:      'linear-gradient(to right, <span style="background-color:#F60" class="test-colorswatch"></span><span class="test-color">#F60</span> 10%, ' +
michael@0:      '<span style="background-color:rgba(0,0,0,1)" class="test-colorswatch"></span><span class="test-color">#000</span>)',
michael@0:      "Gradient CSS property correctly parsed");
michael@0: 
michael@0:   target.innerHTML = "";
michael@0: 
michael@0:   testParseHTMLAttribute();
michael@0: }
michael@0: 
michael@0: function testParseHTMLAttribute() {
michael@0:   let attrib = "color:red; font-size: 12px; background-image: " +
michael@0:                "url(chrome://branding/content/about-logo.png)";
michael@0:   let frag = parser.parseHTMLAttribute(attrib, {
michael@0:     urlClass: "theme-link",
michael@0:     colorClass: "theme-color"
michael@0:   });
michael@0: 
michael@0:   let target = doc.querySelector("div");
michael@0:   ok(target, "captain, we have the div");
michael@0:   target.appendChild(frag);
michael@0: 
michael@0:   let expected = 'color:<span class="theme-color">#F00</span>; font-size: 12px; ' +
michael@0:                  'background-image: url(\'<a href="chrome://branding/content/about-logo.png" ' +
michael@0:                  'class="theme-link" ' +
michael@0:                  'target="_blank">chrome://branding/content/about-logo.png</a>\')';
michael@0: 
michael@0:   is(target.innerHTML, expected, "HTML Attribute correctly parsed");
michael@0:   target.innerHTML = "";
michael@0:   testParseNonCssHTMLAttribute();
michael@0: }
michael@0: 
michael@0: function testParseNonCssHTMLAttribute() {
michael@0:   let attrib = "someclass background someotherclass red";
michael@0:   let frag = parser.parseHTMLAttribute(attrib);
michael@0: 
michael@0:   let target = doc.querySelector("div");
michael@0:   ok(target, "captain, we have the div");
michael@0:   target.appendChild(frag);
michael@0: 
michael@0:   let expected = 'someclass background someotherclass red';
michael@0: 
michael@0:   is(target.innerHTML, expected, "Non-CSS HTML Attribute correctly parsed");
michael@0:   target.innerHTML = "";
michael@0:   finishUp();
michael@0: }
michael@0: 
michael@0: 
michael@0: function finishUp() {
michael@0:   Services = Loader = OutputParser = parser = doc = null;
michael@0:   gBrowser.removeCurrentTab();
michael@0:   finish();
michael@0: }