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
|
<!DOCTYPE HTML>
<html>
<head>
<title>ShadowRoot tests</title>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
<script type="application/javascript" src="../common.js"></script>
<script type="application/javascript" src="../role.js"></script>
<script type="application/javascript">
let SimpleTest = window.parent.SimpleTest;
let ok = window.parent.ok;
let is = window.parent.is;
function doTest() {
testElm("component", {
role: ROLE_GROUPING,
children: [
{
role: ROLE_PUSHBUTTON,
},
{
role: ROLE_LINK,
},
],
});
// Shadow root boundary between table and row
testElm("table", {
role: ROLE_TABLE,
children: [
{
role: ROLE_ROW,
},
],
});
SimpleTest.finish();
}
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<div role="group" id="component"></div>
<div id="table" role="table" style="display: table;"></div>
<script>
var component = document.getElementById("component");
var shadow = component.attachShadow({mode: "open"});
var button = document.createElement("button");
button.append("Hello");
var a = document.createElement("a");
a.setAttribute("href", "#");
a.append(" World");
shadow.appendChild(button);
shadow.appendChild(a);
var table = document.getElementById("table");
shadow = table.attachShadow({mode: "open"});
shadow.innerHTML = "<div style='display: table-row' role='row'>" +
"<div style='display: table-cell' role='cell'>hi</div>" +
"</div>";
</script>
</body>
|
