1 files changed, 82 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
new file mode 100644
index 0000000000..c5eef9d670
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that changing a color in a gradient css declaration using the tooltip
+// color picker works.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background-image: linear-gradient(to left, #f06 25%, #333 95%, #000 100%);
+    }
+  </style>
+  Updating a gradient declaration with the color picker tooltip
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  info("Testing that the colors in gradient properties are parsed correctly");
+  testColorParsing(view);
+
+  info("Testing that changing one of the colors of a gradient property works");
+  await testPickingNewColor(view);
+});
+
+function testColorParsing(view) {
+  const ruleEl = getRuleViewProperty(view, "body", "background-image");
+  ok(ruleEl, "The background-image gradient declaration was found");
+
+  const swatchEls = ruleEl.valueSpan.querySelectorAll(".ruleview-colorswatch");
+  ok(swatchEls, "The color swatch elements were found");
+  is(swatchEls.length, 3, "There are 3 color swatches");
+
+  const colorEls = ruleEl.valueSpan.querySelectorAll(".ruleview-color");
+  ok(colorEls, "The color elements were found");
+  is(colorEls.length, 3, "There are 3 color values");
+
+  const colors = ["#f06", "#333", "#000"];
+  for (let i = 0; i < colors.length; i++) {
+    is(colorEls[i].textContent, colors[i], "The right color value was found");
+  }
+}
+
+async function testPickingNewColor(view) {
+  // Grab the first color swatch and color in the gradient
+  const ruleEl = getRuleViewProperty(view, "body", "background-image");
+  const swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch");
+  const colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
+
+  info("Get the color picker tooltip and clicking on the swatch to show it");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = cPicker.once("ready");
+  swatchEl.click();
+  await onColorPickerReady;
+
+  const change = {
+    selector: "body",
+    name: "background-image",
+    value:
+      "linear-gradient(to left, rgb(1, 1, 1) 25%, " +
+      "rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)",
+  };
+  await simulateColorPickerChange(view, cPicker, [1, 1, 1, 1], change);
+
+  is(
+    swatchEl.style.backgroundColor,
+    "rgb(1, 1, 1)",
+    "The color swatch's background was updated"
+  );
+  is(colorEl.textContent, "#010101", "The color text was updated");
+  is(
+    await getComputedStyleProperty("body", null, "background-image"),
+    "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, " +
+      "rgb(0, 0, 0) 100%)",
+    "The gradient has been updated correctly"
+  );
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+}