| <!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> |
| |
