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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the selector highlighter works for nested rules.
const TEST_URI = `
<style>
main {
background: tomato;
& > h1 {
color: gold;
&#title {
text-decoration: underline;
}
&.title {
outline: 2px solid rebeccapurple;
& em {
color: salmon;
html & {
padding: 1em;
}
}
}
}
.title {
font-weight: 32px;
}
}
</style>
<main>
<h1 class="title" id="title">Selector Highlighter for <em>nested rules</em></h1>
</main>`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("h1", inspector);
const activeHighlighter = inspector.highlighters.getActiveHighlighter(
inspector.highlighters.TYPES.SELECTOR
);
ok(!activeHighlighter, "No selector highlighter is active");
info(`Clicking on "& > h1" selector icon`);
let highlighterData = await clickSelectorIcon(view, "& > h1");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"h1",
"<h1> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
info(`Clicking on "&#title" selector icon`);
highlighterData = await clickSelectorIcon(view, "&#title");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"h1",
"<h1> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
info(`Clicking on "&.title" selector icon`);
highlighterData = await clickSelectorIcon(view, "&.title");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"h1",
"<h1> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
info(`Clicking on "& .title" selector icon`);
highlighterData = await clickSelectorIcon(view, "& .title");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"h1",
"<h1> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
await selectNode("h1 em", inspector);
info(`Clicking on "& em" selector icon`);
highlighterData = await clickSelectorIcon(view, "& em");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"em",
"<em> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
info(`Clicking on "html &" selector icon`);
highlighterData = await clickSelectorIcon(view, "html &");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"em",
"<em> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
});
|
