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