| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <div class="container"> |
| <ul id="tablist" role="tablist"> |
| <li id="tab" role="tab" aria-controls="panel"></li> |
| </ul> |
| <div id="panel" role="tabpanel">Panel</div> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axTab = accessibilityController.accessibleElementById('tab'); |
| var panel = document.getElementById('panel'); |
| var axPanel = accessibilityController.accessibleElementById('panel'); |
| assert_not_equals(axPanel, undefined, |
| 'axPanel not undefined, Initial state'); |
| assert_equals(axTab.ariaControlsElementAtIndex(0), axPanel, |
| 'Initial state'); |
| |
| panel.style.display = 'none'; |
| assert_not_equals(axPanel, undefined, |
| 'axPanel not undefined, display: none'); |
| assert_not_equals(axTab.ariaControlsElementAtIndex(0), axPanel, |
| 'display: none'); |
| |
| // Restore the "display" attribute and test with "visibility". |
| panel.style.display = 'initial'; |
| axPanel = accessibilityController.accessibleElementById('panel'); |
| assert_not_equals(axPanel, undefined, |
| 'axPanel not undefined, display: initial'); |
| assert_equals(axTab.ariaControlsElementAtIndex(0), axPanel, |
| 'display: initial'); |
| |
| panel.style.visibility = 'hidden'; |
| assert_equals(axTab.ariaControlsElementAtIndex(0), undefined, |
| 'visibility: hidden'); |
| }, 'aria-controls should ignore hidden targets.'); |
| </script> |
| |
| <div class="container"> |
| <h1 id="headingWithFlowtos" aria-flowto="item1 item2">Heading</h1> |
| <ul id="flowtoItems"> |
| <li id="item1">One</li> |
| <li id="item2">Two</li> |
| </ul> |
| </div> |
| |
| <script> |
| test(function(t) |
| { |
| var axHeading = accessibilityController.accessibleElementById('headingWithFlowtos'); |
| var flowtoItems = document.getElementById('flowtoItems'); |
| var item1 = document.getElementById('item1'); |
| var axItem1 = accessibilityController.accessibleElementById('item1'); |
| var item2 = document.getElementById('item2'); |
| var axItem2 = accessibilityController.accessibleElementById('item2'); |
| |
| assert_equals(axHeading.ariaFlowToElementAtIndex(0), axItem1); |
| assert_equals(axHeading.ariaFlowToElementAtIndex(1), axItem2); |
| |
| item2.style.display = 'none'; |
| assert_equals(axHeading.ariaFlowToElementAtIndex(0), axItem1); |
| assert_not_equals(axHeading.ariaFlowToElementAtIndex(1), axItem2); |
| |
| // Restore the "display" attribute and test with "visibility". |
| item2.style.display = 'initial'; |
| axItem2 = accessibilityController.accessibleElementById('item2'); |
| item1.style.visibility = 'hidden'; |
| assert_equals(axHeading.ariaFlowToElementAtIndex(0), axItem2); |
| |
| flowtoItems.style.display = 'none'; |
| assert_not_equals(axHeading.ariaFlowToElementAtIndex(0), axItem2); |
| }, 'aria-flowto should ignore hidden targets.'); |
| </script> |
