summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/markup/test/browser_markup_whitespace.js
blob: 40fed42945316e1840ff184d20230b3a3135ae49 (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
/* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test that whitespace text nodes do show up in the markup-view when needed.

const TEST_URL = URL_ROOT + "doc_markup_whitespace.html";

add_task(function* () {
  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
  let {markup} = inspector;

  yield markup.expandAll();

  info("Verify the number of child nodes and child elements in body");

  // Body has 5 element children, but there are 6 text nodes in there too, they come from
  // the HTML file formatting (spaces and carriage returns).
  let {numNodes, numChildren} = yield testActor.getNodeInfo("body");
  is(numNodes, 11, "The body node has 11 child nodes (includes text nodes)");
  is(numChildren, 5, "The body node has 5 child elements (only element nodes)");

  // In body, there are only block-level elements, so whitespace text nodes do not have
  // layout, so they should be skipped in the markup-view.
  info("Check that the body's whitespace text node children aren't shown");
  let bodyContainer = markup.getContainer(inspector.selection.nodeFront);
  let childContainers = bodyContainer.getChildContainers();
  is(childContainers.length, 5,
     "Only the element nodes are shown in the markup view");

  // div#inline has 3 element children, but there are 4 text nodes in there too, like in
  // body, they come from spaces and carriage returns in the HTML file.
  info("Verify the number of child nodes and child elements in div#inline");
  ({numNodes, numChildren} = yield testActor.getNodeInfo("#inline"));
  is(numNodes, 7, "The div#inline node has 7 child nodes (includes text nodes)");
  is(numChildren, 3, "The div#inline node has 3 child elements (only element nodes)");

  // Within the inline formatting context in div#inline, the whitespace text nodes between
  // the images have layout, so they should appear in the markup-view.
  info("Check that the div#inline's whitespace text node children are shown");
  yield selectNode("#inline", inspector);
  let divContainer = markup.getContainer(inspector.selection.nodeFront);
  childContainers = divContainer.getChildContainers();
  is(childContainers.length, 5,
     "Both the element nodes and some text nodes are shown in the markup view");

  // div#pre has 2 element children, but there are 3 text nodes in there too, like in
  // div#inline, they come from spaces and carriage returns in the HTML file.
  info("Verify the number of child nodes and child elements in div#pre");
  ({numNodes, numChildren} = yield testActor.getNodeInfo("#pre"));
  is(numNodes, 5, "The div#pre node has 5 child nodes (includes text nodes)");
  is(numChildren, 2, "The div#pre node has 2 child elements (only element nodes)");

  // Within the inline formatting context in div#pre, the whitespace text nodes between
  // the images have layout, so they should appear in the markup-view, but since
  // white-space is set to pre, then the whitespace text nodes before and after the first
  // and last image should also appear.
  info("Check that the div#pre's whitespace text node children are shown");
  yield selectNode("#pre", inspector);
  divContainer = markup.getContainer(inspector.selection.nodeFront);
  childContainers = divContainer.getChildContainers();
  is(childContainers.length, 5,
     "Both the element nodes and all text nodes are shown in the markup view");
});