102 lines
4.3 KiB
HTML
102 lines
4.3 KiB
HTML
<html>
|
|
<head>
|
|
<script>
|
|
function log(msg)
|
|
{
|
|
document.getElementById('log').appendChild(document.createTextNode(msg + '\n'));
|
|
}
|
|
|
|
function dispatchTabPress(element, shiftKey)
|
|
{
|
|
var event = document.createEvent('KeyboardEvents');
|
|
var tabKeyIdentifier = 'U+0009';
|
|
event.initKeyboardEvent('keydown', true, true, document.defaultView, tabKeyIdentifier, 0, false, false, shiftKey, false, false);
|
|
element.dispatchEvent(event);
|
|
}
|
|
|
|
var lastFocusedElement = null;
|
|
function focusListener(event)
|
|
{
|
|
log('id: ' + event.target.id + ' tabindex: ' + event.target.tabIndex + ' ' + event.target + ' is focused.');
|
|
lastFocusedElement = event.target;
|
|
}
|
|
|
|
function addEventListenersToRects(rects)
|
|
{
|
|
for (var i = 0; i < rects.length; ++i) {
|
|
rects[i].addEventListener('focus', focusListener, false);
|
|
}
|
|
}
|
|
|
|
function test()
|
|
{
|
|
if (window.testRunner) {
|
|
testRunner.dumpAsText();
|
|
}
|
|
|
|
document.activeElement.blur();
|
|
|
|
var rects = document.getElementsByClassName('tab');
|
|
|
|
// Put focus in the page
|
|
rects[0].focus();
|
|
rects[0].blur();
|
|
|
|
addEventListenersToRects(rects);
|
|
|
|
log('Tabbing forward....\n');
|
|
for (var i = 0; i < rects.length; ++i) {
|
|
if (i > 1 && document.activeElement.id == 'a')
|
|
break;
|
|
dispatchTabPress(document, false);
|
|
}
|
|
|
|
lastFocusedElement.blur();
|
|
|
|
log('\nTabbing backward....\n');
|
|
for (var i = 0; i < rects.length; ++i) {
|
|
if (i > 1 && document.activeElement.id == 'k')
|
|
break;
|
|
dispatchTabPress(document, true);
|
|
}
|
|
|
|
log('\nTest finished\n');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="test()">
|
|
<p>This page tests that the SVG tabbing order is respected properly.</p>
|
|
<p>To test, put focus in "a". Pressing Tab should focus "a" through "k" in order, and pressing Shift-Tab should reverse the order.</p>
|
|
<svg>
|
|
<rect class="tab" tabindex="6" id="g" width="1" height="1"/>
|
|
<rect class="tab" id="rect without tabindex is not focusable" width="1" height="1"/>
|
|
<circle class="tab" tabindex="1" id="a" r="1" cx="0" cy="0"/>
|
|
<circle class="tab" id="circle without tabindex is not focusable" r="1" cx="0" cy="0"/>
|
|
<rect class="tab" tabindex="-5" id="not in tab order (negative tabindex)" width="1" height="1"/>
|
|
<g class="tab" tabindex="1" id="b"/>
|
|
<g class="tab" id="g without tabindex is not focusable"/>
|
|
<svg class="tab" tabindex="0" id="i" width="1" height="1"/>
|
|
<text class="tab" tabindex="6" id="h" width="1" height="1"/>
|
|
<text class="tab" id="text without tabindex is not focusable" width="1" height="1"/>
|
|
<ellipse class="tab" tabindex="1" id="c" rx="1" ry="1" cx="0" cy="0"/>
|
|
<ellipse class="tab" id="ellipse without tabindex is not focusable" rx="1" ry="1" cx="0" cy="0"/>
|
|
<symbol class="tab" tabindex="1" id="symbol" width="1" height="1"/>
|
|
<symbol class="tab" id="symbol without tabindex is not focusable" width="1" height="1"/>
|
|
<defs class="tab" tabindex="1" id="defs is not focusable"/>
|
|
<path class="tab" tabindex="1" id="d" d="M0,0"/>
|
|
<path class="tab" id="path without tabindex is not focusable" d="M0,0"/>
|
|
<line class="tab" tabindex="0" id="j" x1="1" x2="1" y1="0" y2="0"/>
|
|
<line class="tab" id="line without tabindex is not focusable" x1="1" x2="1" y1="0" y2="0"/>
|
|
<rect class="tab" tabindex="-1" id="not in tab order (negative tabindex)" width="1" height="1"/>
|
|
<polygon class="tab" tabindex="0" id="k" points="1,1 2,2"/>
|
|
<polygon class="tab" id="polygon without tabindex is not focusable" points="1,1 2,2"/>
|
|
<polyline class="tab" tabindex="4" id="f" points="1,1 2,2"/>
|
|
<polyline class="tab" id="polyline without tabindex is not focusable" points="1,1 2,2"/>
|
|
<a class="tab" tabindex="3" id="e"><rect width="1" height="1"/></a>
|
|
</svg>
|
|
|
|
<pre id="log"></pre>
|
|
</body>
|
|
</html>
|
|
|