blob: 818bdd1558eb1c82dbeb4c833510afbda0b89599 [file] [log] [blame]
<!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() {
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>