| <!DOCTYPE HTML> |
| <html> |
| <body> |
| <script src="../resources/js-test-pre.js"></script> |
| |
| <!-- ==================================================================================================== --> |
| <!-- This tests ARIA table role and cell role work as intended --> |
| <!-- ==================================================================================================== --> |
| |
| <div role="grid" data-role="grid" class="ex"> |
| <div role="gridcell" data-role="gridcell" class="ex">data</div> |
| <div role="cell" data-role="cell" class="ex">data2</div> |
| <div role="cell" data-role="cell" class="ex">data3</div> |
| </div> |
| |
| <table role="table" data-role="table" class="ex"> |
| <td role="gridcell" data-role="gridcell" class="ex">data</td> |
| <td data-role="cell" class="ex">data2</td> |
| <td role="cell" data-role="cell" class="ex">data3</td> |
| </table> |
| |
| <div id="console"></div> |
| <script> |
| if (window.testRunner && window.accessibilityController) { |
| description("This tests that table and cell have the correct ARIA roles") |
| var examples = document.querySelectorAll(".ex"); |
| var el, contentAttrRoleString, axElement, computedAriaRole, output, expectedRole, expectation, result, note; |
| for (var i = 0, c = examples.length; i < c; i++) { |
| el = examples[i]; |
| el.id = "ex" + i |
| |
| axElement = accessibilityController.accessibleElementById(el.id); |
| if (!axElement) |
| continue; |
| |
| computedAriaRole = axElement.computedRoleString; |
| |
| contentAttrRoleString = el.getAttribute("role"); |
| note = el.getAttribute("data-note") |
| output = el.tagName.toLowerCase() + (contentAttrRoleString ? ("[role=\""+contentAttrRoleString+"\"]") : "") + (note ? note : ""); |
| output += " -> "; |
| output += computedAriaRole; |
| output += ". "; |
| |
| expectedRole = ""; |
| if (el.hasAttribute("data-role")) { |
| expectedRole = el.getAttribute("data-role"); |
| } |
| |
| expectation = expectedRole; |
| matchedResults = (computedAriaRole == expectedRole) |
| |
| result = document.getElementById('console'); |
| if (matchedResults) { |
| result.innerText += "PASS: " + output + "\n"; |
| } else { |
| result.innerText += "FAIL: " + output + "Expected: " + expectation + ".\n"; |
| } |
| } |
| |
| // Once tests are complete, hide all the example markup. |
| examples = document.querySelectorAll(".ex"); |
| for (var i = 0, c = examples.length; i < c; i++) { |
| el = examples[i]; |
| el.style.display = "none"; |
| } |
| } |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
