зеркало из https://github.com/mozilla/gecko-dev.git
232 строки
5.8 KiB
HTML
232 строки
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>HTML table tests</title>
|
|
<link rel="stylesheet" type="text/css"
|
|
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
|
|
|
<script type="application/javascript"
|
|
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">
|
|
function doTest()
|
|
{
|
|
//////////////////////////////////////////////////////////////////////////
|
|
// grid having rowgroups
|
|
|
|
var accTree =
|
|
{ TABLE: [
|
|
{ GROUPING: [
|
|
{ ROW: [
|
|
{ GRID_CELL: [
|
|
{ TEXT_LEAF: [ ] }
|
|
] }
|
|
] }
|
|
] },
|
|
] };
|
|
|
|
testAccessibleTree("grid", accTree);
|
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
// crazy grids (mad mix of ARIA and HTML tables)
|
|
|
|
accTree = {
|
|
role: ROLE_TABLE,
|
|
children: [
|
|
{ // div@role="row"
|
|
role: ROLE_ROW,
|
|
tagName: "DIV",
|
|
children: [
|
|
{ // caption text leaf
|
|
role: ROLE_TEXT_LEAF,
|
|
name: "caption",
|
|
children: [ ]
|
|
},
|
|
{ // th text leaf
|
|
role: ROLE_TEXT_LEAF,
|
|
name: "header1",
|
|
children: [ ]
|
|
},
|
|
{ // td@role="columnheader"
|
|
role: ROLE_COLUMNHEADER,
|
|
name: "header2",
|
|
children: [ { TEXT_LEAF: [ ] } ]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
testAccessibleTree("crazy_grid1", accTree);
|
|
|
|
accTree = {
|
|
role: ROLE_TABLE,
|
|
children: [
|
|
{ // tr@role="row"
|
|
role: ROLE_ROW,
|
|
tagName: "TR",
|
|
children: [
|
|
{ // td text leaf
|
|
role: ROLE_TEXT_LEAF,
|
|
name: "cell1",
|
|
children: [ ]
|
|
},
|
|
{ // td@role="gridcell"
|
|
role: ROLE_GRID_CELL,
|
|
name: "cell2",
|
|
children: [ { TEXT_LEAF: [ ] } ]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
testAccessibleTree("crazy_grid2", accTree);
|
|
|
|
accTree = {
|
|
role: ROLE_TABLE,
|
|
children: [
|
|
{ // div@role="row"
|
|
role: ROLE_ROW,
|
|
children: [
|
|
{ // div@role="gridcell"
|
|
role: ROLE_GRID_CELL,
|
|
children: [
|
|
{ // text leaf from presentational table
|
|
role: ROLE_TEXT_LEAF,
|
|
name: "cell3",
|
|
children: [ ]
|
|
},
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
testAccessibleTree("crazy_grid3", accTree);
|
|
|
|
accTree = {
|
|
role: ROLE_TABLE,
|
|
children: [
|
|
{ // div@role="row"
|
|
role: ROLE_ROW,
|
|
children: [
|
|
{ // div@role="gridcell"
|
|
role: ROLE_GRID_CELL,
|
|
children: [
|
|
{ // table
|
|
role: ROLE_TABLE,
|
|
children: [
|
|
{ // tr
|
|
role: ROLE_ROW,
|
|
children: [
|
|
{ // td
|
|
role: ROLE_CELL,
|
|
children: [
|
|
{ // caption text leaf of presentational table
|
|
role: ROLE_TEXT_LEAF,
|
|
name: "caption",
|
|
children: [ ]
|
|
},
|
|
{ // td text leaf of presentational table
|
|
role: ROLE_TEXT_LEAF,
|
|
name: "cell4",
|
|
children: [ ]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
testAccessibleTree("crazy_grid4", accTree);
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
addA11yLoadEvent(doTest);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<a target="_blank"
|
|
title="Support ARIA role rowgroup"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=525909">
|
|
Mozilla Bug 525909
|
|
</a>
|
|
<p id="display"></p>
|
|
<div id="content" style="display: none"></div>
|
|
<pre id="test">
|
|
</pre>
|
|
|
|
<div id="grid" role="grid">
|
|
<div role="rowgroup">
|
|
<div role="row">
|
|
<div role="gridcell">cell</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="crazy_grid1" role="grid">
|
|
<div role="row">
|
|
<table role="presentation">
|
|
<caption>caption</caption>
|
|
<tr>
|
|
<th>header1</th>
|
|
<td role="columnheader">header2</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="crazy_grid2" role="grid">
|
|
<table role="presentation">
|
|
<tr role="row">
|
|
<td id="ct_cell1">cell1</td>
|
|
<td role="gridcell">cell2</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="crazy_grid3" role="grid">
|
|
<div role="row">
|
|
<div role="gridcell">
|
|
<table role="presentation">
|
|
<tr>
|
|
<td>cell3</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="crazy_grid4" role="grid">
|
|
<div role="row">
|
|
<div role="gridcell">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<table role="presentation">
|
|
<caption>caption</caption>
|
|
<tr><td>cell4</td></tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|