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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests various output of the computed-view's getNodeInfo method.
// This method is used by the HighlightersOverlay and TooltipsOverlay on mouseover to
// decide which highlighter or tooltip to show when hovering over a value/name/selector
// if any.
//
// For instance, browser_ruleview_selector-highlighter_01.js and
// browser_ruleview_selector-highlighter_02.js test that the selector
// highlighter appear when hovering over a selector in the rule-view.
// Since the code to make this work for the computed-view is 90% the same,
// there is no need for testing it again here.
// This test however serves as a unit test for getNodeInfo.
const {
VIEW_NODE_SELECTOR_TYPE,
VIEW_NODE_PROPERTY_TYPE,
VIEW_NODE_VALUE_TYPE,
VIEW_NODE_IMAGE_URL_TYPE,
} = require("resource://devtools/client/inspector/shared/node-types.js");
const TEST_URI = `
<style type="text/css">
body {
background: red;
color: white;
}
div {
background: green;
}
div div {
background-color: yellow;
background-image: url(chrome://branding/content/icon64.png);
color: red;
}
</style>
<div><div id="testElement">Test element</div></div>
`;
// Each item in this array must have the following properties:
// - desc {String} will be logged for information
// - getHoveredNode {Generator Function} received the computed-view instance as
// argument and must return the node to be tested
// - assertNodeInfo {Function} should check the validity of the nodeInfo
// argument it receives
const TEST_DATA = [
{
desc: "Testing a null node",
getHoveredNode() {
return null;
},
assertNodeInfo(nodeInfo) {
is(nodeInfo, null);
},
},
{
desc: "Testing a useless node",
getHoveredNode(view) {
return view.element;
},
assertNodeInfo(nodeInfo) {
is(nodeInfo, null);
},
},
{
desc: "Testing a property name",
getHoveredNode(view) {
return getComputedViewProperty(view, "color").nameSpan;
},
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE);
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
is(nodeInfo.value.property, "color");
is(nodeInfo.value.value, "rgb(255, 0, 0)");
},
},
{
desc: "Testing a property value",
getHoveredNode(view) {
return getComputedViewProperty(view, "color").valueSpan;
},
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
is(nodeInfo.value.property, "color");
is(nodeInfo.value.value, "rgb(255, 0, 0)");
},
},
{
desc: "Testing an image url",
getHoveredNode(view) {
const { valueSpan } = getComputedViewProperty(view, "background-image");
return valueSpan.querySelector(".theme-link");
},
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE);
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
is(nodeInfo.value.property, "background-image");
is(nodeInfo.value.value, 'url("chrome://branding/content/icon64.png")');
is(nodeInfo.value.url, "chrome://branding/content/icon64.png");
},
},
{
desc: "Testing a matched rule selector (bestmatch)",
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "background-color");
return el.querySelector(".bestmatch");
},
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
is(nodeInfo.value, "div div");
},
},
{
desc: "Testing a matched rule selector (matched)",
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "background-color");
return el.querySelector(".matched");
},
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
is(nodeInfo.value, "div");
},
},
{
desc: "Testing a matched rule selector (parentmatch)",
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "color");
return el.querySelector(".parentmatch");
},
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
is(nodeInfo.value, "body");
},
},
{
desc: "Testing a matched rule value",
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "color");
return el.querySelector(".computed-other-property-value");
},
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
is(nodeInfo.value.property, "color");
is(nodeInfo.value.value, "red");
},
},
{
desc: "Testing a matched rule stylesheet link",
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "color");
return el.querySelector(".rule-link .theme-link");
},
assertNodeInfo(nodeInfo) {
is(nodeInfo, null);
},
},
];
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openComputedView();
await selectNode("#testElement", inspector);
for (const { desc, getHoveredNode, assertNodeInfo } of TEST_DATA) {
info(desc);
const nodeInfo = view.getNodeInfo(await getHoveredNode(view));
assertNodeInfo(nodeInfo);
}
});
|
