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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
<!DOCTYPE html>
<html>
<head>
<title>Whitespace text accessible creation/destruction</title>
<link rel="stylesheet" type="text/css"
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../role.js"></script>
<script type="application/javascript"
src="../events.js"></script>
<script type="application/javascript">
// //////////////////////////////////////////////////////////////////////////
// Invokers
/**
* Middle image accessible removal results in text accessible removal.
*
* Before:
* DOM: whitespace img1 whitespace img2 whitespace img3 whitespace,
* a11y: img1 whitespace img2 whitespace img3
* After:
* DOM: whitespace img1 whitespace whitespace img3 whitespace,
* a11y: img1 whitespace img3
*/
function removeImg() {
this.containerNode = getNode("container1");
this.imgNode = getNode("img1");
this.img = getAccessible(this.imgNode);
this.text = this.img.nextSibling;
this.eventSeq = [
new invokerChecker(EVENT_HIDE, this.img),
new invokerChecker(EVENT_HIDE, this.text),
new invokerChecker(EVENT_REORDER, this.containerNode),
];
this.finalCheck = function textLeafUpdate_finalCheck() {
var tree =
{ SECTION: [
{ GRAPHIC: [] },
{ TEXT_LEAF: [] },
{ GRAPHIC: [] },
] };
testAccessibleTree(this.containerNode, tree);
};
this.invoke = function setOnClickAttr_invoke() {
var tree =
{ SECTION: [
{ GRAPHIC: [] },
{ TEXT_LEAF: [] },
{ GRAPHIC: [] },
{ TEXT_LEAF: [] },
{ GRAPHIC: [] },
] };
testAccessibleTree(this.containerNode, tree);
this.containerNode.removeChild(this.imgNode);
};
this.getID = function setOnClickAttr_getID() {
return "remove middle img";
};
}
/**
* Append image making the whitespace visible and thus accessible.
* Note: images and whitespaces are on different leves of accessible trees,
* so that image container accessible update doesn't update the tree
* of whitespace container.
*
* Before:
* DOM: whitespace emptylink whitespace linkwithimg whitespace
* a11y: emptylink linkwithimg
* After:
* DOM: whitespace linkwithimg whitespace linkwithimg whitespace
* a11y: linkwithimg whitespace linkwithimg
*/
function insertImg() {
this.containerNode = getNode("container2");
this.topNode = this.containerNode.parentNode;
this.textNode = this.containerNode.nextSibling;
this.imgNode = document.createElement("img");
this.imgNode.setAttribute("src", "../moz.png");
this.eventSeq = [
new asyncInvokerChecker(EVENT_SHOW, getAccessible, this.textNode),
new asyncInvokerChecker(EVENT_SHOW, getAccessible, this.imgNode),
new orderChecker(),
new invokerChecker(EVENT_REORDER, this.topNode),
];
this.invoke = function insertImg_invoke() {
var tree =
{ SECTION: [
{ LINK: [] },
{ LINK: [
{ GRAPHIC: [] },
] },
] };
testAccessibleTree(this.topNode, tree);
this.containerNode.appendChild(this.imgNode);
};
this.finalCheck = function insertImg_finalCheck() {
var tree =
{ SECTION: [
{ LINK: [
{ GRAPHIC: [ ] },
] },
{ TEXT_LEAF: [ ] },
{ LINK: [
{ GRAPHIC: [ ] },
] },
] };
testAccessibleTree(this.topNode, tree);
};
this.getID = function appendImg_getID() {
return "insert img into internal container";
};
}
function dontCreateMapWhiteSpace() {
const tree = { SECTION: [ { role: ROLE_TEXT_LEAF, name: "x" } ] };
testAccessibleTree("container3", tree);
getNode("c3_inner").style.textAlign = "center";
document.body.offsetTop; // Flush layout.
window.windowUtils.advanceTimeAndRefresh(100);
testAccessibleTree("container3", tree);
window.windowUtils.restoreNormalRefresh();
}
// //////////////////////////////////////////////////////////////////////////
// Test
// gA11yEventDumpID = "eventdump"; // debug stuff
// gA11yEventDumpToConsole = true;
var gQueue = null;
function doTest() {
dontCreateMapWhiteSpace();
gQueue = new eventQueue();
gQueue.push(new removeImg());
gQueue.push(new insertImg());
gQueue.invoke(); // SimpleTest.finish() will be called in the end
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<a target="_blank"
title="Make sure accessible tree is correct when rendered text is changed"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=625652">
Mozilla Bug 625652
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<!-- Whitespace between the div and img tags will be inconsistent depending
on the image cache state and what optimizations layout was able to
apply. -->
<div id="container1"><img src="../moz.png"> <img id="img1" src="../moz.png"> <img src="../moz.png"></div>
<div><a id="container2"></a> <a><img src="../moz.png"></a></div>
<div id="container3">
<div id="c3_inner" role="presentation">
x<map> </map>
</div>
</div>
<div id="eventdump"></div>
</body>
</html>
|
