зеркало из https://github.com/mozilla/gecko-dev.git
147 строки
4.0 KiB
HTML
147 строки
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ARIA grid based on HTML table tests</title>
|
|
<link rel="stylesheet" type="text/css"
|
|
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
|
|
|
<style>
|
|
td:focus {
|
|
background-color: lightblue;
|
|
}
|
|
th {
|
|
-moz-box-align: center;
|
|
-moz-box-pack: center;
|
|
border: 2px solid;
|
|
-moz-border-top-colors: ThreeDHighlight ThreeDLightShadow;
|
|
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
|
|
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
|
|
-moz-border-left-colors: ThreeDHighlight ThreeDLightShadow;
|
|
background-color: -moz-Dialog;
|
|
color: -moz-DialogText;
|
|
padding: 0px 4px;
|
|
}
|
|
</style>
|
|
|
|
<script type="application/javascript"
|
|
src="chrome://mochikit/content/MochiKit/packed.js"></script>
|
|
<script type="application/javascript"
|
|
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
<script type="application/javascript"
|
|
src="chrome://mochikit/content/a11y/accessible/grid.js"></script>
|
|
|
|
<script type="application/javascript"
|
|
src="chrome://mochikit/content/a11y/accessible/common.js"></script>
|
|
<script type="application/javascript"
|
|
src="chrome://mochikit/content/a11y/accessible/role.js"></script>
|
|
|
|
<script type="application/javascript">
|
|
var gGrid = null;
|
|
function doTest()
|
|
{
|
|
gGrid = new grid("grid");
|
|
|
|
// Test accessible hierarchy of ARIA grid.
|
|
var accTree = {
|
|
role: ROLE_TABLE,
|
|
children: [
|
|
{
|
|
role: ROLE_TEXT_CONTAINER, // thead
|
|
children: [
|
|
{
|
|
role: ROLE_ROW,
|
|
children: [
|
|
{
|
|
role: ROLE_COLUMNHEADER
|
|
},
|
|
{
|
|
role: ROLE_COLUMNHEADER
|
|
},
|
|
{
|
|
role: ROLE_COLUMNHEADER
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
role: ROLE_TEXT_CONTAINER, // tbody
|
|
children: [
|
|
{
|
|
role: ROLE_ROW,
|
|
children: [
|
|
{
|
|
role: ROLE_GRID_CELL
|
|
},
|
|
{
|
|
role: ROLE_GRID_CELL
|
|
},
|
|
{
|
|
role: ROLE_GRID_CELL
|
|
}
|
|
]
|
|
},
|
|
{
|
|
role: ROLE_ROW,
|
|
children: [
|
|
{
|
|
role: ROLE_GRID_CELL
|
|
},
|
|
{
|
|
role: ROLE_GRID_CELL
|
|
},
|
|
{
|
|
role: ROLE_GRID_CELL
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
if (LINUX)
|
|
todo(false, "No tests on linux because of different hierarchies.");
|
|
else
|
|
testAccessibleTree("grid", accTree);
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
addA11yLoadEvent(doTest);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=491683"
|
|
title="ARIA grid based on HTML table">Mozilla Bug 491683</a>
|
|
<p id="display"></p>
|
|
<div id="content" style="display: none"></div>
|
|
<pre id="test">
|
|
</pre>
|
|
|
|
<table role="grid" id="grid" border="1" cellpadding="10" cellspacing="0">
|
|
<thead>
|
|
<tr role="row">
|
|
<th role="columnheader">subject</td>
|
|
<th role="columnheader">sender</th>
|
|
<th role="columnheader">date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr role="row">
|
|
<td role="gridcell" tabindex="0">about everything</td>
|
|
<td role="gridcell">president</td>
|
|
<td role="gridcell">today</td>
|
|
</tr>
|
|
<tr role="row">
|
|
<td role="gridcell">new bugs</td>
|
|
<td role="gridcell">mozilla team</td>
|
|
<td role="gridcell">today</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</body>
|
|
</html>
|