aria-orientation.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/js-test.js"></script>

<div id="slider1" role="slider"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
    50
</div>
<div id="slider2" role="slider" aria-orientation="vertical"
    data-expected-orientation="AXOrientation: AXVerticalOrientation"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
    50
</div>
<div id="slider3" role="slider" aria-orientation="horizontal"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
    50
</div>
<div id="slider4" role="slider" aria-orientation="invalid"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
    50
</div>
<div id="scrollbar1" role="scrollbar"
    data-expected-orientation="AXOrientation: AXVerticalOrientation"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
    50
</div>
<div id="scrollbar2" role="scrollbar" aria-orientation="vertical"
    data-expected-orientation="AXOrientation: AXVerticalOrientation"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
    50
</div>
<div id="scrollbar3" role="scrollbar" aria-orientation="horizontal"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
    50
</div>
<div id="scrollbar4" role="scrollbar" aria-orientation="invalid"
    data-expected-orientation="AXOrientation: AXVerticalOrientation"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
    50
</div>
<div id="separator1" role="separator"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation">
</div>
<div id="separator2" role="separator" aria-orientation="vertical"
    data-expected-orientation="AXOrientation: AXVerticalOrientation">
</div>
<div id="separator3" role="separator" aria-orientation="horizontal"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation">
</div>
<div id="separator4" role="separator" aria-orientation=""
    data-expected-orientation="AXOrientation: AXHorizontalOrientation">
</div>
<hr id="separator5" aria-label="Separator"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation">

<!-- The ARIA Spec 1.1 defines a horizontal orientation for toolbar. -->
<div id="toolbar1" role="toolbar"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation">
</div>
<div id="toolbar2" role="toolbar" aria-orientation="vertical"
    data-expected-orientation="AXOrientation: AXVerticalOrientation">
</div>
<div id="toolbar3" role="toolbar" aria-orientation="horizontal"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation">
</div>

<!-- No default orientation is defined for a radio group by the ARIA Spec. -->
<div id="radiogroup1" role="radiogroup" data-expected-orientation="">
    <span role="radio">Radio button</span>
</div>
<div id="radiogroup2" role="radiogroup" aria-orientation="vertical"
    data-expected-orientation="AXOrientation: AXVerticalOrientation">
    <span role="radio">Radio button</span>
</div>
<div id="radiogroup3" role="radiogroup" aria-orientation="horizontal"
    data-expected-orientation="AXOrientation: AXHorizontalOrientation">
    <span role="radio">Radio button</span>
</div>

<!-- Orientation should not be exposed for roles on which it is not supported. -->
<div id="button1" role="button" aria-orientation="horizontal"
    data-expected-orientation="">
    Button
</div>
<div id="button2" role="button" aria-orientation="vertical"
    data-expected-orientation="">
    Button
</div>

<script>
    description("This tests that aria-orientation is reported correctly.");

    if (window.accessibilityController) {

        var elements = document.querySelectorAll("[data-expected-orientation]");
        for (var i = 0; i < elements.length; ++i) {
            var element = elements[i];
            var axObject = accessibilityController.accessibleElementById(
                element.id);
            shouldBe("axObject.orientation", "element.getAttribute('data-expected-orientation')");
        }

    }
</script>
chromium/third_party/blink/web_tests/accessibility/aria-orientation.html
