summaryrefslogtreecommitdiffstats
path: root/mobile/android/components/extensions/test/mochitest/test_ext_tabs_insertCSS.html
blob: 718c2d6de492a197e39d1d9806ae756845f8e454 (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
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Tabs executeScript Test</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/ExtensionTestUtils.js"></script>
  <script type="text/javascript" src="head.js"></script>
  <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
</head>
<body>

<script type="text/javascript">
"use strict";

add_task(async function testExecuteScript() {
  const win = window.open("http://mochi.test:8888/");

  async function background() {
    const tasks = [
      {
        description: "CSS as moz-extension:// url",
        background: "rgba(0, 0, 0, 0)",
        foreground: "rgb(0, 113, 4)",
        promise: () => {
          return browser.tabs.insertCSS({
            file: "file2.css",
          });
        },
      },
      {
        description: "CSS as code snippet string",
        background: "rgb(42, 42, 42)",
        foreground: "rgb(0, 113, 4)",
        promise: () => {
          return browser.tabs.insertCSS({
            code: "* { background: rgb(42, 42, 42) }",
          });
        },
      },
      {
        description: "last of two author CSS wins",
        background: "rgb(42, 42, 42)",
        foreground: "rgb(0, 113, 4)",
        promise: async () => {
          await browser.tabs.insertCSS({
            code: "* { background: rgb(100, 100, 100) !important }",
            cssOrigin: "author",
          });
          await browser.tabs.insertCSS({
            code: "* { background: rgb(42, 42, 42) !important }",
            cssOrigin: "author",
          });
        },
      },
      {
        description: "user CSS has higher priority",
        background: "rgb(100, 100, 100)",
        foreground: "rgb(0, 113, 4)",
        promise: async () => {
          // User has higher importance
          await browser.tabs.insertCSS({
            code: "* { background: rgb(100, 100, 100) !important }",
            cssOrigin: "user",
          });
          await browser.tabs.insertCSS({
            code: "* { background: rgb(42, 42, 42) !important }",
            cssOrigin: "author",
          });
        },
      },
    ];

    function checkCSS() {
      const computedStyle = window.getComputedStyle(document.body);
      return [computedStyle.backgroundColor, computedStyle.color];
    }

    try {
      for (const {background, description, foreground, promise} of tasks) {
        browser.test.log(`Run test case: ${description}`);
        let result = await promise();

        browser.test.assertEq(undefined, result, "Expected callback result");

        [result] = await browser.tabs.executeScript({
          code: `(${checkCSS})()`,
        });

        browser.test.assertEq(background, result[0], "Expected background color");
        browser.test.assertEq(foreground, result[1], "Expected foreground color");
      }

      browser.test.notifyPass("insertCSS");
    } catch (e) {
      browser.test.fail(`Error: ${e} :: ${e.stack}`);
      browser.test.notifyFail("insertCSS");
    }
  }

  const extension = ExtensionTestUtils.loadExtension({
    manifest: {
      "permissions": ["http://mochi.test/"],
    },

    background,

    files: {
      "file2.css": "* { color: rgb(0, 113, 4) }",
    },
  });

  await extension.startup();

  await extension.awaitFinish("insertCSS");

  await extension.unload();

  win.close();
});
</script>

</body>
</html>