| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/js-test-pre.js"></script> |
| </head> |
| <body id="body"> |
| |
| <div id="grid" role="grid" aria-colcount="16" aria-rowcount="30"> |
| <div role="rowgroup"> |
| <div role="row" aria-rowindex="7"> |
| <span id="cell1" role="columnheader" aria-colindex="2">First Name</span> |
| <span role="columnheader" aria-colindex="3">Last Name</span> |
| <span role="columnheader" aria-colindex="4">Company</span> |
| <span role="columnheader" aria-colindex="5">Address</span> |
| </div> |
| </div> |
| <div role="rowgroup"> |
| <div role="row" aria-rowindex="8"> |
| <span role="gridcell" aria-colindex="2" aria-rowindex="8">Fred</span> |
| <span role="gridcell" aria-colindex="3" aria-rowindex="8">Jackson</span> |
| <span id="cell2" role="gridcell" aria-colindex="4" aria-rowindex="8" aria-rowspan="2">Acme, Inc.</span> |
| <span id="cell3" role="gridcell" aria-colindex="5" aria-rowindex="8" aria-rowspan="0">123 Broad St.</span> |
| </div> |
| <div role="row" aria-rowindex="9"> |
| <span role="gridcell" aria-colindex="2">Sara</span> |
| <span role="gridcell" aria-colindex="3">James</span> |
| </div> |
| </div> |
| <div role="rowgroup"> |
| <div role="row" aria-rowindex="15"> |
| <span role="gridcell" aria-colindex="2">Footer 1</span> |
| <span role="gridcell" aria-colindex="3">Footer 2</span> |
| <span role="gridcell" aria-colindex="4" aria-colspan="2">Footer 3</span> |
| </div> |
| </div> |
| </div> |
| |
| <div id="grid2" role="grid" aria-colcount="16"> |
| <div role="rowgroup"> |
| <div role="row" aria-colindex="2"> |
| <span role="columnheader">Name</span> |
| <span id="cell4" role="columnheader">Company</span> |
| <span id="cell5" role="columnheader" aria-colspan="3">Address</span> |
| </div> |
| </div> |
| </div> |
| |
| <div id="grid3" role="grid"> |
| <div role="row"> |
| <span role="gridcell">Cell</span> |
| <span id="cell6" role="gridcell" aria-rowspan="0">Span Cell</span> |
| </div> |
| <div role="row"> |
| <span role="gridcell">Cell</span> |
| </div> |
| </div> |
| |
| <table role="grid"> |
| <tr> |
| <td>January</td> |
| <td id="cell7" rowspan="2" aria-rowspan="3">$100</td> |
| </tr> |
| <tr><td>February</td></tr> |
| </table> |
| |
| <script> |
| |
| description("This tests that attributes related to aria table/grid are working correctly."); |
| |
| if (window.accessibilityController) { |
| |
| var grid = accessibilityController.accessibleElementById("grid"); |
| var cell1 = accessibilityController.accessibleElementById("cell1"); |
| var cell2 = accessibilityController.accessibleElementById("cell2"); |
| var cell3 = accessibilityController.accessibleElementById("cell3"); |
| var cell4 = accessibilityController.accessibleElementById("cell4"); |
| var cell5 = accessibilityController.accessibleElementById("cell5"); |
| var cell6 = accessibilityController.accessibleElementById("cell6"); |
| var cell7 = accessibilityController.accessibleElementById("cell7"); |
| |
| // aria-colcount and aria-rowcount |
| shouldBe("grid.numberAttributeValue('AXARIAColumnCount')", "16"); |
| shouldBe("grid.numberAttributeValue('AXARIARowCount')", "30"); |
| if (accessibilityController.platformName == "atk") { |
| shouldBe("grid.rowCount", "30"); |
| shouldBe("grid.columnCount", "16"); |
| } else { |
| shouldBe("grid.rowCount", "4"); |
| shouldBe("grid.columnCount", "4"); |
| } |
| |
| // aria-colindex and aria-rowindex |
| shouldBe("cell1.numberAttributeValue('AXARIAColumnIndex')", "2"); |
| shouldBe("cell1.numberAttributeValue('AXARIARowIndex')", "7"); |
| shouldBe("cell2.numberAttributeValue('AXARIAColumnIndex')", "4"); |
| shouldBe("cell2.numberAttributeValue('AXARIARowIndex')", "8"); |
| // aria-colindex from parent row |
| shouldBe("cell4.numberAttributeValue('AXARIAColumnIndex')", "3"); |
| |
| // aria-colspan and aria-rowspan, including aria-rowspan="0" |
| if (accessibilityController.platformName == "atk") { |
| // 0-based because these methods use the AtkTableCell interface |
| shouldBe("cell2.rowIndexRange()", "'{7, 2}'"); |
| shouldBe("cell5.columnIndexRange()", "'{3, 3}'"); |
| shouldBe("cell3.rowIndexRange()", "'{7, 2}'"); |
| } else { |
| shouldBe("cell2.rowIndexRange()", "'{1, 2}'"); |
| shouldBe("cell5.columnIndexRange()", "'{2, 3}'"); |
| shouldBe("cell3.rowIndexRange()", "'{1, 2}'"); |
| } |
| shouldBe("cell6.rowIndexRange()", "'{0, 2}'"); |
| // use rowspan for native table |
| shouldBe("cell7.rowIndexRange()", "'{0, 2}'"); |
| } |
| |
| </script> |
| |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
