third_party/WebKit/LayoutTests/fast/events/frame-tab-focus.html

   1 <html>
   2 <style>
   3 body {
   4 background-color: white;
   5 }
   6
   7 iframe {
   8 border: 2px solid black;
   9 }
  10 </style>
  11 <script>
  12 function log(msg)
  13 {
  14     document.getElementById('log').appendChild(document.createTextNode(msg + '\n'));
  15 }
  16
  17 function windowFocused(win, name)
  18 {
  19     return function() {
  20         log(name + ': window focused');
  21     }
  22 }
  23
  24 function windowBlurred(win, name)
  25 {
  26     return function() {
  27         win.document.body.style.background = "red";
  28         log(name + ': window blurred');
  29     }
  30 }
  31
  32 function logTabbedElement(event, elem, i, name)
  33 {
  34     log(name + ': ' + elem.tagName + ' #' + i + ' (tabindex=' + elem.tabIndex + ') ' + event);
  35 }
  36
  37 var lastFocusedElement = null;
  38 function elementFocused(elem, i, name)
  39 {
  40     return function() {
  41         logTabbedElement('focused', elem, i, name);
  42         lastFocusedElement = elem;
  43     }
  44 }
  45
  46 function elementBlurred(elem, i, name)
  47 {
  48     return function() {
  49         logTabbedElement('blurred', elem, i, name);
  50     }
  51 }
  52
  53 function setupElements(win, name, tag)
  54 {
  55     var elems = win.document.getElementsByTagName(tag);
  56     for (var i = 0; i < elems.length; ++i) {
  57         elems[i].onfocus = elementFocused(elems[i], i, name);
  58         elems[i].onblur = elementBlurred(elems[i], i, name);
  59     }
  60 }
  61
  62 function setupBodyFunc(win, name)
  63 {
  64     return function() {
  65         setupElements(win, name, 'a');
  66         setupElements(win, name, 'input');
  67         setupElements(win, name, 'iframe');
  68     }
  69 }
  70
  71 function setupWindow(win)
  72 {
  73     var name;
  74     if (win.frameElement) {
  75         name = win.frameElement.id;
  76     } else {
  77         name = 'main window';
  78     }
  79
  80     win.setupWindow = setupWindow;
  81     win.setupBody = setupBodyFunc(win, name);
  82
  83     win.onfocus = windowFocused(win, name);
  84     win.onblur = windowBlurred(win, name);
  85 }
  86
  87 function dispatchTabPress(element, shiftKey, altKey)
  88 {
  89     if (window.eventSender) {
  90         modifiers = [];
  91         if (shiftKey)
  92             modifiers.push("shiftKey");
  93         if (altKey)
  94             modifiers.push("altKey");
  95         eventSender.keyDown('\u0009', modifiers);
  96     }
  97 }
  98
  99 function test()
 100 {
 101     if (window.testRunner) {
 102         testRunner.dumpAsText();
 103     }
 104
 105     log('Tabbing forward...\n');
 106     document.getElementById('first').focus();
 107     for (var i = 0; i < 7; ++i) {
 108         dispatchTabPress(document, false, false);
 109     }
 110
 111     lastFocusedElement.blur();
 112
 113     log('\nTabbing backward...\n');
 114     for (var i = 0; i < 8; ++i) {
 115         dispatchTabPress(document, true, false);
 116     }
 117
 118     lastFocusedElement.blur();
 119
 120     log('\nOption-tabbing forward...\n');
 121     for (var i = 0; i < 12; ++i) {
 122         dispatchTabPress(document, false, navigator.platform.indexOf('Mac') == 0);
 123     }
 124
 125     lastFocusedElement.blur();
 126
 127     log('\nOption-tabbing backward...\n');
 128     for (var i = 0; i < 12; ++i) {
 129         dispatchTabPress(document, true, navigator.platform.indexOf('Mac') == 0);
 130     }
 131
 132     lastFocusedElement.blur();
 133
 134     log('\nTest finished\n');
 135 }
 136
 137 setupWindow(window);
 138 </script>
 139 <body onload="window.setupBody(); test();">
 140     <p>This page tests tabbing between subframes. To test, click on this text
 141     to focus the main window. Then press Tab 7 times, then Shift-Tab 7 times,
 142     which should move focus forward and backward through all inputs and frames.
 143     Then press Option-Tab 11 times and Shift-Option-Tab 11 times, which should
 144     move focus forward and backward through all inputs, frames, and links.</p>
 145
 146     <input type="text">
 147     <iframe id="empty-middle" src="resources/frame-tab-focus-empty-middle.html" width="400" height="200"></iframe>
 148     <input type="text" tabindex="3">
 149     <input type="text" tabindex="2" id="first">
 150     <iframe id="upper" src="resources/frame-tab-focus-upper.html" height="300"></iframe>
 151     <iframe id="child" tabindex="4" src="resources/frame-tab-focus-child.html"></iframe>
 152     <input type="text">
 153     <a tabindex="1" href="#">[tabindex of one]</a>
 154     <a tabindex="3" href="#">[tabindex of three]</a>
 155     <a tabindex="2" href="#">[tabindex of two]</a>
 156     <a tabindex="3" href="#">[tabindex of three]</a>
 157     <pre id="log"></pre>
 158 </body>
 159 </html>