michael@0: /* vim: set ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:    http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: // Tests that the spectrum color picker works correctly
michael@0: 
michael@0: const TEST_URI = "chrome://browser/content/devtools/spectrum-frame.xhtml";
michael@0: const {Spectrum} = devtools.require("devtools/shared/widgets/Spectrum");
michael@0: 
michael@0: let doc;
michael@0: 
michael@0: function test() {
michael@0:   waitForExplicitFinish();
michael@0:   addTab(TEST_URI, () => {
michael@0:     doc = content.document;
michael@0:     startTests();
michael@0:   });
michael@0: }
michael@0: 
michael@0: function endTests() {
michael@0:   doc = null;
michael@0:   gBrowser.removeCurrentTab();
michael@0:   finish();
michael@0: }
michael@0: 
michael@0: function startTests() {
michael@0:   testCreateAndDestroyShouldAppendAndRemoveElements();
michael@0: }
michael@0: 
michael@0: function testCreateAndDestroyShouldAppendAndRemoveElements() {
michael@0:   let containerElement = doc.querySelector("#spectrum");
michael@0:   ok(containerElement, "We have the root node to append spectrum to");
michael@0:   is(containerElement.childElementCount, 0, "Root node is empty");
michael@0: 
michael@0:   let s = new Spectrum(containerElement, [255, 126, 255, 1]);
michael@0:   s.show();
michael@0:   ok(containerElement.childElementCount > 0, "Spectrum has appended elements");
michael@0: 
michael@0:   s.destroy();
michael@0:   is(containerElement.childElementCount, 0, "Destroying spectrum removed all nodes");
michael@0: 
michael@0:   testPassingAColorAtInitShouldSetThatColor();
michael@0: }
michael@0: 
michael@0: function testPassingAColorAtInitShouldSetThatColor() {
michael@0:   let initRgba = [255, 126, 255, 1];
michael@0: 
michael@0:   let s = new Spectrum(doc.querySelector("#spectrum"), initRgba);
michael@0:   s.show();
michael@0: 
michael@0:   let setRgba = s.rgb;
michael@0: 
michael@0:   is(initRgba[0], setRgba[0], "Spectrum initialized with the right color");
michael@0:   is(initRgba[1], setRgba[1], "Spectrum initialized with the right color");
michael@0:   is(initRgba[2], setRgba[2], "Spectrum initialized with the right color");
michael@0:   is(initRgba[3], setRgba[3], "Spectrum initialized with the right color");
michael@0: 
michael@0:   s.destroy();
michael@0:   testSettingAndGettingANewColor();
michael@0: }
michael@0: 
michael@0: function testSettingAndGettingANewColor() {
michael@0:   let s = new Spectrum(doc.querySelector("#spectrum"), [0, 0, 0, 1]);
michael@0:   s.show();
michael@0: 
michael@0:   let colorToSet = [255, 255, 255, 1];
michael@0:   s.rgb = colorToSet;
michael@0:   let newColor = s.rgb;
michael@0: 
michael@0:   is(colorToSet[0], newColor[0], "Spectrum set with the right color");
michael@0:   is(colorToSet[1], newColor[1], "Spectrum set with the right color");
michael@0:   is(colorToSet[2], newColor[2], "Spectrum set with the right color");
michael@0:   is(colorToSet[3], newColor[3], "Spectrum set with the right color");
michael@0: 
michael@0:   s.destroy();
michael@0:   testChangingColorShouldEmitEvents();
michael@0: }
michael@0: 
michael@0: function testChangingColorShouldEmitEvents() {
michael@0:   let s = new Spectrum(doc.querySelector("#spectrum"), [255, 255, 255, 1]);
michael@0:   s.show();
michael@0: 
michael@0:   s.once("changed", (event, rgba, color) => {
michael@0:     EventUtils.sendMouseEvent({type: "mouseup"}, s.dragger, doc.defaultView);
michael@0: 
michael@0:     ok(true, "Changed event was emitted on color change");
michael@0:     is(rgba[0], 128, "New color is correct");
michael@0:     is(rgba[1], 64, "New color is correct");
michael@0:     is(rgba[2], 64, "New color is correct");
michael@0:     is(rgba[3], 1, "New color is correct");
michael@0:     is("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")", color, "RGBA and css color correspond");
michael@0: 
michael@0:     s.destroy();
michael@0:     testSettingColorShoudUpdateTheUI();
michael@0:   });
michael@0: 
michael@0:   executeSoon(() => {
michael@0:     EventUtils.synthesizeMouse(s.dragger, s.dragger.offsetWidth/2, s.dragger.offsetHeight/2, {}, content);
michael@0:   });
michael@0: }
michael@0: 
michael@0: function testSettingColorShoudUpdateTheUI() {
michael@0:   let s = new Spectrum(doc.querySelector("#spectrum"), [255, 255, 255, 1]);
michael@0:   s.show();
michael@0:   let dragHelperOriginalPos = [s.dragHelper.style.top, s.dragHelper.style.left];
michael@0:   let alphaHelperOriginalPos = s.alphaSliderHelper.style.left;
michael@0: 
michael@0:   s.rgb = [50, 240, 234, .2];
michael@0:   s.updateUI();
michael@0: 
michael@0:   ok(s.alphaSliderHelper.style.left != alphaHelperOriginalPos, "Alpha helper has moved");
michael@0:   ok(s.dragHelper.style.top !== dragHelperOriginalPos[0], "Drag helper has moved");
michael@0:   ok(s.dragHelper.style.left !== dragHelperOriginalPos[1], "Drag helper has moved");
michael@0: 
michael@0:   s.rgb = [240, 32, 124, 0];
michael@0:   s.updateUI();
michael@0:   is(s.alphaSliderHelper.style.left, - (s.alphaSliderHelper.offsetWidth/2) + "px",
michael@0:     "Alpha range UI has been updated again");
michael@0: 
michael@0:   s.destroy();
michael@0:   executeSoon(endTests);
michael@0: }