browser/devtools/shared/test/browser_spectrum.js

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/browser/devtools/shared/test/browser_spectrum.js	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,122 @@
     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 +// Tests that the spectrum color picker works correctly
     1.9 +
    1.10 +const TEST_URI = "chrome://browser/content/devtools/spectrum-frame.xhtml";
    1.11 +const {Spectrum} = devtools.require("devtools/shared/widgets/Spectrum");
    1.12 +
    1.13 +let doc;
    1.14 +
    1.15 +function test() {
    1.16 +  waitForExplicitFinish();
    1.17 +  addTab(TEST_URI, () => {
    1.18 +    doc = content.document;
    1.19 +    startTests();
    1.20 +  });
    1.21 +}
    1.22 +
    1.23 +function endTests() {
    1.24 +  doc = null;
    1.25 +  gBrowser.removeCurrentTab();
    1.26 +  finish();
    1.27 +}
    1.28 +
    1.29 +function startTests() {
    1.30 +  testCreateAndDestroyShouldAppendAndRemoveElements();
    1.31 +}
    1.32 +
    1.33 +function testCreateAndDestroyShouldAppendAndRemoveElements() {
    1.34 +  let containerElement = doc.querySelector("#spectrum");
    1.35 +  ok(containerElement, "We have the root node to append spectrum to");
    1.36 +  is(containerElement.childElementCount, 0, "Root node is empty");
    1.37 +
    1.38 +  let s = new Spectrum(containerElement, [255, 126, 255, 1]);
    1.39 +  s.show();
    1.40 +  ok(containerElement.childElementCount > 0, "Spectrum has appended elements");
    1.41 +
    1.42 +  s.destroy();
    1.43 +  is(containerElement.childElementCount, 0, "Destroying spectrum removed all nodes");
    1.44 +
    1.45 +  testPassingAColorAtInitShouldSetThatColor();
    1.46 +}
    1.47 +
    1.48 +function testPassingAColorAtInitShouldSetThatColor() {
    1.49 +  let initRgba = [255, 126, 255, 1];
    1.50 +
    1.51 +  let s = new Spectrum(doc.querySelector("#spectrum"), initRgba);
    1.52 +  s.show();
    1.53 +
    1.54 +  let setRgba = s.rgb;
    1.55 +
    1.56 +  is(initRgba[0], setRgba[0], "Spectrum initialized with the right color");
    1.57 +  is(initRgba[1], setRgba[1], "Spectrum initialized with the right color");
    1.58 +  is(initRgba[2], setRgba[2], "Spectrum initialized with the right color");
    1.59 +  is(initRgba[3], setRgba[3], "Spectrum initialized with the right color");
    1.60 +
    1.61 +  s.destroy();
    1.62 +  testSettingAndGettingANewColor();
    1.63 +}
    1.64 +
    1.65 +function testSettingAndGettingANewColor() {
    1.66 +  let s = new Spectrum(doc.querySelector("#spectrum"), [0, 0, 0, 1]);
    1.67 +  s.show();
    1.68 +
    1.69 +  let colorToSet = [255, 255, 255, 1];
    1.70 +  s.rgb = colorToSet;
    1.71 +  let newColor = s.rgb;
    1.72 +
    1.73 +  is(colorToSet[0], newColor[0], "Spectrum set with the right color");
    1.74 +  is(colorToSet[1], newColor[1], "Spectrum set with the right color");
    1.75 +  is(colorToSet[2], newColor[2], "Spectrum set with the right color");
    1.76 +  is(colorToSet[3], newColor[3], "Spectrum set with the right color");
    1.77 +
    1.78 +  s.destroy();
    1.79 +  testChangingColorShouldEmitEvents();
    1.80 +}
    1.81 +
    1.82 +function testChangingColorShouldEmitEvents() {
    1.83 +  let s = new Spectrum(doc.querySelector("#spectrum"), [255, 255, 255, 1]);
    1.84 +  s.show();
    1.85 +
    1.86 +  s.once("changed", (event, rgba, color) => {
    1.87 +    EventUtils.sendMouseEvent({type: "mouseup"}, s.dragger, doc.defaultView);
    1.88 +
    1.89 +    ok(true, "Changed event was emitted on color change");
    1.90 +    is(rgba[0], 128, "New color is correct");
    1.91 +    is(rgba[1], 64, "New color is correct");
    1.92 +    is(rgba[2], 64, "New color is correct");
    1.93 +    is(rgba[3], 1, "New color is correct");
    1.94 +    is("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")", color, "RGBA and css color correspond");
    1.95 +
    1.96 +    s.destroy();
    1.97 +    testSettingColorShoudUpdateTheUI();
    1.98 +  });
    1.99 +
   1.100 +  executeSoon(() => {
   1.101 +    EventUtils.synthesizeMouse(s.dragger, s.dragger.offsetWidth/2, s.dragger.offsetHeight/2, {}, content);
   1.102 +  });
   1.103 +}
   1.104 +
   1.105 +function testSettingColorShoudUpdateTheUI() {
   1.106 +  let s = new Spectrum(doc.querySelector("#spectrum"), [255, 255, 255, 1]);
   1.107 +  s.show();
   1.108 +  let dragHelperOriginalPos = [s.dragHelper.style.top, s.dragHelper.style.left];
   1.109 +  let alphaHelperOriginalPos = s.alphaSliderHelper.style.left;
   1.110 +
   1.111 +  s.rgb = [50, 240, 234, .2];
   1.112 +  s.updateUI();
   1.113 +
   1.114 +  ok(s.alphaSliderHelper.style.left != alphaHelperOriginalPos, "Alpha helper has moved");
   1.115 +  ok(s.dragHelper.style.top !== dragHelperOriginalPos[0], "Drag helper has moved");
   1.116 +  ok(s.dragHelper.style.left !== dragHelperOriginalPos[1], "Drag helper has moved");
   1.117 +
   1.118 +  s.rgb = [240, 32, 124, 0];
   1.119 +  s.updateUI();
   1.120 +  is(s.alphaSliderHelper.style.left, - (s.alphaSliderHelper.offsetWidth/2) + "px",
   1.121 +    "Alpha range UI has been updated again");
   1.122 +
   1.123 +  s.destroy();
   1.124 +  executeSoon(endTests);
   1.125 +}

mercurial