summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/test/browser_inspector_highlighter-05.js
blob: 4c4fd4781cc895c1c53532a3c469e7c8058e1d75 (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
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* eslint-disable mozilla/no-arbitrary-setTimeout */

"use strict";

// This is testing that the Anonymous Content is properly inserted into the document.
// Usually that is happening during the "interactive" state of the document, to have them
// ready as soon as possible.
// However, in some conditions, that's not possible since we don't have access yet to
// the `CustomContentContainer`, that is used to add the Anonymous Content.
// That can happen if the page has some external resource, as <link>, that takes time
// to load and / or returns the wrong content. This is not happening, for instance, with
// images.
//
// In those case, we want to be sure that if we're not able to insert the Anonymous
// Content at the "interactive" state, we're doing so when the document is loaded.
//
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1365075

const server = createTestHTTPServer();
const filepath = "/slow.css";
const cssuri = `http://localhost:${server.identity.primaryPort}${filepath}`;

// Register a slow css file handler so we can simulate a long loading time.
server.registerContentType("css", "text/css");
server.registerPathHandler(filepath, (metadata, response) => {
  info("CSS has been requested");
  response.processAsync();
  setTimeout(() => {
    info("CSS is responding");
    response.finish();
  }, 2000);
});

const TEST_URL =
  "data:text/html," +
  encodeURIComponent(`
  <!DOCTYPE html>
  <html>
    <head>
      <link href="${cssuri}" rel="stylesheet" />
    </head>
    <body>
      <p>Slow page</p>
     </body>
  </html>
`);

add_task(async function () {
  info("Open the inspector to a blank page.");
  const { inspector } = await openInspectorForURL("about:blank");

  info("Navigate to the test url and waiting for the page to be loaded.");
  await navigateTo(TEST_URL);

  info("Shows the box model highligher for the <p> node.");
  const nodeFront = await getNodeFront("p", inspector);
  await inspector.highlighters.showHighlighterTypeForNode(
    inspector.highlighters.TYPES.BOXMODEL,
    nodeFront
  );

  info("Check the node is highlighted.");
  const highlighterTestFront = await getHighlighterTestFront(inspector.toolbox);
  is(
    await highlighterTestFront.isHighlighting(),
    true,
    "Box Model highlighter is working as expected."
  );
});