1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,141 @@
1.4 +/* vim: set ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +const PAGE_CONTENT = [
1.11 + '<style type="text/css">',
1.12 + ' body {',
1.13 + ' background-color: #ff5;',
1.14 + ' padding: 50px',
1.15 + ' }',
1.16 + ' div {',
1.17 + ' width: 100px;',
1.18 + ' height: 100px;',
1.19 + ' background-color: #f09;',
1.20 + ' }',
1.21 + '</style>',
1.22 + '<body><div></div></body>'
1.23 +].join("\n");
1.24 +
1.25 +const ORIGINAL_COLOR = "rgb(255, 0, 153)"; // #f09
1.26 +const EXPECTED_COLOR = "rgb(255, 255, 85)"; // #ff5
1.27 +
1.28 +// Test opening the eyedropper from the color picker. Pressing escape
1.29 +// to close it, and clicking the page to select a color.
1.30 +
1.31 +let test = asyncTest(function*() {
1.32 + yield addTab("data:text/html,rule view eyedropper test");
1.33 + content.document.body.innerHTML = PAGE_CONTENT;
1.34 + let {toolbox, inspector, view} = yield openRuleView();
1.35 +
1.36 + let element = content.document.querySelector("div");
1.37 + inspector.selection.setNode(element, "test");
1.38 + yield inspector.once("inspector-updated");
1.39 +
1.40 + let property = getRuleViewProperty(view, "div", "background-color");
1.41 + let swatch = property.valueSpan.querySelector(".ruleview-colorswatch");
1.42 + ok(swatch, "Color swatch is displayed for the bg-color property");
1.43 +
1.44 + let dropper = yield openEyedropper(view, swatch);
1.45 +
1.46 + let tooltip = view.colorPicker.tooltip;
1.47 + ok(tooltip.isHidden(),
1.48 + "color picker tooltip is closed after opening eyedropper");
1.49 +
1.50 + yield testESC(swatch, dropper);
1.51 +
1.52 + dropper = yield openEyedropper(view, swatch);
1.53 +
1.54 + ok(dropper, "dropper opened");
1.55 +
1.56 + yield testSelect(swatch, dropper);
1.57 +});
1.58 +
1.59 +
1.60 +function testESC(swatch, dropper) {
1.61 + let deferred = promise.defer();
1.62 +
1.63 + dropper.once("destroy", () => {
1.64 + let color = swatch.style.backgroundColor;
1.65 + is(color, ORIGINAL_COLOR, "swatch didn't change after pressing ESC");
1.66 +
1.67 + deferred.resolve();
1.68 + });
1.69 +
1.70 + inspectPage(dropper, false).then(pressESC);
1.71 +
1.72 + return deferred.promise;
1.73 +}
1.74 +
1.75 +function testSelect(swatch, dropper) {
1.76 + let deferred = promise.defer();
1.77 +
1.78 + dropper.once("destroy", () => {
1.79 + let color = swatch.style.backgroundColor;
1.80 + is(color, EXPECTED_COLOR, "swatch changed colors");
1.81 +
1.82 + // the change to the content is done async after rule view change
1.83 + executeSoon(() => {
1.84 + let element = content.document.querySelector("div");
1.85 + is(content.window.getComputedStyle(element).backgroundColor,
1.86 + EXPECTED_COLOR,
1.87 + "div's color set to body color after dropper");
1.88 +
1.89 + deferred.resolve();
1.90 + });
1.91 + });
1.92 +
1.93 + inspectPage(dropper);
1.94 +
1.95 + return deferred.promise;
1.96 +}
1.97 +
1.98 +
1.99 +/* Helpers */
1.100 +
1.101 +function openEyedropper(view, swatch) {
1.102 + let deferred = promise.defer();
1.103 +
1.104 + let tooltip = view.colorPicker.tooltip;
1.105 +
1.106 + tooltip.once("shown", () => {
1.107 + let tooltipDoc = tooltip.content.contentDocument;
1.108 + let dropperButton = tooltipDoc.querySelector("#eyedropper-button");
1.109 +
1.110 + tooltip.once("eyedropper-opened", (event, dropper) => {
1.111 + deferred.resolve(dropper)
1.112 + });
1.113 + dropperButton.click();
1.114 + });
1.115 +
1.116 + swatch.click();
1.117 + return deferred.promise;
1.118 +}
1.119 +
1.120 +function inspectPage(dropper, click=true) {
1.121 + let target = content.document.body;
1.122 + let win = content.window;
1.123 +
1.124 + EventUtils.synthesizeMouse(target, 10, 10, { type: "mousemove" }, win);
1.125 +
1.126 + return dropperLoaded(dropper).then(() => {
1.127 + EventUtils.synthesizeMouse(target, 20, 20, { type: "mousemove" }, win);
1.128 + if (click) {
1.129 + EventUtils.synthesizeMouse(target, 20, 20, {}, win);
1.130 + }
1.131 + });
1.132 +}
1.133 +
1.134 +function dropperLoaded(dropper) {
1.135 + if (dropper.loaded) {
1.136 + return promise.resolve();
1.137 + }
1.138 +
1.139 + return dropper.once("load");
1.140 +}
1.141 +
1.142 +function pressESC() {
1.143 + EventUtils.synthesizeKey("VK_ESCAPE", { });
1.144 +}
