The Tor Browser: browser/devtools/sourceeditor/test/browser_css

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     1 /* vim: set ts=2 et sw=2 tw=80: */

     2 /* Any copyright is dedicated to the Public Domain.

     3    http://creativecommons.org/publicdomain/zero/1.0/ */

     5 "use strict";

     7 const cssAutoCompleter  = require("devtools/sourceeditor/css-autocompleter");

     9 const source = [

    10 ".devtools-toolbar {",

    11 "  -moz-appearance: none;",

    12 "           padding:4px 3px;border-bottom-width: 1px;",

    13 "  border-bottom-style: solid;",

    14 "}",

    15 "",

    16 "#devtools-menu.devtools-menulist,",

    17 ".devtools-toolbarbutton#devtools-menu {",

    18 "  -moz-appearance: none;",

    19 "  -moz-box-align: center;",

    20 "  min-width: 78px;",

    21 "  min-height: 22px;",

    22 "  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);",

    23 "  border: 1px solid hsla(210,8%,5%,.45);",

    24 "  border-radius: 3px;",

    25 "  background: linear-gradient(hsla(212,7%,57%,.35),",

    26 "              hsla(212,7%,57%,.1)) padding-box;",

    27 "  margin: 0 3px;",

    28 "  color: inherit;",

    29 "}",

    30 "",

    31 ".devtools-toolbarbutton > hbox.toolbarbutton-menubutton-button {",

    32 "  -moz-box-orient: horizontal;",

    33 "}",

    34 "",

    35 ".devtools-menulist:active,",

    36 "#devtools-toolbarbutton:focus {",

    37 "  outline: 1px dotted hsla(210,30%,85%,0.7);",

    38 "  outline-offset   :  -4px;",

    39 "}",

    40 "",

    41 ".devtools-toolbarbutton:not([label]) {",

    42 "  min-width: 32px;",

    43 "}",

    44 "",

    45 ".devtools-toolbarbutton:not([label]) > .toolbarbutton-text, .devtools-toolbar {",

    46 "  display: none;",

    47 "}",

    48 ].join("\n");

    50 // Format of test cases :

    51 // [

    52 //  {line, ch}, - The caret position at which the getInfo call should be made

    53 //  expectedState, - The expected state at the caret

    54 //  expectedSelector, - The expected selector for the state

    55 //  expectedProperty, - The expected property name for states value and property

    56 //  expectedValue, - If state is value, then the expected value

    57 // ]

    58 const tests = [

    59   [{line: 0, ch: 13}, "selector", ".devtools-toolbar"],

    60   [{line: 8, ch: 13}, "property", ["#devtools-menu.devtools-menulist",

    61                                    ".devtools-toolbarbutton#devtools-menu "], "-moz-appearance"],

    62   [{line: 28, ch: 25}, "value", [".devtools-menulist:active",

    63                                  "#devtools-toolbarbutton:focus "], "outline-offset", "-4px"],

    64   [{line: 4, ch: 1}, "null"],

    65   [{line: 5, ch: 0}, "null"],

    66   [{line: 31, ch: 13}, "selector", ".devtools-toolbarbutton:not([label])"],

    67   [{line: 35, ch: 23}, "selector", ".devtools-toolbarbutton:not([label]) > .toolbarbutton-text"],

    68   [{line: 35, ch: 70}, "selector", ".devtools-toolbar"],

    69   [{line: 27, ch: 14}, "value", [".devtools-menulist:active",

    70                                  "#devtools-toolbarbutton:focus "], "outline", "1px dotted hsla(210,30%,85%,0.7)"],

    71   [{line: 16, ch: 16}, "value", ["#devtools-menu.devtools-menulist",

    72                                  ".devtools-toolbarbutton#devtools-menu "], "background",

    73    "linear-gradient(hsla(212,7%,57%,.35),\n              hsla(212,7%,57%,.1)) padding-box"],

    74   [{line: 16, ch: 3}, "value", ["#devtools-menu.devtools-menulist",

    75                                 ".devtools-toolbarbutton#devtools-menu "], "background",

    76    "linear-gradient(hsla(212,7%,57%,.35),\n              hsla(212,7%,57%,.1)) padding-box"],

    77   [{line: 15, ch: 25}, "value", ["#devtools-menu.devtools-menulist",

    78                                  ".devtools-toolbarbutton#devtools-menu "], "background",

    79    "linear-gradient(hsla(212,7%,57%,.35),\n              hsla(212,7%,57%,.1)) padding-box"],

    80 ];

    82 const TEST_URI = "data:text/html;charset=UTF-8," + encodeURIComponent(

    83   ["<!DOCTYPE html>",

    84    "<html>",

    85    " <head>",

    86    "  <title>CSS contextual information tests.</title>",

    87    "  <style type='text/css'>",

    88    "#progress {",

    89    "  width: 500px; height: 30px;",

    90    "  border: 1px solid black;",

    91    "  position: relative",

    92    "}",

    93    "#progress div {",

    94    "  width: 0%; height: 100%;",

    95    "  background: green;",

    96    "  position: absolute;",

    97    "  z-index: -1; top: 0",

    98    "}",

    99    "#progress.failed div {",

   100    "  background: red !important;",

   101    "}",

   102    "#progress.failed:after {",

   103    "  content: 'Some tests failed';",

   104    "  color: white",

   105    "}",

   106    "#progress:before {",

   107    "  content: 'Running test ' attr(data-progress) ' of " + tests.length + "';",

   108    "  color: white;",

   109    "  text-shadow: 0 0 2px darkgreen;",

   110    "}",

   111    "  </style>",

   112    " </head>",

   113    " <body>",

   114    "  <h2>State machine tests for CSS autocompleter.</h2><br>",

   115    "  <div id='progress' data-progress='0'>",

   116    "   <div></div>",

   117    "  </div>",

   118    " </body>",

   119    " </html>"

   120   ].join("\n"));

   122 let doc = null;

   123 function test() {

   124   waitForExplicitFinish();

   125   gBrowser.selectedTab = gBrowser.addTab();

   126   gBrowser.selectedBrowser.addEventListener("load", function onload() {

   127     gBrowser.selectedBrowser.removeEventListener("load", onload, true);

   128     doc = content.document;

   129     runTests();

   130   }, true);

   131   content.location = TEST_URI;

   132 }

   134 function runTests() {

   135   let completer = new cssAutoCompleter();

   136   let matches = (arr, toCheck) => !arr.some((x, i) => x != toCheck[i]);

   137   let checkState = (expected, actual) => {

   138     if (expected[0] == "null" && actual == null) {

   139       return true;

   140     } else if (expected[0] == actual.state && expected[0] == "selector" &&

   141                expected[1] == actual.selector) {

   142       return true;

   143     } else if (expected[0] == actual.state && expected[0] == "property" &&

   144                matches(expected[1], actual.selectors) &&

   145                expected[2] == actual.propertyName) {

   146       return true;

   147     } else if (expected[0] == actual.state && expected[0] == "value" &&

   148                matches(expected[1], actual.selectors) &&

   149                expected[2] == actual.propertyName &&

   150                expected[3] == actual.value) {

   151       return true;

   152     }

   153     return false;

   154   };

   156   let progress = doc.getElementById("progress");

   157   let progressDiv = doc.querySelector("#progress > div");

   158   let i = 0;

   159   for (let expected of tests) {

   160     let caret = expected.splice(0, 1)[0];

   161     progress.dataset.progress = ++i;

   162     progressDiv.style.width = 100*i/tests.length + "%";

   163     let actual = completer.getInfoAt(source, caret);

   164     if (checkState(expected, actual)) {

   165       ok(true, "Test " + i + " passed. ");

   166     }

   167     else {

   168       ok(false, "Test " + i + " failed. Expected state : [" + expected + "] " +

   169          "but found [" + actual.state + ", " +

   170          (actual.selector || actual.selectors) + ", " +

   171          actual.propertyName + ", " + actual.value + "].");

   172       progress.classList.add("failed");

   173     }

   174   }

   175   gBrowser.removeCurrentTab();

   176   finish();

   177 }

The Tor Browser / file revision