The Tor Browser / file comparison
comparison: browser/devtools/sourceeditor/test/browser_css_getInfo.js
browser/devtools/sourceeditor/test/browser_css_getInfo.js
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:fe7363068629 |
|---|---|
| 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/ */ | |
| 4 | |
| 5 "use strict"; | |
| 6 | |
| 7 const cssAutoCompleter = require("devtools/sourceeditor/css-autocompleter"); | |
| 8 | |
| 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"); | |
| 49 | |
| 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 ]; | |
| 81 | |
| 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")); | |
| 121 | |
| 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 } | |
| 133 | |
| 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 }; | |
| 155 | |
| 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 } |
