The Tor Browser / file comparison
comparison: browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js
browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:d9e63d7cd831 |
|---|---|
| 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 PAGE_CONTENT = [ | |
| 8 '<style type="text/css">', | |
| 9 ' body {', | |
| 10 ' background-color: #ff5;', | |
| 11 ' padding: 50px', | |
| 12 ' }', | |
| 13 ' div {', | |
| 14 ' width: 100px;', | |
| 15 ' height: 100px;', | |
| 16 ' background-color: #f09;', | |
| 17 ' }', | |
| 18 '</style>', | |
| 19 '<body><div></div></body>' | |
| 20 ].join("\n"); | |
| 21 | |
| 22 const ORIGINAL_COLOR = "rgb(255, 0, 153)"; // #f09 | |
| 23 const EXPECTED_COLOR = "rgb(255, 255, 85)"; // #ff5 | |
| 24 | |
| 25 // Test opening the eyedropper from the color picker. Pressing escape | |
| 26 // to close it, and clicking the page to select a color. | |
| 27 | |
| 28 let test = asyncTest(function*() { | |
| 29 yield addTab("data:text/html,rule view eyedropper test"); | |
| 30 content.document.body.innerHTML = PAGE_CONTENT; | |
| 31 let {toolbox, inspector, view} = yield openRuleView(); | |
| 32 | |
| 33 let element = content.document.querySelector("div"); | |
| 34 inspector.selection.setNode(element, "test"); | |
| 35 yield inspector.once("inspector-updated"); | |
| 36 | |
| 37 let property = getRuleViewProperty(view, "div", "background-color"); | |
| 38 let swatch = property.valueSpan.querySelector(".ruleview-colorswatch"); | |
| 39 ok(swatch, "Color swatch is displayed for the bg-color property"); | |
| 40 | |
| 41 let dropper = yield openEyedropper(view, swatch); | |
| 42 | |
| 43 let tooltip = view.colorPicker.tooltip; | |
| 44 ok(tooltip.isHidden(), | |
| 45 "color picker tooltip is closed after opening eyedropper"); | |
| 46 | |
| 47 yield testESC(swatch, dropper); | |
| 48 | |
| 49 dropper = yield openEyedropper(view, swatch); | |
| 50 | |
| 51 ok(dropper, "dropper opened"); | |
| 52 | |
| 53 yield testSelect(swatch, dropper); | |
| 54 }); | |
| 55 | |
| 56 | |
| 57 function testESC(swatch, dropper) { | |
| 58 let deferred = promise.defer(); | |
| 59 | |
| 60 dropper.once("destroy", () => { | |
| 61 let color = swatch.style.backgroundColor; | |
| 62 is(color, ORIGINAL_COLOR, "swatch didn't change after pressing ESC"); | |
| 63 | |
| 64 deferred.resolve(); | |
| 65 }); | |
| 66 | |
| 67 inspectPage(dropper, false).then(pressESC); | |
| 68 | |
| 69 return deferred.promise; | |
| 70 } | |
| 71 | |
| 72 function testSelect(swatch, dropper) { | |
| 73 let deferred = promise.defer(); | |
| 74 | |
| 75 dropper.once("destroy", () => { | |
| 76 let color = swatch.style.backgroundColor; | |
| 77 is(color, EXPECTED_COLOR, "swatch changed colors"); | |
| 78 | |
| 79 // the change to the content is done async after rule view change | |
| 80 executeSoon(() => { | |
| 81 let element = content.document.querySelector("div"); | |
| 82 is(content.window.getComputedStyle(element).backgroundColor, | |
| 83 EXPECTED_COLOR, | |
| 84 "div's color set to body color after dropper"); | |
| 85 | |
| 86 deferred.resolve(); | |
| 87 }); | |
| 88 }); | |
| 89 | |
| 90 inspectPage(dropper); | |
| 91 | |
| 92 return deferred.promise; | |
| 93 } | |
| 94 | |
| 95 | |
| 96 /* Helpers */ | |
| 97 | |
| 98 function openEyedropper(view, swatch) { | |
| 99 let deferred = promise.defer(); | |
| 100 | |
| 101 let tooltip = view.colorPicker.tooltip; | |
| 102 | |
| 103 tooltip.once("shown", () => { | |
| 104 let tooltipDoc = tooltip.content.contentDocument; | |
| 105 let dropperButton = tooltipDoc.querySelector("#eyedropper-button"); | |
| 106 | |
| 107 tooltip.once("eyedropper-opened", (event, dropper) => { | |
| 108 deferred.resolve(dropper) | |
| 109 }); | |
| 110 dropperButton.click(); | |
| 111 }); | |
| 112 | |
| 113 swatch.click(); | |
| 114 return deferred.promise; | |
| 115 } | |
| 116 | |
| 117 function inspectPage(dropper, click=true) { | |
| 118 let target = content.document.body; | |
| 119 let win = content.window; | |
| 120 | |
| 121 EventUtils.synthesizeMouse(target, 10, 10, { type: "mousemove" }, win); | |
| 122 | |
| 123 return dropperLoaded(dropper).then(() => { | |
| 124 EventUtils.synthesizeMouse(target, 20, 20, { type: "mousemove" }, win); | |
| 125 if (click) { | |
| 126 EventUtils.synthesizeMouse(target, 20, 20, {}, win); | |
| 127 } | |
| 128 }); | |
| 129 } | |
| 130 | |
| 131 function dropperLoaded(dropper) { | |
| 132 if (dropper.loaded) { | |
| 133 return promise.resolve(); | |
| 134 } | |
| 135 | |
| 136 return dropper.once("load"); | |
| 137 } | |
| 138 | |
| 139 function pressESC() { | |
| 140 EventUtils.synthesizeKey("VK_ESCAPE", { }); | |
| 141 } |
