aria-slider-value.html | Explore in Territory

<html>
<body>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    function checkValue(id, val, min, max) {
        if (!window.accessibilityController)
            return;

        var aria = document.getElementById(id);
        aria.focus();
        var focusedElement = accessibilityController.focusedElement;
        var value = focusedElement.intValue;
        var minValue = focusedElement.minValue;
        var maxValue = focusedElement.maxValue;

        var result = document.getElementById("result");
        if (value == val && minValue == min && maxValue == max)
            result.innerText += "The " + id + " test PASSES in DumpRenderTree. The value is " + value + ", the minValue is "
                + minValue + ", and the max value is " + maxValue + ".\n";
        else
            result.innerText += "The " + id + " test FAILS in DumpRenderTree. The value, minValue, and/or maxValue of the range must be incorrect.\n";
    }
</script>

<div>
    <p>In accessibility, the following should be a progress indicator:</p>
    <p><span tabindex="0" role="slider" id="slider1" aria-valuemin=0 aria-valuemax=10>X</span></p>
    <p><span tabindex="0" role="slider" id="slider2" aria-valuenow=3 aria-valuemin=0 aria-valuemax=10>X</span></p>
    <p><span tabindex="0" role="slider" id="slider3" aria-valuenow=5 aria-valuemin=7 aria-valuemax=10>X</span></p>
    <p><span tabindex="0" role="slider" id="slider4" aria-valuenow=5 aria-valuemin=0 aria-valuemax=3>X</span></p>
    <span id="result"></span>
    <script>
        checkValue('slider1', 5, 0, 10);
        checkValue('slider2', 3, 0, 10);
        checkValue('slider3', 7, 7, 10);
        checkValue('slider4', 3, 0, 3);
    </script>
  </div>
 
 </body>
</html>
chromium/third_party/blink/web_tests/accessibility/aria-slider-value.html
