sequential-focus-navigation-starting-point.html

<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../forms/resources/common.js"></script>
<div id="log"></div>
<div id="container"></div>
<script>
if (!window.eventSender)
    document.body.textContent = 'This test requires window.eventSender.';

test(function() {
    var container = document.querySelector('#container');
    container.innerHTML = '<input id=prev><div style="height:200px;"><span>text</span></div><input id=next>';
    hoverOverElement(container.querySelector('span'));
    eventSender.mouseDown();
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'next');
    eventSender.mouseUp();

    hoverOverElement(container.querySelector('div'));
    eventSender.mouseDown();
    eventSender.keyDown('\t', ['shiftKey']);
    assert_equals(document.activeElement.id, 'prev');
    eventSender.mouseUp();

    container.innerHTML = '<span style="font-size:60px;"><input id=prev>Text Text<input id=next></span>';
    hoverOverElement(container.querySelector('span'));
    eventSender.mouseDown();
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'next');
    eventSender.mouseUp();

    hoverOverElement(container.querySelector('span'));
    eventSender.mouseDown();
    eventSender.keyDown('\t', ['shiftKey']);
    assert_equals(document.activeElement.id, 'prev');
    eventSender.mouseUp();
}, 'Mouse press should update sequential focus navigation starting point.');

test(function() {
    var container = document.querySelector('#container');
    container.innerHTML = '<a href="#fragment"></a><input id=prev><a name="fragment"></a><input id=next>';
    container.querySelector('a').click();
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'next');
}, 'Fragment navigation should update sequential focus navigation starting point.');

test(function() {
    var container = document.querySelector('#container');
    container.innerHTML = '<input id=prev><input id=start><input id=next>';
    container.querySelector('#start').focus();
    container.querySelector('#start').blur();
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'next');
}, 'Focusing an element should update sequential focus navigation starting point.');

test(function() {
    var container = document.querySelector('#container');
    container.innerHTML = '<input id=prev><input id=start><input id=next>';
    container.querySelector('#start').focus();
    container.querySelector('#start').remove();
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'next');

    container.innerHTML = '<input id=prev><input id=start><input id=next>';
    container.querySelector('#start').focus();
    container.querySelector('#start').remove();
    eventSender.keyDown('\t', ['shiftKey']);
    assert_equals(document.activeElement.id, 'prev');
}, 'After removing a focused element from the documen tree, sequential focus navigation should start at a place where the focused element was.');

test(function() {
    const container = document.querySelector('#container');
    container.innerHTML = '<input id="before"><div></div><input id="after">';
    const host = container.querySelector('div');
    const shadowRoot = host.attachShadow({mode:'closed'});

    let buttonInShadow = document.createElement('button');
    shadowRoot.appendChild(buttonInShadow);
    buttonInShadow.focus();
    assert_equals(shadowRoot.activeElement, buttonInShadow);
    buttonInShadow.remove();
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'after', 'Forward');

    buttonInShadow = document.createElement('button');
    shadowRoot.appendChild(buttonInShadow);
    buttonInShadow.focus();
    assert_equals(shadowRoot.activeElement, buttonInShadow);
    buttonInShadow.remove();
    eventSender.keyDown('\t', ['shiftKey']);
    assert_equals(document.activeElement.id, 'before', 'Backward');
}, 'Disconnecting a focused element in a shadow tree');

test(function() {
    const container = document.querySelector('#container');
    container.innerHTML = '<input id="before"><div></div><input id="after">';

    let host = container.querySelector('div');
    let shadowRoot = host.attachShadow({mode:'closed'});
    let buttonInShadow = document.createElement('button');
    shadowRoot.appendChild(buttonInShadow);
    buttonInShadow.focus();
    assert_equals(shadowRoot.activeElement, buttonInShadow);
    host.remove();
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'after', 'Forward');

    container.insertBefore(host, container.lastChild);
    buttonInShadow.focus();
    assert_equals(shadowRoot.activeElement, buttonInShadow);
    host.remove();
    eventSender.keyDown('\t', ['shiftKey']);
    assert_equals(document.activeElement.id, 'before', 'Backward');
}, 'Disconnecting a shadow tree including a focused element');

test(function() {
    // crbug.com/897403
    const container = document.querySelector('#container');
    container.innerHTML = '<input id="before"><span><div></div><div></div></span><input id="after">';

    let host = container.querySelector('div');
    let hostParent = host.parentNode;
    let shadowRoot = host.attachShadow({mode:'closed'});
    let buttonInShadow = document.createElement('button');
    shadowRoot.appendChild(buttonInShadow);
    buttonInShadow.focus();
    assert_equals(shadowRoot.activeElement, buttonInShadow);
    hostParent.innerHTML = '';
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'after', 'Forward');
}, 'Disconnecting a shadow tree including a focused element 2');

test(function() {
    var container = document.querySelector('#container');
    container.innerHTML = '<input id="i1"><input id="i2"><input id="i3">';
    container.querySelector('#i3').click();
    container.querySelector('#i1').scrollIntoView();
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'i2');
}, 'Element.scrollIntoView() should update sequential focus navigation starting point.');

test(function() {
    var container = document.querySelector('#container');
    container.innerHTML = '<span>Lorem</span><span tabindex="0" id="ipsum">ipsum</span><span>dolor</span><span tabindex="0" id="sit">sit</span><span>amet</span>';
    testRunner.findString("dolor", []);
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'sit');
    testRunner.findString("Lorem", []);
    eventSender.keyDown('\t');
    assert_equals(document.activeElement.id, 'ipsum');
    testRunner.findString("amet", []);
    eventSender.keyDown('\t', ['shiftKey']);
    assert_equals(document.activeElement.id, 'sit');
}, 'Find text should update sequential focus navigation starting point.');

var t = async_test('Cross-frame sequential focus navigation should clear per-document starting point.');
t.step(() => {
    var container = document.querySelector('#container');
    container.innerHTML = '<iframe tabindex=0 srcdoc="<input id=inner1><input id=inner2>"></iframe><input id=outer1>';
    var iframe = container.firstChild;
    document.querySelector('#outer1').addEventListener('focus', () => { iframe.focus() }, false);
    iframe.addEventListener('load', t.step_func(() => {
        var inner2 = iframe.contentDocument.querySelector('#inner2');
        inner2.focus();
        eventSender.keyDown('\t');
        eventSender.keyDown('\t', ['shiftKey']);
        assert_equals(iframe.contentDocument.activeElement, inner2);
        t.done();
    }), false);
});
</script>
</body>
chromium/third_party/blink/web_tests/fast/events/sequential-focus-navigation-starting-point.html
