157 lines
4.0 KiB
HTML
157 lines
4.0 KiB
HTML
<html>
|
|
<style>
|
|
body {
|
|
background-color: white;
|
|
}
|
|
|
|
iframe {
|
|
border: 2px solid black;
|
|
}
|
|
</style>
|
|
<script>
|
|
function log(msg)
|
|
{
|
|
document.getElementById('log').appendChild(document.createTextNode(msg + '\n'));
|
|
}
|
|
|
|
function windowFocused(win, name)
|
|
{
|
|
return function() {
|
|
win.document.body.style.background = "green";
|
|
log(name + ': window focused');
|
|
}
|
|
}
|
|
|
|
function windowBlurred(win, name)
|
|
{
|
|
return function() {
|
|
win.document.body.style.background = "red";
|
|
log(name + ': window blurred');
|
|
}
|
|
}
|
|
|
|
function logTabbedElement(event, elem, i, name)
|
|
{
|
|
log(name + ': ' + elem.tagName + ' #' + i + ' (tabindex=' + elem.tabIndex + ') ' + event);
|
|
}
|
|
|
|
var lastFocusedElement = null;
|
|
function elementFocused(elem, i, name)
|
|
{
|
|
return function() {
|
|
logTabbedElement('focused', elem, i, name);
|
|
lastFocusedElement = elem;
|
|
}
|
|
}
|
|
|
|
function elementBlurred(elem, i, name)
|
|
{
|
|
return function() {
|
|
logTabbedElement('blurred', elem, i, name);
|
|
}
|
|
}
|
|
|
|
function setupElements(win, name, tag)
|
|
{
|
|
var elems = win.document.getElementsByTagName(tag);
|
|
for (var i = 0; i < elems.length; ++i) {
|
|
elems[i].onfocus = elementFocused(elems[i], i, name);
|
|
elems[i].onblur = elementBlurred(elems[i], i, name);
|
|
}
|
|
}
|
|
|
|
function setupBodyFunc(win, name)
|
|
{
|
|
return function() {
|
|
setupElements(win, name, 'a');
|
|
setupElements(win, name, 'input');
|
|
setupElements(win, name, 'iframe');
|
|
}
|
|
}
|
|
|
|
function setupWindow(win)
|
|
{
|
|
var name;
|
|
if (win.frameElement) {
|
|
name = win.frameElement.id;
|
|
} else {
|
|
name = 'main window';
|
|
}
|
|
|
|
win.setupWindow = setupWindow;
|
|
win.setupBody = setupBodyFunc(win, name);
|
|
|
|
win.onfocus = windowFocused(win, name);
|
|
win.onblur = windowBlurred(win, name);
|
|
}
|
|
|
|
function dispatchTabPress(element, shiftKey, altKey)
|
|
{
|
|
var event = document.createEvent('KeyboardEvents');
|
|
var tabKeyIdentifier = 'U+0009';
|
|
event.initKeyboardEvent('keydown', true, true, document.defaultView, tabKeyIdentifier, 0, false, altKey, shiftKey, false, false);
|
|
element.dispatchEvent(event);
|
|
}
|
|
|
|
function test()
|
|
{
|
|
if (window.testRunner) {
|
|
testRunner.dumpAsText();
|
|
}
|
|
|
|
log('Tabbing forward...\n');
|
|
document.getElementById('first').focus();
|
|
for (var i = 0; i < 7; ++i) {
|
|
dispatchTabPress(document, false, false);
|
|
}
|
|
|
|
lastFocusedElement.blur();
|
|
|
|
log('\nTabbing backward...\n');
|
|
for (var i = 0; i < 8; ++i) {
|
|
dispatchTabPress(document, true, false);
|
|
}
|
|
|
|
lastFocusedElement.blur();
|
|
|
|
log('\nOption-tabbing forward...\n');
|
|
for (var i = 0; i < 12; ++i) {
|
|
dispatchTabPress(document, false, true);
|
|
}
|
|
|
|
lastFocusedElement.blur();
|
|
|
|
log('\nOption-tabbing backward...\n');
|
|
for (var i = 0; i < 12; ++i) {
|
|
dispatchTabPress(document, true, true);
|
|
}
|
|
|
|
lastFocusedElement.blur();
|
|
|
|
log('\nTest finished\n');
|
|
}
|
|
|
|
setupWindow(window);
|
|
</script>
|
|
<body onload="window.setupBody(); test();">
|
|
<p>This page tests tabbing between subframes. To test, click on this text
|
|
to focus the main window. Then press Tab 7 times, then Shift-Tab 7 times,
|
|
which should move focus forward and backward through all inputs and frames.
|
|
Then press Option-Tab 11 times and Shift-Option-Tab 11 times, which should
|
|
move focus forward and backward through all inputs, frames, and links.</p>
|
|
|
|
<input type="text">
|
|
<iframe id="empty-middle" src="resources/frame-tab-focus-empty-middle.html" width="400" height="200"></iframe>
|
|
<input type="text" tabindex="3">
|
|
<input type="text" tabindex="2" id="first">
|
|
<iframe id="upper" src="resources/frame-tab-focus-upper.html" height="300"></iframe>
|
|
<iframe id="child" tabindex="4" src="resources/frame-tab-focus-child.html"></iframe>
|
|
<input type="text">
|
|
<a tabindex="1" href="#">[tabindex of one]</a>
|
|
<a tabindex="3" href="#">[tabindex of three]</a>
|
|
<a tabindex="2" href="#">[tabindex of two]</a>
|
|
<a tabindex="3" href="#">[tabindex of three]</a>
|
|
<pre id="log"></pre>
|
|
</body>
|
|
</html>
|