grid-roles.html (2254B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Grid Role Verification Tests</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 <body> 13 14 <p>Tests <a href="https://w3c.github.io/aria/#grid">grid</a> and related roles.</p> 15 16 <!-- ARIA table roles tested in ./table-roles.html --> 17 18 <div role="grid" data-testname="role is grid" data-expectedrole="grid" class="ex"> 19 <div role="row" data-testname="role is row (in grid)" data-expectedrole="row" class="ex"> 20 <span role="columnheader" data-testname="role is columnheader (in row, in grid)" data-expectedrole="columnheader" class="ex">x</span> 21 <span role="columnheader">x</span> 22 </div> 23 <div role="row"> 24 <span role="rowheader" data-testname="role is rowheader (in row, in grid)" data-expectedrole="rowheader" class="ex">x</span> 25 <span role="gridcell" data-testname="role is gridcell (in row, in grid)" data-expectedrole="gridcell" class="ex">x</span> 26 </div> 27 </div> 28 29 <div role="grid"> 30 <div role="rowgroup" data-testname="role is rowgroup (in grid)" data-expectedrole="rowgroup" class="ex"> 31 <div role="row" data-testname="role is row (in rowgroup, in grid)" data-expectedrole="row" class="ex"> 32 <span role="columnheader" data-testname="role is columnheader (in row, in rowgroup, in grid)" data-expectedrole="columnheader" class="ex">x</span> 33 <span role="columnheader">x</span> 34 <span role="columnheader">x</span> 35 </div> 36 </div> 37 <div role="rowgroup"> 38 <div role="row"> 39 <span role="rowheader" data-testname="role is rowheader (in row, in rowgroup, in grid)" data-expectedrole="rowheader" class="ex">x</span> 40 <span role="gridcell" data-testname="role is gridcell (in row, in rowgroup, in grid)" data-expectedrole="gridcell" class="ex">x</span> 41 <span role="gridcell">x</span> 42 </div> 43 </div> 44 </div> 45 46 <script> 47 AriaUtils.verifyRolesBySelector(".ex"); 48 </script> 49 50 </body> 51 </html>