summaryrefslogtreecommitdiffstats
path: root/devtools/shared/commands/resource/tests/browser_resources_stylesheets_import.js
blob: a6b06a7613dbe6e935324a3cc5f679874d873e04 (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
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test the ResourceCommand API for imported STYLESHEET + iframe.

const styleSheetText = `
@import "${URL_ROOT_ORG_SSL}/style_document.css";
body { background-color: tomato; }`;

const IFRAME_URL = `https://example.org/document-builder.sjs?html=${encodeURIComponent(`
  <style>${styleSheetText}</style>
  <h1>iframe</h1>
`)}`;

const TEST_URL = `https://example.org/document-builder.sjs?html=
  <h1>import stylesheet test</h1>
  <iframe src="${encodeURIComponent(IFRAME_URL)}"></iframe>`;

add_task(async function () {
  info("Check resource available feature of the ResourceCommand");

  const tab = await addTab(TEST_URL);

  const { client, resourceCommand, targetCommand } = await initResourceCommand(
    tab
  );

  info("Check whether ResourceCommand gets existing stylesheet");
  const availableResources = [];
  await resourceCommand.watchResources([resourceCommand.TYPES.STYLESHEET], {
    onAvailable: resources => availableResources.push(...resources),
  });

  await waitFor(() => availableResources.length === 2);
  ok(true, "We're getting the expected stylesheets");

  const styleNodeStyleSheet = availableResources.find(
    resource => resource.nodeHref
  );
  const importedStyleSheet = availableResources.find(
    resource => resource !== styleNodeStyleSheet
  );

  is(
    await getStyleSheetText(styleNodeStyleSheet),
    styleSheetText.trim(),
    "Got expected text for the <style> stylesheet"
  );

  is(
    await getStyleSheetText(importedStyleSheet),
    `body { margin: 1px; }`,
    "Got expected text for the imported stylesheet"
  );

  targetCommand.destroy();
  await client.close();
});

async function getStyleSheetText(resource) {
  const styleSheetsFront = await resource.targetFront.getFront("stylesheets");
  const styleText = await styleSheetsFront.getText(resource.resourceId);
  return styleText.str.trim();
}