Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /wai-aria/role/grid-roles.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<title>Grid Role Verification Tests</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/wai-aria/scripts/aria-utils.js"></script>
</head>
<body>
<!-- ARIA table roles tested in ./table-roles.html -->
<div role="grid" data-testname="role is grid" data-expectedrole="grid" class="ex">
<div role="row" data-testname="role is row (in grid)" data-expectedrole="row" class="ex">
<span role="columnheader" data-testname="role is columnheader (in row, in grid)" data-expectedrole="columnheader" class="ex">x</span>
<span role="columnheader">x</span>
</div>
<div role="row">
<span role="rowheader" data-testname="role is rowheader (in row, in grid)" data-expectedrole="rowheader" class="ex">x</span>
<span role="gridcell" data-testname="role is gridcell (in row, in grid)" data-expectedrole="gridcell" class="ex">x</span>
</div>
</div>
<div role="grid">
<div role="rowgroup" data-testname="role is rowgroup (in grid)" data-expectedrole="rowgroup" class="ex">
<div role="row" data-testname="role is row (in rowgroup, in grid)" data-expectedrole="row" class="ex">
<span role="columnheader" data-testname="role is columnheader (in row, in rowgroup, in grid)" data-expectedrole="columnheader" class="ex">x</span>
<span role="columnheader">x</span>
<span role="columnheader">x</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="rowheader" data-testname="role is rowheader (in row, in rowgroup, in grid)" data-expectedrole="rowheader" class="ex">x</span>
<span role="gridcell" data-testname="role is gridcell (in row, in rowgroup, in grid)" data-expectedrole="gridcell" class="ex">x</span>
<span role="gridcell">x</span>
</div>
</div>
</div>
<!--
CORE-AAM requires that, for elements with roles not contained in the
required context, user agents must ignore the role token and return the
computed role as if the ignored role token had not been included.
-->
<span role="row" data-testname="orphaned row outside the context of table" class="ex-generic">x</span>
<span role="rowgroup" data-testname="orphaned rowgroup outside the context of row" class="ex-generic">x</span>
<div role="gridcell" data-testname="orphaned div with gridcell role outside the context of row" class="ex-generic">x</div>
<button role="gridcell" data-testname="orphaned button with gridcell role outside the context of row" data-expectedrole="button" class="ex">x</button>
<div role="rowheader" data-testname="orphaned rowheader outside the context of row" class="ex-generic">x</div>
<div role="columnheader" data-testname="orphaned columnheader outside the context of row" class="ex-generic">x</div>
<script>
AriaUtils.verifyRolesBySelector(".ex");
AriaUtils.verifyGenericRolesBySelector(".ex-generic");
</script>
</body>
</html>