1 files changed, 171 insertions, 0 deletions
diff --git a/browser/components/newtab/test/browser/browser_discovery_styles.js b/browser/components/newtab/test/browser/browser_discovery_styles.js
new file mode 100644
index 0000000000..03f830d2ee
--- /dev/null
+++ b/browser/components/newtab/test/browser/browser_discovery_styles.js
@@ -0,0 +1,171 @@
+"use strict";
+
+function fakePref(layout) {
+  return [
+    "browser.newtabpage.activity-stream.discoverystream.config",
+    JSON.stringify({
+      enabled: true,
+      layout_endpoint: `data:,${encodeURIComponent(JSON.stringify(layout))}`,
+    }),
+  ];
+}
+
+test_newtab({
+  async before({ pushPrefs }) {
+    await pushPrefs(
+      fakePref({
+        layout: [
+          {
+            width: 12,
+            components: [
+              {
+                type: "TopSites",
+              },
+              {
+                type: "HorizontalRule",
+                styles: {
+                  hr: "border-width: 3.14159mm",
+                },
+              },
+            ],
+          },
+        ],
+      })
+    );
+  },
+  test: async function test_hr_override() {
+    const hr = await ContentTaskUtils.waitForCondition(() =>
+      content.document.querySelector("hr")
+    );
+    ok(
+      content.getComputedStyle(hr).borderTopWidth.match(/11.?\d*px/),
+      "applied and normalized hr component width override"
+    );
+  },
+});
+
+test_newtab({
+  async before({ pushPrefs }) {
+    await pushPrefs(
+      fakePref({
+        layout: [
+          {
+            width: 12,
+            components: [
+              {
+                type: "TopSites",
+              },
+              {
+                type: "HorizontalRule",
+                styles: {
+                  "*": "color: #f00",
+                  "": "font-size: 1.2345cm",
+                  hr: "font-weight: 12345",
+                },
+              },
+            ],
+          },
+        ],
+      })
+    );
+  },
+  test: async function test_multiple_overrides() {
+    const hr = await ContentTaskUtils.waitForCondition(() =>
+      content.document.querySelector("hr")
+    );
+    const styles = content.getComputedStyle(hr);
+    is(styles.color, "rgb(255, 0, 0)", "applied and normalized color");
+    is(styles.fontSize, "46.6583px", "applied and normalized font size");
+    is(styles.fontWeight, "400", "applied and normalized font weight");
+  },
+});
+
+test_newtab({
+  async before({ pushPrefs }) {
+    await pushPrefs(
+      fakePref({
+        layout: [
+          {
+            width: 12,
+            components: [
+              {
+                type: "HorizontalRule",
+                styles: {
+                  // NB: Use display: none to avoid network requests to unfiltered urls
+                  hr: `display: none;
+                   background-image: url(https://example.com/background);
+                   content: url(chrome://browser/content);
+                   cursor: url(  resource://activity-stream/cursor  ), auto;
+                   list-style-image: url('https://img-getpocket.cdn.mozilla.net/list');`,
+                },
+              },
+            ],
+          },
+        ],
+      })
+    );
+  },
+  test: async function test_url_filtering() {
+    const hr = await ContentTaskUtils.waitForCondition(() =>
+      content.document.querySelector("hr")
+    );
+    const styles = content.getComputedStyle(hr);
+    is(
+      styles.backgroundImage,
+      "none",
+      "filtered out invalid background image url"
+    );
+    is(
+      styles.content,
+      `url("chrome://browser/content/browser.xul")`,
+      "applied, normalized and allowed content url"
+    );
+    is(
+      styles.cursor,
+      `url("resource://activity-stream/cursor"), auto`,
+      "applied, normalized and allowed cursor url"
+    );
+    is(
+      styles.listStyleImage,
+      `url("https://img-getpocket.cdn.mozilla.net/list")`,
+      "applied, normalized and allowed list style image url"
+    );
+  },
+});
+
+test_newtab({
+  async before({ pushPrefs }) {
+    await pushPrefs(
+      fakePref({
+        layout: [
+          {
+            width: 12,
+            components: [
+              {
+                type: "HorizontalRule",
+                styles: {
+                  "@media (min-width: 0)":
+                    "content: url(chrome://browser/content)",
+                  "@media (min-width: 0) *":
+                    "content: url(chrome://browser/content)",
+                  "@media (min-width: 0) { * }":
+                    "content: url(chrome://browser/content)",
+                },
+              },
+            ],
+          },
+        ],
+      })
+    );
+  },
+  test: async function test_atrule_filtering() {
+    const hr = await ContentTaskUtils.waitForCondition(() =>
+      content.document.querySelector("hr")
+    );
+    is(
+      content.getComputedStyle(hr).content,
+      "normal",
+      "filtered out attempted @media query"
+    );
+  },
+});