michael@0: /* vim: set 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: const cssAutoCompleter  = require("devtools/sourceeditor/css-autocompleter");
michael@0: 
michael@0: const source = [
michael@0: ".devtools-toolbar {",
michael@0: "  -moz-appearance: none;",
michael@0: "           padding:4px 3px;border-bottom-width: 1px;",
michael@0: "  border-bottom-style: solid;",
michael@0: "}",
michael@0: "",
michael@0: "#devtools-menu.devtools-menulist,",
michael@0: ".devtools-toolbarbutton#devtools-menu {",
michael@0: "  -moz-appearance: none;",
michael@0: "  -moz-box-align: center;",
michael@0: "  min-width: 78px;",
michael@0: "  min-height: 22px;",
michael@0: "  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);",
michael@0: "  border: 1px solid hsla(210,8%,5%,.45);",
michael@0: "  border-radius: 3px;",
michael@0: "  background: linear-gradient(hsla(212,7%,57%,.35),",
michael@0: "              hsla(212,7%,57%,.1)) padding-box;",
michael@0: "  margin: 0 3px;",
michael@0: "  color: inherit;",
michael@0: "}",
michael@0: "",
michael@0: ".devtools-toolbarbutton > hbox.toolbarbutton-menubutton-button {",
michael@0: "  -moz-box-orient: horizontal;",
michael@0: "}",
michael@0: "",
michael@0: ".devtools-menulist:active,",
michael@0: "#devtools-toolbarbutton:focus {",
michael@0: "  outline: 1px dotted hsla(210,30%,85%,0.7);",
michael@0: "  outline-offset   :  -4px;",
michael@0: "}",
michael@0: "",
michael@0: ".devtools-toolbarbutton:not([label]) {",
michael@0: "  min-width: 32px;",
michael@0: "}",
michael@0: "",
michael@0: ".devtools-toolbarbutton:not([label]) > .toolbarbutton-text, .devtools-toolbar {",
michael@0: "  display: none;",
michael@0: "}",
michael@0: ].join("\n");
michael@0: 
michael@0: // Format of test cases :
michael@0: // [
michael@0: //  {line, ch}, - The caret position at which the getInfo call should be made
michael@0: //  expectedState, - The expected state at the caret
michael@0: //  expectedSelector, - The expected selector for the state
michael@0: //  expectedProperty, - The expected property name for states value and property
michael@0: //  expectedValue, - If state is value, then the expected value
michael@0: // ]
michael@0: const tests = [
michael@0:   [{line: 0, ch: 13}, "selector", ".devtools-toolbar"],
michael@0:   [{line: 8, ch: 13}, "property", ["#devtools-menu.devtools-menulist",
michael@0:                                    ".devtools-toolbarbutton#devtools-menu "], "-moz-appearance"],
michael@0:   [{line: 28, ch: 25}, "value", [".devtools-menulist:active",
michael@0:                                  "#devtools-toolbarbutton:focus "], "outline-offset", "-4px"],
michael@0:   [{line: 4, ch: 1}, "null"],
michael@0:   [{line: 5, ch: 0}, "null"],
michael@0:   [{line: 31, ch: 13}, "selector", ".devtools-toolbarbutton:not([label])"],
michael@0:   [{line: 35, ch: 23}, "selector", ".devtools-toolbarbutton:not([label]) > .toolbarbutton-text"],
michael@0:   [{line: 35, ch: 70}, "selector", ".devtools-toolbar"],
michael@0:   [{line: 27, ch: 14}, "value", [".devtools-menulist:active",
michael@0:                                  "#devtools-toolbarbutton:focus "], "outline", "1px dotted hsla(210,30%,85%,0.7)"],
michael@0:   [{line: 16, ch: 16}, "value", ["#devtools-menu.devtools-menulist",
michael@0:                                  ".devtools-toolbarbutton#devtools-menu "], "background",
michael@0:    "linear-gradient(hsla(212,7%,57%,.35),\n              hsla(212,7%,57%,.1)) padding-box"],
michael@0:   [{line: 16, ch: 3}, "value", ["#devtools-menu.devtools-menulist",
michael@0:                                 ".devtools-toolbarbutton#devtools-menu "], "background",
michael@0:    "linear-gradient(hsla(212,7%,57%,.35),\n              hsla(212,7%,57%,.1)) padding-box"],
michael@0:   [{line: 15, ch: 25}, "value", ["#devtools-menu.devtools-menulist",
michael@0:                                  ".devtools-toolbarbutton#devtools-menu "], "background",
michael@0:    "linear-gradient(hsla(212,7%,57%,.35),\n              hsla(212,7%,57%,.1)) padding-box"],
michael@0: ];
michael@0: 
michael@0: const TEST_URI = "data:text/html;charset=UTF-8," + encodeURIComponent(
michael@0:   ["<!DOCTYPE html>",
michael@0:    "<html>",
michael@0:    " <head>",
michael@0:    "  <title>CSS contextual information tests.</title>",
michael@0:    "  <style type='text/css'>",
michael@0:    "#progress {",
michael@0:    "  width: 500px; height: 30px;",
michael@0:    "  border: 1px solid black;",
michael@0:    "  position: relative",
michael@0:    "}",
michael@0:    "#progress div {",
michael@0:    "  width: 0%; height: 100%;",
michael@0:    "  background: green;",
michael@0:    "  position: absolute;",
michael@0:    "  z-index: -1; top: 0",
michael@0:    "}",
michael@0:    "#progress.failed div {",
michael@0:    "  background: red !important;",
michael@0:    "}",
michael@0:    "#progress.failed:after {",
michael@0:    "  content: 'Some tests failed';",
michael@0:    "  color: white",
michael@0:    "}",
michael@0:    "#progress:before {",
michael@0:    "  content: 'Running test ' attr(data-progress) ' of " + tests.length + "';",
michael@0:    "  color: white;",
michael@0:    "  text-shadow: 0 0 2px darkgreen;",
michael@0:    "}",
michael@0:    "  </style>",
michael@0:    " </head>",
michael@0:    " <body>",
michael@0:    "  <h2>State machine tests for CSS autocompleter.</h2><br>",
michael@0:    "  <div id='progress' data-progress='0'>",
michael@0:    "   <div></div>",
michael@0:    "  </div>",
michael@0:    " </body>",
michael@0:    " </html>"
michael@0:   ].join("\n"));
michael@0: 
michael@0: let doc = null;
michael@0: function test() {
michael@0:   waitForExplicitFinish();
michael@0:   gBrowser.selectedTab = gBrowser.addTab();
michael@0:   gBrowser.selectedBrowser.addEventListener("load", function onload() {
michael@0:     gBrowser.selectedBrowser.removeEventListener("load", onload, true);
michael@0:     doc = content.document;
michael@0:     runTests();
michael@0:   }, true);
michael@0:   content.location = TEST_URI;
michael@0: }
michael@0: 
michael@0: function runTests() {
michael@0:   let completer = new cssAutoCompleter();
michael@0:   let matches = (arr, toCheck) => !arr.some((x, i) => x != toCheck[i]);
michael@0:   let checkState = (expected, actual) => {
michael@0:     if (expected[0] == "null" && actual == null) {
michael@0:       return true;
michael@0:     } else if (expected[0] == actual.state && expected[0] == "selector" &&
michael@0:                expected[1] == actual.selector) {
michael@0:       return true;
michael@0:     } else if (expected[0] == actual.state && expected[0] == "property" &&
michael@0:                matches(expected[1], actual.selectors) &&
michael@0:                expected[2] == actual.propertyName) {
michael@0:       return true;
michael@0:     } else if (expected[0] == actual.state && expected[0] == "value" &&
michael@0:                matches(expected[1], actual.selectors) &&
michael@0:                expected[2] == actual.propertyName &&
michael@0:                expected[3] == actual.value) {
michael@0:       return true;
michael@0:     }
michael@0:     return false;
michael@0:   };
michael@0: 
michael@0:   let progress = doc.getElementById("progress");
michael@0:   let progressDiv = doc.querySelector("#progress > div");
michael@0:   let i = 0;
michael@0:   for (let expected of tests) {
michael@0:     let caret = expected.splice(0, 1)[0];
michael@0:     progress.dataset.progress = ++i;
michael@0:     progressDiv.style.width = 100*i/tests.length + "%";
michael@0:     let actual = completer.getInfoAt(source, caret);
michael@0:     if (checkState(expected, actual)) {
michael@0:       ok(true, "Test " + i + " passed. ");
michael@0:     }
michael@0:     else {
michael@0:       ok(false, "Test " + i + " failed. Expected state : [" + expected + "] " +
michael@0:          "but found [" + actual.state + ", " +
michael@0:          (actual.selector || actual.selectors) + ", " +
michael@0:          actual.propertyName + ", " + actual.value + "].");
michael@0:       progress.classList.add("failed");
michael@0:     }
michael@0:   }
michael@0:   gBrowser.removeCurrentTab();
michael@0:   finish();
michael@0: }