scrollbar-click-retains-focus.html | Explore in Territory

<!DOCTYPE html>

<title>
This tests clicking scrollbars, which should only move the focus if an ancestor is mouse focusable.
</title>

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

<style>
    /* Float everything so they fit inside the viewport for using eventSender to click */
    section, footer, span, textarea, select { float: left; }
</style>

<footer>
    <input>
</footer>

<section style="height: 100px; width: 100px; overflow: scroll;"></section>

<div tabindex="1">
    <header style="height: 100px; width: 100px; overflow: scroll;"></header>
</div>

<span contenteditable>
    <u style="height: 100px; width: 100px; overflow: scroll; display: block;"></u>
</span>

<textarea rows="5">
    Text.
    Text.
    Text.
    Text.
    Text.
    Text.
    Text.
    Text.
    Text.
    Text.
</textarea>

<select multiple>
    <option> Text.
    <option> Text.
    <option> Text.
    <option> Text.
    <option> Text.
    <option> Text.
    <option> Text.
</select>

<script>
function click(x, y)
{
    if (window.eventSender) {
        eventSender.mouseMoveTo(x, y);
        eventSender.mouseDown();
        eventSender.mouseUp();
    }
}

function clickVerticalScrollbar(type)
{
    var element = document.querySelector(type);
    click(element.offsetLeft + element.offsetWidth - 5, element.offsetTop + 5);
}

function clickHorizontalScrollbar(type)
{
    var element = document.querySelector(type);
    click(element.offsetLeft + 5, element.offsetTop + element.offsetHeight - 5);
}

test(function() {
    document.querySelector("input").focus();
    clickVerticalScrollbar("section");
    clickHorizontalScrollbar("section");
    assert_equals(document.activeElement.tagName, "INPUT");
}, "Focus should remain in the input");

test(function() {
    document.querySelector("input").focus();
    clickVerticalScrollbar("header");
    assert_equals(document.activeElement.tagName, "DIV");
    document.querySelector("input").focus();
    clickHorizontalScrollbar("header");
    assert_equals(document.activeElement.tagName, "DIV");
}, "Focus should move if ancestor is mouse focusable");

test(function() {
    document.querySelector("input").focus();
    clickVerticalScrollbar("u");
    assert_equals(document.activeElement.tagName, "SPAN");
    document.querySelector("input").focus();
    clickHorizontalScrollbar("u");
    assert_equals(document.activeElement.tagName, "SPAN");
}, "Focus should move if ancestor is content editable");

test(function() {
    clickVerticalScrollbar("textarea");
    assert_equals(document.activeElement.tagName, "TEXTAREA");
    clickVerticalScrollbar("select");
    assert_equals(document.activeElement.tagName, "SELECT");
}, "Form controls should move the focus");

test(function() {
    document.querySelector("input").focus();
    document.querySelector("select").disabled = true;
    clickVerticalScrollbar("select");
    assert_equals(document.activeElement.tagName, "INPUT");
}, "Disabled form controls should not move the focus");
</script>
chromium/third_party/blink/web_tests/fast/overflow/scrollbar-click-retains-focus.html
