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
179
180
181
|
/* 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";
// Checks for the AccessibleHighlighter's and XULWindowHighlighter's infobar components.
add_task(async function () {
await BrowserTestUtils.withNewTab(
{
gBrowser,
url: MAIN_DOMAIN + "doc_accessibility_infobar.html",
},
async function (browser) {
await SpecialPowers.spawn(browser, [], async function () {
const { require } = ChromeUtils.importESModule(
"resource://devtools/shared/loader/Loader.sys.mjs"
);
const {
HighlighterEnvironment,
} = require("resource://devtools/server/actors/highlighters.js");
const {
AccessibleHighlighter,
} = require("resource://devtools/server/actors/highlighters/accessible.js");
/**
* Get whether or not infobar container is hidden.
*
* @param {Object} infobar
* Accessible highlighter's infobar component.
* @return {String|null} If the infobar container is hidden.
*/
function isContainerHidden(infobar) {
return !!infobar
.getElement("infobar-container")
.getAttribute("hidden");
}
/**
* Get name of accessible object.
*
* @param {Object} infobar
* Accessible highlighter's infobar component.
* @return {String} The text content of the infobar-name element.
*/
function getName(infobar) {
return infobar.getTextContent("infobar-name");
}
/**
* Get role of accessible object.
*
* @param {Object} infobar
* Accessible highlighter's infobar component.
* @return {String} The text content of the infobar-role element.
*/
function getRole(infobar) {
return infobar.getTextContent("infobar-role");
}
/**
* Checks for updated content for an infobar with valid bounds.
*
* @param {Object} infobar
* Accessible highlighter's infobar component.
* @param {Object} options
* Options to pass for the highlighter's show method.
* Available options:
* - {String} role
* Role value of the accessible.
* - {String} name
* Name value of the accessible.
* - {Boolean} shouldBeHidden
* If the infobar component should be hidden.
*/
function checkInfobar(infobar, { shouldBeHidden, role, name }) {
is(
isContainerHidden(infobar),
shouldBeHidden,
"Infobar's hidden state is correct."
);
if (shouldBeHidden) {
return;
}
is(getRole(infobar), role, "infobarRole text content is correct");
is(
getName(infobar),
`"${name}"`,
"infoBarName text content is correct"
);
}
/**
* Checks for updated content of an infobar with valid bounds.
*
* @param {Element} node
* Node to check infobar content on.
* @param {Object} highlighter
* Accessible highlighter.
*/
function testInfobar(node, highlighter) {
const infobar = highlighter.accessibleInfobar;
const bounds = {
x: 0,
y: 0,
w: 250,
h: 100,
};
info("Check that infobar is shown with valid bounds.");
highlighter.show(node, {
...bounds,
role: "button",
name: "Accessible Button",
});
checkInfobar(infobar, {
role: "button",
name: "Accessible Button",
shouldBeHidden: false,
});
highlighter.hide();
info("Check that infobar is hidden after .hide() is called.");
checkInfobar(infobar, { shouldBeHidden: true });
info("Check to make sure content is updated with new options.");
highlighter.show(node, {
...bounds,
name: "Test link",
role: "link",
});
checkInfobar(infobar, {
name: "Test link",
role: "link",
shouldBeHidden: false,
});
highlighter.hide();
}
// Start testing. First, create highlighter environment and initialize.
const env = new HighlighterEnvironment();
env.initFromWindow(content.window);
// Wait for loading highlighter environment content to complete before creating the
// highlighter.
await new Promise(resolve => {
const doc = env.document;
function onContentLoaded() {
if (
doc.readyState === "interactive" ||
doc.readyState === "complete"
) {
resolve();
} else {
doc.addEventListener("DOMContentLoaded", onContentLoaded, {
once: true,
});
}
}
onContentLoaded();
});
// Now, we can test the Infobar and XULWindowInfobar components with their
// respective highlighters.
const node = content.document.createElement("div");
content.document.body.append(node);
info("Checks for Infobar's show method");
const highlighter = new AccessibleHighlighter(env);
await highlighter.isReady;
testInfobar(node, highlighter);
});
}
);
});
|
