1 files changed, 114 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_filter-editor-02.js b/devtools/client/shared/test/browser_filter-editor-02.js
new file mode 100644
index 0000000000..2a69f5265f
--- /dev/null
+++ b/devtools/client/shared/test/browser_filter-editor-02.js
@@ -0,0 +1,114 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the Filter Editor Widget renders filters correctly
+
+const {
+  CSSFilterEditorWidget,
+} = require("resource://devtools/client/shared/widgets/FilterWidget.js");
+
+const STRINGS_URI = "devtools/client/locales/filterwidget.properties";
+const L10N = new LocalizationHelper(STRINGS_URI);
+
+const TEST_URI = CHROME_URL_ROOT + "doc_filter-editor-01.html";
+
+add_task(async function () {
+  const { doc } = await createHost("bottom", TEST_URI);
+
+  const TEST_DATA = [
+    {
+      cssValue:
+        "blur(2px) contrast(200%) hue-rotate(20.2deg) drop-shadow(5px 5px black)",
+      expected: [
+        {
+          label: "blur",
+          value: "2",
+          unit: "px",
+        },
+        {
+          label: "contrast",
+          value: "200",
+          unit: "%",
+        },
+        {
+          label: "hue-rotate",
+          value: "20.2",
+          unit: "deg",
+        },
+        {
+          label: "drop-shadow",
+          value: "5px 5px black",
+          unit: null,
+        },
+      ],
+    },
+    {
+      cssValue: "hue-rotate(420.2deg)",
+      expected: [
+        {
+          label: "hue-rotate",
+          value: "420.2",
+          unit: "deg",
+        },
+      ],
+    },
+    {
+      cssValue: "url(example.svg)",
+      expected: [
+        {
+          label: "url",
+          value: "example.svg",
+          unit: null,
+        },
+      ],
+    },
+    {
+      cssValue: "none",
+      expected: [],
+    },
+  ];
+
+  const container = doc.querySelector("#filter-container");
+  const widget = new CSSFilterEditorWidget(container, "none");
+
+  info("Test rendering of different types");
+
+  for (const { cssValue, expected } of TEST_DATA) {
+    widget.setCssValue(cssValue);
+
+    if (cssValue === "none") {
+      const text = container.querySelector("#filters").textContent;
+      Assert.greater(
+        text.indexOf(L10N.getStr("emptyFilterList")),
+        -1,
+        "Contains |emptyFilterList| string when given value 'none'"
+      );
+      Assert.greater(
+        text.indexOf(L10N.getStr("addUsingList")),
+        -1,
+        "Contains |addUsingList| string when given value 'none'"
+      );
+      continue;
+    }
+    const filters = container.querySelectorAll(".filter");
+    testRenderedFilters(filters, expected);
+  }
+  widget.destroy();
+});
+
+function testRenderedFilters(filters, expected) {
+  for (const [index, filter] of [...filters].entries()) {
+    const [name, value] = filter.children,
+      label = name.children[1],
+      [input, unit] = value.children;
+
+    const eq = expected[index];
+    is(label.textContent, eq.label, "Label should match");
+    is(input.value, eq.value, "Values should match");
+    if (eq.unit) {
+      is(unit.textContent, eq.unit, "Unit should match");
+    }
+  }
+}