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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the selector highlighter is created when clicking on a selector
// icon in the rule view.
const TEST_URI = `
<style type="text/css">
body, p, td {
background: red;
}
</style>
Test the selector highlighter
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
getHighlighterTestHelpers(inspector);
const activeHighlighter = inspector.highlighters.getActiveHighlighter(
inspector.highlighters.TYPES.SELECTOR
);
ok(!activeHighlighter, "No selector highlighter is active");
info("Clicking on a selector icon");
let data = await clickSelectorIcon(view, "body, p, td");
ok(data.highlighter, "The selector highlighter instance was created");
ok(data.isShown, "The selector highlighter was shown");
info("Click on the same icon to disable highlighter");
data = await clickSelectorIcon(view, "body, p, td");
ok(!data.isShown, "The highlighter is not visible anymore");
info("Check that the selector highlighter can be toggled from the keyboard");
const ruleEl = getRuleViewRule(view, "body, p, td", 0);
const selectorContainerEl = ruleEl.querySelector(
".ruleview-selectors-container"
);
const selectorHighlighterIcon = ruleEl.querySelector(
".ruleview-selectorhighlighter"
);
is(
selectorHighlighterIcon.getAttribute("aria-pressed"),
"false",
"selector highlighter icon is not pressed by default"
);
selectorContainerEl.focus();
EventUtils.synthesizeKey("VK_TAB", {}, selectorContainerEl.ownerGlobal);
await waitFor(
() =>
selectorContainerEl.ownerDocument.activeElement ===
selectorHighlighterIcon
);
ok(true, "selector highlighter button can be focused");
const onHighlighterShown = waitForHighlighterTypeShown(
inspector.highlighters.TYPES.SELECTOR
);
EventUtils.synthesizeKey("VK_RETURN", {}, selectorContainerEl.ownerGlobal);
data = await onHighlighterShown;
ok(true, "The selector highlighter was shown from the keyboard");
ok(data.highlighter, "The selector highlighter instance was created");
await waitFor(
() => selectorHighlighterIcon.getAttribute("aria-pressed") === "true"
);
ok(true, "selector highlighter icon is pressed");
const onHighlighterHidden = waitForHighlighterTypeHidden(
inspector.highlighters.TYPES.SELECTOR
);
EventUtils.synthesizeKey("VK_RETURN", {}, selectorContainerEl.ownerGlobal);
await onHighlighterHidden;
ok(true, "The selector highlighter was hidden from the keyboard");
is(
selectorHighlighterIcon.getAttribute("aria-pressed"),
"false",
"selector highlighter icon is no longer pressed"
);
});
|
