<!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 &quot;a&quot;. Pressing Tab should focus &quot;a&quot; through &quot;y&quot; 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>

