| <!DOCTYPE HTML> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| .hideAllContainers .container { |
| display: none; |
| } |
| </style> |
| |
| <div id="link1" class="container" tabIndex=0 role="link"> |
| <p>1</p> |
| <table> |
| <tr><td>2</td></tr> |
| <tr><td style="visibility: hidden">3</td></tr> |
| <tr><td style="display:none">4</td></tr> |
| <tr style="visibility: hidden"><td>5</td></tr> |
| <tr style="display: none"><td>6</td></tr> |
| </table> |
| <p>7</p> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axLink1 = accessibilityController.accessibleElementById("link1"); |
| assert_equals(axLink1.name, "1 2 7"); |
| }, "Visibility: 'hidden' and display: 'none' inside ARIA link"); |
| </script> |
| |
| <div class="container"> |
| <input id="input2" aria-labelledby="label2"> |
| |
| <div id="label2"> |
| <p>1</p> |
| <table> |
| <tr><td>2</td></tr> |
| <tr><td style="visibility: hidden">3</td></tr> |
| <tr><td style="display:none">4</td></tr> |
| <tr style="visibility: hidden"><td>5</td></tr> |
| <tr style="display: none"><td>6</td></tr> |
| </table> |
| <p>7</p> |
| </div> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axInput2 = accessibilityController.accessibleElementById("input2"); |
| assert_equals(axInput2.name, "1 2 7"); |
| }, "Visibility: 'hidden' and display: 'none' inside aria-labelledby label subtree"); |
| </script> |
| |
| <div class="container"> |
| <input id="input3" aria-labelledby="3a 3b 3c 3d 3e 3f 3g"> |
| |
| <p id="3a">1</p> |
| <table> |
| <tr><td id="3b">2</td></tr> |
| <tr><td id="3c" style="visibility: hidden">3</td></tr> |
| <tr><td id="3d" style="display:none">4</td></tr> |
| <tr id="3e" style="visibility: hidden"><td>5</td></tr> |
| <tr id="3f" style="display: none"><td>6</td></tr> |
| </table> |
| <p id="3g">7</p> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axInput3 = accessibilityController.accessibleElementById("input3"); |
| assert_equals(axInput3.name, "1 2 3 4 6 7"); |
| }, "Visibility: 'hidden' and display: 'none' referenced directly by aria-labelledby"); |
| </script> |
| |
| <div class="container"> |
| <input id="input4" aria-labelledby="label4"> |
| |
| <div style="display: none"> |
| <div id="label4"> |
| <p>1</p> |
| <table> |
| <tr><td>2</td></tr> |
| <tr><td style="visibility: hidden">3</td></tr> |
| <tr><td style="display:none">4</td></tr> |
| <tr style="visibility: hidden"><td>5</td></tr> |
| <tr style="display: none"><td>6</td></tr> |
| </table> |
| <p>7</p> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axInput4 = accessibilityController.accessibleElementById("input4"); |
| assert_equals(axInput4.name, " 1 2 7 "); |
| }, "Visibility: 'hidden' and display: 'none' inside aria-labelledby label subtree, where entire label subtree is display: 'none'"); |
| </script> |
| |
| <script> |
| if (window.testRunner) |
| document.body.className = "hideAllContainers"; |
| </script> |