LayoutTests/accessibility/mac/input-slider.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/accessibility-helper.js"></script>
<script src="../../resources/js-test.js"></script>
</head>
<body>

<input type="range" min="0" max="100" value="50" id="slider">
<span id="val">50</span>
    
<script>
var output = "This test ensures slider increment and decrement actions work as expected, and verifies other general properties of sliders.\n\n";

document.getElementById("slider").addEventListener("change", event => {
    document.getElementById("val").innerText = event.target.value;
});

if (window.accessibilityController) {
    window.jsTestIsAsync = true;

    var slider = document.getElementById("slider");
    var sliderAXObject = accessibilityController.accessibleElementById("slider");
    var valueDiv = document.getElementById("val");
    var thumbAXObject;

    async function testMinMax(min, max) {
        await waitFor(() => sliderAXObject.minValue === min && sliderAXObject.maxValue === max);
        output += expect("sliderAXObject.minValue", min);
        output += expect("sliderAXObject.maxValue", max);
    }

    async function testValues(oldValue, direction) {
        // Increment and decrement operations modify the slider's value by 5%.
        const range = slider.getAttribute("max") - slider.getAttribute("min");
        const expected = direction * range * 0.05 + (oldValue * 1);
        await waitFor(() => slider.value == expected && valueDiv.innerText == expected);
        output += expect("slider.value",  `'${expected}'`);
        output += expect("valueDiv.innerText", `'${expected}'`);
    }

    async function testIncrement() {
        const oldValue = slider.value;
        output += `${evalAndReturn("sliderAXObject.increment()")}\n`;
        await testValues(oldValue, 1)
    }

    async function testDecrement() {
        const oldValue = slider.value;
        output += `${evalAndReturn("sliderAXObject.decrement()")}\n`;
        await testValues(oldValue, -1)
    }

    setTimeout(async function() {
        output += "** Verify basic slider accessibility attributes\n";
        await testMinMax(0, 100);
        output += expect("sliderAXObject.childrenCount", 1);
        output += expect("sliderAXObject.role", "'AXRole: AXSlider'");
        
        output += "\n** Verify basic thumb accessibility attributes\n";
        output += `${evalAndReturn("thumbAXObject = sliderAXObject.childAtIndex(0)")}\n`;
        output += expect("thumbAXObject.childrenCount", 0);
        output += expect("thumbAXObject.role", "'AXRole: AXValueIndicator'");

        output += "\n** Increment the slider, test slider value and div set on 'update' event\n";
        await testIncrement();

        output += "\n** Decrement the slider, test slider value and div set on 'update' event\n";
        output += `${evalAndReturn("slider.value = 22")}\n`;
        await testDecrement();

        output += "\n** Change slider range\n";
        output += `${evalAndReturn("slider.setAttribute('max', 1000)")}\n`;
        output += `${evalAndReturn("slider.setAttribute('min', 500)")}\n`;
        await testMinMax(500, 1000);

        output += "\n** Re-test incrementing the slider\n";
        output += `${evalAndReturn("slider.value = 600")}\n`;
        await testIncrement();

        output += "\n** Re-test decrementing the slider\n";
        output += `${evalAndReturn("slider.value = 850")}\n`;
        await testDecrement();

        debug(output);
        finishJSTest();
    }, 0);
}
</script>
</body>
</html>