The Tor Browser: browser/devtools/sourceeditor/test/browser_css_getInfo.js@6474c204b198 (annotated)

browser/devtools/sourceeditor/test/browser_css_getInfo.js@6474c204b198 (annotated)

browser/devtools/sourceeditor/test/browser_css_getInfo.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.

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