blob: a5be151603e246639fa189ff13a88df5dc974524 [file] [log] [blame]
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
.hideAllContainers .container { display: none; }
</style>
<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_equals(axTab.ariaControlsElementAtIndex(0), axPanel);
panel.style.display = 'none';
assert_not_equals(axTab.ariaControlsElementAtIndex(0), axPanel);
// Restore the "display" attribute and test with "visibility".
panel.style.display = 'initial';
axPanel = accessibilityController.accessibleElementById('panel');
assert_equals(axTab.ariaControlsElementAtIndex(0), axPanel);
panel.style.visibility = 'hidden';
assert_not_equals(axTab.ariaControlsElementAtIndex(0), axPanel);
}, '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>
<script>
if (window.testRunner)
document.body.className = "hideAllContainers";
</script>