127 lines
5.4 KiB
HTML
127 lines
5.4 KiB
HTML
|
<!DOCTYPE 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.nodeName + ' is focused.');
|
||
|
|
lastFocusedElement = event.target;
|
||
|
|
}
|
||
|
|
|
||
|
|
function addEventListenersToElements(elements)
|
||
|
|
{
|
||
|
|
for (const element of elements)
|
||
|
|
element.addEventListener('focus', focusListener, false);
|
||
|
|
}
|
||
|
|
|
||
|
|
function test()
|
||
|
|
{
|
||
|
|
if (window.testRunner)
|
||
|
|
testRunner.dumpAsText();
|
||
|
|
|
||
|
|
document.activeElement.blur();
|
||
|
|
|
||
|
|
var elements = document.getElementsByClassName('tab');
|
||
|
|
|
||
|
|
// Put focus in the page
|
||
|
|
elements[0].focus();
|
||
|
|
elements[0].blur();
|
||
|
|
|
||
|
|
addEventListenersToElements(elements);
|
||
|
|
|
||
|
|
log('Tabbing forward....\n');
|
||
|
|
dispatchTabPress(document, false);
|
||
|
|
for (const element of elements) {
|
||
|
|
dispatchTabPress(document, false);
|
||
|
|
if (document.activeElement.id == 'a')
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
lastFocusedElement.blur();
|
||
|
|
|
||
|
|
log('\nTabbing backward....\n');
|
||
|
|
dispatchTabPress(document, true);
|
||
|
|
for (const element of elements) {
|
||
|
|
dispatchTabPress(document, true);
|
||
|
|
if (document.activeElement.id == 'y')
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
log('\nTest finished\n');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body onload="test()">
|
||
|
|
<p>This page tests that the MathML tabbing order is respected properly.</p>
|
||
|
|
<p>To test, put focus in "a". Pressing Tab should focus "a" through "y" in order, and pressing Shift-Tab should reverse the order.</p>
|
||
|
|
<math>
|
||
|
|
<mspace class="tab" tabindex="6" id="g" width="1" height="1"/>
|
||
|
|
<mspace class="tab" id="mspace without tabindex is not focusable" width="1" height="1"/>
|
||
|
|
<mfrac class="tab" tabindex="1" id="a"/>
|
||
|
|
<mfrac class="tab" id="mfrac without tabindex is not focusable"/>
|
||
|
|
<mspace class="tab" tabindex="-5" id="not in tab order (negative tabindex)" width="1" height="1"/>
|
||
|
|
<mrow class="tab" tabindex="1" id="b"/>
|
||
|
|
<mrow class="tab" id="mrow without tabindex is not focusable"/>
|
||
|
|
<math class="tab" tabindex="0" id="i"/>
|
||
|
|
<mtext class="tab" tabindex="6" id="h"/>
|
||
|
|
<mtext class="tab" id="mtext without tabindex is not focusable"/>
|
||
|
|
<mpadded class="tab" tabindex="1" id="c"/>
|
||
|
|
<mpadded class="tab" id="mpadded without tabindex is not focusable"/>
|
||
|
|
<msqrt class="tab" tabindex="1" id="d"/>
|
||
|
|
<msqrt class="tab" id="msqrt without tabindex is not focusable"/>
|
||
|
|
<mroot class="tab" tabindex="1" id="e"/>
|
||
|
|
<mroot class="tab" id="mroot without tabindex is not focusable"/>
|
||
|
|
<mover class="tab" tabindex="0" id="j"/>
|
||
|
|
<mover class="tab" id="mover without tabindex is not focusable"/>
|
||
|
|
<mspace class="tab" tabindex="-1" id="not in tab order (negative tabindex)"/>
|
||
|
|
<munder class="tab" tabindex="0" id="k"/>
|
||
|
|
<munder class="tab" id="munder without tabindex is not focusable"/>
|
||
|
|
<munderover class="tab" tabindex="0" id="l"/>
|
||
|
|
<munderover class="tab" id="munderover without tabindex is not focusable"/>
|
||
|
|
<msub class="tab" tabindex="0" id="m"/>
|
||
|
|
<msub class="tab" id="msub without tabindex is not focusable"/>
|
||
|
|
<msup class="tab" tabindex="0" id="n"/>
|
||
|
|
<msup class="tab" id="msup without tabindex is not focusable"/>
|
||
|
|
<msubsup class="tab" tabindex="0" id="o"/>
|
||
|
|
<msubsup class="tab" id="msubsup without tabindex is not focusable"/>
|
||
|
|
<mmultiscripts class="tab" tabindex="0" id="p"/>
|
||
|
|
<mmultiscripts class="tab" id="mmultiscripts without tabindex is not focusable"/>
|
||
|
|
<menclose class="tab" tabindex="0" id="q"/>
|
||
|
|
<menclose class="tab" id="menclose without tabindex is not focusable"/>
|
||
|
|
<mphantom class="tab" tabindex="0" id="r"/>
|
||
|
|
<mphantom class="tab" id="mphantom without tabindex is not focusable"/>
|
||
|
|
<mstyle class="tab" tabindex="0" id="s"/>
|
||
|
|
<mstyle class="tab" id="mstyle without tabindex is not focusable"/>
|
||
|
|
<merror class="tab" tabindex="0" id="t"/>
|
||
|
|
<merror class="tab" id="merror without tabindex is not focusable"/>
|
||
|
|
<mtable class="tab" tabindex="0" id="u"/>
|
||
|
|
<mtable class="tab" id="mtable without tabindex is not focusable"/>
|
||
|
|
<ms class="tab" tabindex="0" id="v"/>
|
||
|
|
<ms class="tab" id="ms without tabindex is not focusable"/>
|
||
|
|
<mi class="tab" tabindex="0" id="w"/>
|
||
|
|
<mi class="tab" id="mi without tabindex is not focusable"/>
|
||
|
|
<mo class="tab" tabindex="0" id="x"/>
|
||
|
|
<mo class="tab" id="mo without tabindex is not focusable"/>
|
||
|
|
<mn class="tab" tabindex="0" id="y"/>
|
||
|
|
<mn class="tab" id="mn without tabindex is not focusable"/>
|
||
|
|
</math>
|
||
|
|
|
||
|
|
<pre id="log"></pre>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|