<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();
            }

            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 (rects[i].tabIndex >= 0)
                    dispatchTabPress(document, false);
            }

            lastFocusedElement.blur();

            log('\nTabbing backward....\n');
            for (var i = 0; i < rects.length; ++i) {
                if (rects[i].tabIndex >= 0)
                    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 &quot;a&quot;. Pressing Tab should focus &quot;a&quot; through &quot;k&quot; in order, and pressing Shift-Tab should reverse the order.</p>
    <svg>
        <rect class="tab" tabindex="6" id="g" width="1" height="1"/>
        <circle class="tab" tabindex="1" id="a" 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"/>
        <svg class="tab" tabindex="0" id="i" width="1" height="1"/>
        <text class="tab" tabindex="6" id="h" width="1" height="1"/>
        <ellipse class="tab" tabindex="1" id="c" rx="1" ry="1" cx="0" cy="0"/>
        <symbol class="tab" tabindex="1" id="symbol 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"/>
        <line class="tab" tabindex="0" id="j" 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"/>
        <polyline class="tab" tabindex="4" id="f" 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>