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
|
/* 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";
/* import-globals-from ../../mochitest/role.js */
loadScripts({ name: "role.js", dir: MOCHITESTS_DIR });
const snippet1 = `
<style>
#container {
width: 150px;
height: 150px;
background: lightblue;
}
.hidden {
content-visibility: hidden;
}
.auto {
content-visibility: auto;
}
</style>
<div id="container">
<div class="hidden" id="hidden-target">
hidden target
<div id="hidden-child">
hidden child
</div>
</div>
<div class="auto" id="auto-target">
auto target
<div id="auto-child">
auto child
</div>
</div>
</div>
`;
add_setup(async function () {
await SpecialPowers.pushPrefEnv({
set: [["layout.css.content-visibility.enabled", true]],
});
});
// Check if the element specified with `content-visibility` property is accessible
addAccessibleTask(
snippet1,
async function (browser, accDoc) {
const container = findAccessibleChildByID(accDoc, "container");
ok(
findAccessibleChildByID(container, "hidden-target"),
"hidden-target is accessible"
);
ok(
findAccessibleChildByID(container, "auto-target"),
"auto-target is accessible"
);
// The test checks if the child element of the element specified with
// `content-visibility: hidden` is ignored from a11y tree
let target = findAccessibleChildByID(accDoc, "hidden-target");
ok(
!findAccessibleChildByID(target, "hidden-child"),
"Children of hidden-target is not accessible"
);
// The test checks if the child element of the element specified with
// `content-visibility: auto` is showen in a11y tree
target = findAccessibleChildByID(accDoc, "auto-target");
ok(
findAccessibleChildByID(target, "auto-child"),
"Children of auto-target is accessible"
);
},
{ iframe: true, remoteIframe: true, chrome: true }
);
// Check if the element having `display: contents` and a child of `content-visibility: hidden` element isn't accessible
const snippet2 = `
<style>
#target {
width: 150px;
height: 150px;
background-color: lightblue;
}
#child {
width: 100px;
height: 100px;
background-color: lightgreen;
}
#grandchild {
width: 50px;
height: 50px;
background-color: red;
}
.hidden {
content-visibility: hidden;
}
.display-contents {
display: contents;
}
</style>
<div id="target" class="hidden">
<div id="child" class="display-contents">
<div id="grandchild"></div>
</div>
</div>
`;
addAccessibleTask(
snippet2,
async function (browser, accDoc) {
const target = findAccessibleChildByID(accDoc, "target");
ok(
!findAccessibleChildByID(target, "child"),
"Element having `display: contents` and a child of `content-visibility: hidden` element isn't accessible"
);
testAccessibleTree(target, { SECTION: [] });
},
{ iframe: true, remoteIframe: true, chrome: true }
);
|
