tabindex-order.html | Explore in Territory

<html>
<head>
    <script>
        function log(msg)
        {
            document.getElementById('log').appendChild(document.createTextNode(msg + '\n'));
        }

        function description(element)
        {
            if (element.tagName && element.tagName.match(/rect/i)) {
                return '<rect id="' + element.id + '" tabindex="' + element.tabIndex + '">';
            } else {
                return element.toString();
            }
        }

        function dispatchTabPress(element, modifiers)
        {
            eventSender.keyDown('\u0009', modifiers);
        }

        var lastFocusedElement = null;
        function focusListener(event)
        {
            log('<rect id="' + event.target.id + '" tabindex="' + event.target.tabIndex + '"> 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.getElementsByTagName('rect');

            // 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, []);
            }

            lastFocusedElement.blur();

            log('\nTabbing backward....\n');
            for (var i = 0; i < rects.length; ++i) {
                if (rects[i].tabIndex >= 0)
                    dispatchTabPress(document, ['shiftKey']);
            }

            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 tabindex="6" id="g" width="1" height="1"/>
		<rect tabindex="1" id="a" width="1" height="1"/>
		<rect tabindex="-5" id="not in tab order (negative tabindex)" width="1" height="1"/>
		<rect tabindex="1" id="b" width="1" height="1"/>
		<rect tabindex="0" id="i" width="1" height="1"/>
		<rect tabindex="6" id="h" width="1" height="1"/>
		<rect tabindex="1" id="c" width="1" height="1"/>
		<rect tabindex="1" id="d" width="1" height="1"/>
		<rect tabindex="0" id="j" width="1" height="1"/>
		<rect tabindex="-1" id="not in tab order (negative tabindex)" width="1" height="1"/>
		<rect tabindex="0" id="k" width="1" height="1"/>
		<rect tabindex="4" id="f" width="1" height="1"/>
		<rect tabindex="3" id="e" width="1" height="1"/>
    </svg>

    <pre id="log"></pre>
</body>
</html>
chromium/third_party/blink/web_tests/svg/custom/tabindex-order.html
