table-roles.html (4978B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Table 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 <p>Tests <a href="https://w3c.github.io/aria/#table">table</a> and related roles.</p> 14 15 <!-- HTML <table> Elements Testing --> 16 17 <!-- <caption> -> wpt/html-aam/table-roles.html --> 18 19 <!-- <table> -> wpt/html-aam/table-roles.html --> 20 <!-- <tbody> -> wpt/html-aam/table-roles.html --> 21 22 <!-- <td> -> wpt/html-aam/table-roles.html --> 23 24 <!-- <tfoot> -> wpt/html-aam/table-roles.html --> 25 26 <!-- <th> -> wpt/html-aam/table-roles.html --> 27 <!-- <thead> -> wpt/html-aam/table-roles.html --> 28 29 <!-- <tr> -> wpt/html-aam/table-roles.html --> 30 31 32 <!-- ARIA Grid Elements Testing --> 33 34 <!-- Grid roles tested in ./grid-roles.html --> 35 36 37 <!-- ARIA Table Roles Testing --> 38 39 <!-- caption --> 40 <div role="table"> 41 <div role="caption" data-testname="div role is caption (in div with table role)" data-expectedrole="caption" class="ex">x</div> 42 </div> 43 44 <p role="caption" data-testname="orphan p role is caption" data-expectedrole="caption" class="ex">x</p> 45 46 <!-- cell --> 47 <div role="table"> 48 <div role="rowgroup"> 49 <div role="row"> 50 <span role="columnheader">x</span> 51 <span role="columnheader">x</span> 52 </div> 53 </div> 54 <div role="rowgroup"> 55 <div role="row"> 56 <span role="cell" data-testname="span role is cell (in div with row role, in div with rowgroup role, in div with table role)" data-expectedrole="cell" class="ex">x</span> 57 <span role="cell">x</span> 58 </div> 59 </div> 60 </div> 61 62 <span role="cell" data-testname="orphan span role is cell" data-expectedrole="cell" class="ex">x</span> 63 64 <!-- columnheader --> 65 <div role="table"> 66 <div role="rowgroup"> 67 <div role="row"> 68 <span role="columnheader" data-testname="span role is columnheader (in div with row role, in div with rowgroup role, in div with table role)" data-expectedrole="columnheader" class="ex">x</span> 69 <span role="columnheader">x</span> 70 <span role="columnheader">x</span> 71 </div> 72 </div> 73 <div role="rowgroup"> 74 <div role="row"> 75 <span role="rowheader">x</span> 76 <span role="cell">x</span> 77 <span role="cell">x</span> 78 </div> 79 </div> 80 </div> 81 82 <!-- row --> 83 <div role="table"> 84 <div role="rowgroup"> 85 <div role="row" data-testname="div role is row (in div with rowgroup role, in div with table role)" data-expectedrole="row" class="ex"> 86 <span role="columnheader">x</span> 87 </div> 88 </div> 89 <div role="rowgroup"> 90 <div role="row"> 91 <span role="cell">x</span> 92 </div> 93 </div> 94 </div> 95 96 <!-- rowgroup --> 97 <div role="table"> 98 <div role="rowgroup" data-testname="div role is rowgroup (in div with table role)" data-expectedrole="rowgroup" class="ex"> 99 <div role="row"> 100 <span role="columnheader">x</span> 101 <span role="columnheader">x</span> 102 </div> 103 </div> 104 <div role="rowgroup"> 105 <div role="row"> 106 <span role="cell">x</span> 107 <span role="cell">x</span> 108 </div> 109 </div> 110 </div> 111 112 <!-- rowheader --> 113 <div role="table"> 114 <div role="rowgroup"> 115 <div role="row"> 116 <span role="columnheader">x</span> 117 <span role="columnheader">x</span> 118 <span role="columnheader">x</span> 119 </div> 120 </div> 121 <div role="rowgroup"> 122 <div role="row"> 123 <span role="rowheader" data-testname="role is rowheader (in div with row role, in div with rowgroup role, in div with table role)" data-expectedrole="rowheader" class="ex">x</span> 124 <span role="cell">x</span> 125 <span role="cell">x</span> 126 <span role="cell">x</span> 127 </div> 128 </div> 129 </div> 130 131 <!-- table --> 132 <div role="table" data-testname="div role is table" data-expectedrole="table" class="ex"> 133 <div role="row"> 134 <span role="columnheader">x</span> 135 <span role="columnheader">x</span> 136 </div> 137 <div role="row"> 138 <span role="cell">x</span> 139 <span role="cell">x</span> 140 </div> 141 </div> 142 143 <script> 144 AriaUtils.verifyRolesBySelector(".ex"); 145 </script> 146 147 </body> 148 </html>