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
177
178
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test the fontfamily tooltip on longhand properties
const TEST_URI = `
<style type="text/css">
#testElement {
font-family: cursive;
color: #333;
padding-left: 70px;
}
</style>
<div id="testElement">test element</div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, view } = await openRuleView();
await selectNode("#testElement", inspector);
await testRuleView(view, inspector.selection.nodeFront);
info("Opening the computed view");
const onComputedViewReady = inspector.once("computed-view-refreshed");
view = selectComputedView(inspector);
await onComputedViewReady;
await testComputedView(view, inspector.selection.nodeFront);
await testExpandedComputedViewProperty(view, inspector.selection.nodeFront);
});
async function testRuleView(ruleView, nodeFront) {
info("Testing font-family tooltips in the rule view");
const tooltip = ruleView.tooltips.getTooltip("previewTooltip");
const panel = tooltip.panel;
// Check that the rule view has a tooltip and that a XUL panel has
// been created
ok(tooltip, "Tooltip instance exists");
ok(panel, "XUL panel exists");
// Get the font family property inside the rule view
const { valueSpan } = getRuleViewProperty(
ruleView,
"#testElement",
"font-family"
);
// And verify that the tooltip gets shown on this property
valueSpan.scrollIntoView(true);
let previewTooltip = await assertShowPreviewTooltip(ruleView, valueSpan);
let images = panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip contains an image");
ok(
images[0].getAttribute("src").startsWith("data:"),
"Tooltip contains a data-uri image as expected"
);
let dataURL = await getFontFamilyDataURL(valueSpan.textContent, nodeFront);
is(
images[0].getAttribute("src"),
dataURL,
"Tooltip contains the correct data-uri image"
);
await assertTooltipHiddenOnMouseOut(previewTooltip, valueSpan);
// Do the tooltip test again, but now when hovering on the span that
// encloses each and every font family.
const fontFamilySpan = valueSpan.querySelector(".ruleview-font-family");
fontFamilySpan.scrollIntoView(true);
previewTooltip = await assertShowPreviewTooltip(ruleView, fontFamilySpan);
images = panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip contains an image");
ok(
images[0].getAttribute("src").startsWith("data:"),
"Tooltip contains a data-uri image as expected"
);
dataURL = await getFontFamilyDataURL(fontFamilySpan.textContent, nodeFront);
is(
images[0].getAttribute("src"),
dataURL,
"Tooltip contains the correct data-uri image"
);
await assertTooltipHiddenOnMouseOut(previewTooltip, fontFamilySpan);
}
async function testComputedView(computedView, nodeFront) {
info("Testing font-family tooltips in the computed view");
const tooltip = computedView.tooltips.getTooltip("previewTooltip");
const panel = tooltip.panel;
const { valueSpan } = getComputedViewProperty(computedView, "font-family");
valueSpan.scrollIntoView(true);
const previewTooltip = await assertShowPreviewTooltip(
computedView,
valueSpan
);
const images = panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip contains an image");
ok(
images[0].getAttribute("src").startsWith("data:"),
"Tooltip contains a data-uri image as expected"
);
const dataURL = await getFontFamilyDataURL(valueSpan.textContent, nodeFront);
is(
images[0].getAttribute("src"),
dataURL,
"Tooltip contains the correct data-uri image"
);
await assertTooltipHiddenOnMouseOut(previewTooltip, valueSpan);
}
async function testExpandedComputedViewProperty(computedView, nodeFront) {
info(
"Testing font-family tooltips in expanded properties of the " +
"computed view"
);
info("Expanding the font-family property to reveal matched selectors");
const propertyView = getPropertyView(computedView, "font-family");
propertyView.matchedExpanded = true;
await propertyView.refreshMatchedSelectors();
const valueSpan = propertyView.matchedSelectorsContainer.querySelector(
".bestmatch .computed-other-property-value"
);
const tooltip = computedView.tooltips.getTooltip("previewTooltip");
const panel = tooltip.panel;
valueSpan.scrollIntoView(true);
const previewTooltip = await assertShowPreviewTooltip(
computedView,
valueSpan
);
const images = panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip contains an image");
ok(
images[0].getAttribute("src").startsWith("data:"),
"Tooltip contains a data-uri image as expected"
);
const dataURL = await getFontFamilyDataURL(valueSpan.textContent, nodeFront);
is(
images[0].getAttribute("src"),
dataURL,
"Tooltip contains the correct data-uri image"
);
await assertTooltipHiddenOnMouseOut(previewTooltip, valueSpan);
}
function getPropertyView(computedView, name) {
let propertyView = null;
computedView.propertyViews.some(function (view) {
if (view.name == name) {
propertyView = view;
return true;
}
return false;
});
return propertyView;
}
|
