summaryrefslogtreecommitdiffstats
path: root/toolkit/components/extensions/test/browser/browser_ext_themes_sanitization.js
blob: 2e7359ce29300d6728dda014db748118fc4c031c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
"use strict";

// This test checks color sanitization in various situations

add_task(async function test_sanitization_invalid() {
  // This test checks that invalid values are sanitized
  let extension = ExtensionTestUtils.loadExtension({
    manifest: {
      theme: {
        colors: {
          frame: ACCENT_COLOR,
          tab_background_text: TEXT_COLOR,
          bookmark_text: "ntimsfavoriteblue",
        },
      },
    },
  });

  await extension.startup();

  let navbar = document.querySelector("#nav-bar");
  Assert.equal(
    window.getComputedStyle(navbar).color,
    "rgb(0, 0, 0)",
    "All invalid values should always compute to black."
  );

  await extension.unload();
});

add_task(async function test_sanitization_css_variables() {
  // This test checks that CSS variables are sanitized
  let extension = ExtensionTestUtils.loadExtension({
    manifest: {
      theme: {
        colors: {
          frame: ACCENT_COLOR,
          tab_background_text: TEXT_COLOR,
          bookmark_text: "var(--arrowpanel-dimmed)",
        },
      },
    },
  });

  await extension.startup();

  let navbar = document.querySelector("#nav-bar");
  Assert.equal(
    window.getComputedStyle(navbar).color,
    "rgb(0, 0, 0)",
    "All CSS variables should always compute to black."
  );

  await extension.unload();
});

add_task(async function test_sanitization_important() {
  // This test checks that the sanitizer cannot be fooled with !important
  let stylesheetAttr = `href="data:text/css,*{color:red!important}" type="text/css"`;
  let stylesheet = document.createProcessingInstruction(
    "xml-stylesheet",
    stylesheetAttr
  );
  let load = BrowserTestUtils.waitForEvent(stylesheet, "load");
  document.insertBefore(stylesheet, document.documentElement);
  await load;

  let extension = ExtensionTestUtils.loadExtension({
    manifest: {
      theme: {
        colors: {
          frame: ACCENT_COLOR,
          tab_background_text: TEXT_COLOR,
          bookmark_text: "green",
        },
      },
    },
  });

  await extension.startup();

  let navbar = document.querySelector("#nav-bar");
  Assert.equal(
    window.getComputedStyle(navbar).color,
    "rgb(255, 0, 0)",
    "Sheet applies"
  );

  stylesheet.remove();

  Assert.equal(
    window.getComputedStyle(navbar).color,
    "rgb(0, 128, 0)",
    "Shouldn't be able to fool the color sanitizer with !important"
  );

  await extension.unload();
});

add_task(async function test_sanitization_transparent() {
  // This test checks whether transparent values are applied properly
  let extension = ExtensionTestUtils.loadExtension({
    manifest: {
      theme: {
        colors: {
          frame: ACCENT_COLOR,
          tab_background_text: TEXT_COLOR,
          toolbar_top_separator: "transparent",
        },
      },
    },
  });

  await extension.startup();

  let navbar = document.querySelector("#nav-bar");
  Assert.ok(
    window.getComputedStyle(navbar).boxShadow.includes("rgba(0, 0, 0, 0)"),
    "Top separator should be transparent"
  );

  await extension.unload();
});

add_task(async function test_sanitization_transparent_frame_color() {
  // This test checks whether transparent frame color falls back to white.
  let extension = ExtensionTestUtils.loadExtension({
    manifest: {
      theme: {
        colors: {
          frame: "transparent",
          tab_background_text: TEXT_COLOR,
        },
      },
    },
  });

  await extension.startup();

  let toolbox = document.querySelector("#navigator-toolbox");
  let toolboxCS = window.getComputedStyle(toolbox);

  if (backgroundColorSetOnRoot()) {
    let docEl = document.documentElement;
    let rootCS = window.getComputedStyle(docEl);
    Assert.equal(
      rootCS.backgroundColor,
      "rgb(255, 255, 255)",
      "Accent color should be white"
    );
  } else {
    Assert.equal(
      toolboxCS.backgroundColor,
      "rgb(255, 255, 255)",
      "Accent color should be white"
    );
  }

  await extension.unload();
});

add_task(
  async function test_sanitization_transparent_tab_background_text_color() {
    // This test checks whether transparent textcolor falls back to black.
    let extension = ExtensionTestUtils.loadExtension({
      manifest: {
        theme: {
          colors: {
            frame: ACCENT_COLOR,
            tab_background_text: "transparent",
          },
        },
      },
    });

    await extension.startup();

    let docEl = document.documentElement;
    Assert.equal(
      window.getComputedStyle(docEl).color,
      "rgb(0, 0, 0)",
      "Text color should be black"
    );

    await extension.unload();
  }
);