The Tor Browser / annotate

browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js@6474c204b198 (annotated)

browser/devtools/styleinspector/test/browser_ruleview_eyedropper.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.

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

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial