display-none-change.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<button id="button">Button</button>
<label id="label" for="button" style="display:none" aria-label="AriaLabel">Label</label>

<script>
test(function(t) {
    var axButton = accessibilityController.accessibleElementById("button");

    // Get the AXObject for the label indirectly, even though it's display:none.
    // Ensure that it's valid.
    var axLabel = axButton.nameElementAtIndex(0);
    assert_equals(axLabel.isValid, true);
    assert_equals(axLabel.role, 'AXRole: AXLabelText');

    // Now un-hide the label.
    var label = document.getElementById('label');
    label.style.display = "block";
    console.log('////////////////////////////////');

    // // Ensure that the previous AXObject we had for the label is now invalid, but if
    // // we fetch an AXObject for it, we get a new valid object.
    // var axLabel2 = axButton.nameElementAtIndex(0);
    // assert_equals(axLabel.isValid, false);
    // assert_equals(axLabel2.isValid, true);
    // assert_equals(axLabel2.name, 'AriaLabel');
    // assert_equals(axLabel.isEqual(axLabel2), false);

    // // Now hide the label again.
    // label.style.display = "none";
    // // Check once more: the second AXObject is now invalid, but if we fetch
    // // an AXObject for the label a third time, we get a valid object again.
    // var axLabel3 = axButton.nameElementAtIndex(0);
    // assert_equals(axLabel.isValid, false);
    // assert_equals(axLabel2.isValid, false);
    // assert_equals(axLabel3.isValid, true);
    // assert_equals(axLabel3.role, 'AXRole: AXLabelText');
    // assert_equals(axLabel.isEqual(axLabel3), false);
    // assert_equals(axLabel2.isEqual(axLabel3), false);
}, "Accessibility objects for display:none elements");
</script>
chromium/third_party/blink/web_tests/accessibility/display-none-change.html
