summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/test/browser_inspector_highlighter-rect_01.js
blob: 9645e25d905e28720a6d47ded56b33f74f759749 (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
/* 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/. */

"use strict";

// Test that the custom rect highlighter provides the right API, ensures that
// the input is valid and that it does create a box with the right dimensions,
// at the right position.

const TEST_URL = "data:text/html;charset=utf-8,Rect Highlighter Test";

add_task(function* () {
  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
  let front = inspector.inspector;
  let highlighter = yield front.getHighlighterByType("RectHighlighter");
  let body = yield getNodeFront("body", inspector);

  info("Make sure the highlighter returned is correct");

  ok(highlighter, "The RectHighlighter custom type was created");
  is(highlighter.typeName, "customhighlighter",
    "The RectHighlighter has the right type");
  ok(highlighter.show && highlighter.hide,
    "The RectHighlighter has the expected show/hide methods");

  info("Check that the highlighter is hidden by default");

  let hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  is(hidden, "true", "The highlighter is hidden by default");

  info("Check that nothing is shown if no rect is passed");

  yield highlighter.show(body);
  hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  is(hidden, "true", "The highlighter is hidden when no rect is passed");

  info("Check that nothing is shown if rect is incomplete or invalid");

  yield highlighter.show(body, {
    rect: {x: 0, y: 0}
  });
  hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  is(hidden, "true", "The highlighter is hidden when the rect is incomplete");

  yield highlighter.show(body, {
    rect: {x: 0, y: 0, width: -Infinity, height: 0}
  });
  hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  is(hidden, "true", "The highlighter is hidden when the rect is invalid (1)");

  yield highlighter.show(body, {
    rect: {x: 0, y: 0, width: 5, height: -45}
  });
  hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  is(hidden, "true", "The highlighter is hidden when the rect is invalid (2)");

  yield highlighter.show(body, {
    rect: {x: "test", y: 0, width: 5, height: 5}
  });
  hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  is(hidden, "true", "The highlighter is hidden when the rect is invalid (3)");

  info("Check that the highlighter is displayed when valid options are passed");

  yield highlighter.show(body, {
    rect: {x: 5, y: 5, width: 50, height: 50}
  });
  hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  ok(!hidden, "The highlighter is displayed");
  let style = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "style", highlighter);
  is(style, "left:5px;top:5px;width:50px;height:50px;",
    "The highlighter is positioned correctly");

  info("Check that the highlighter can be displayed at x=0 y=0");

  yield highlighter.show(body, {
    rect: {x: 0, y: 0, width: 50, height: 50}
  });
  hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  ok(!hidden, "The highlighter is displayed when x=0 and y=0");
  style = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "style", highlighter);
  is(style, "left:0px;top:0px;width:50px;height:50px;",
    "The highlighter is positioned correctly");

  info("Check that the highlighter is hidden when dimensions are 0");

  yield highlighter.show(body, {
    rect: {x: 0, y: 0, width: 0, height: 0}
  });
  hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  is(hidden, "true", "The highlighter is hidden width and height are 0");

  info("Check that a fill color can be passed");

  yield highlighter.show(body, {
    rect: {x: 100, y: 200, width: 500, height: 200},
    fill: "red"
  });
  hidden = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "hidden", highlighter);
  ok(!hidden, "The highlighter is displayed");
  style = yield testActor.getHighlighterNodeAttribute(
    "highlighted-rect", "style", highlighter);
  is(style, "left:100px;top:200px;width:500px;height:200px;background:red;",
    "The highlighter has the right background color");

  yield highlighter.hide();
  yield highlighter.finalize();
});