<!DOCTYPE HTML>
<html>
<head>
  <title>WebExtension test</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/ExtensionTestUtils.js"></script>
  <script type="text/javascript" src="head.js"></script>
  <script type="text/javascript" src="head_cookies.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>

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

add_task(async function setup() {
  await SpecialPowers.pushPrefEnv({
    set: [["privacy.resistFingerprinting", true]],
  });
});

add_task(async function test_contentscript() {
  function contentScript() {
    let canvas = document.createElement("canvas");
    canvas.width = canvas.height = "100";

    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, 100, 100);
    let data = ctx.getImageData(0, 0, 100, 100);

    browser.test.sendMessage("data-color", data.data[1]);
  }

  let extensionData = {
    manifest: {
      content_scripts: [
        {
          "matches": ["http://mochi.test/*/file_sample.html"],
          "js": ["content_script.js"],
          "run_at": "document_start",
        },
      ],
    },

    files: {
      "content_script.js": contentScript,
    },
  };
  const url = "http://mochi.test:8888/chrome/toolkit/components/extensions/test/mochitest/file_sample.html";

  let extension = ExtensionTestUtils.loadExtension(extensionData);

  await extension.startup();
  let win = window.open(url);
  let color = await extension.awaitMessage("data-color");
  is(color, 128, "Got correct pixel data for green");
  win.close();
  await extension.unload();
});
</script>

</body>
</html>
