third_party/WebKit/LayoutTests/fast/overflow/scrollbar-click-retains-focus.html

   1 <!DOCTYPE html>
   2
   3 <script src="../../resources/js-test.js"></script>
   4
   5 <style>
   6     /* Float everything so they fit inside the viewport for using eventSender to click */
   7     section, footer, span, textarea, select { float: left; }
   8 </style>
   9
  10 <footer>
  11     <input>
  12 </footer>
  13
  14 <section style="height: 100px; width: 100px; overflow: scroll;"></section>
  15
  16 <div tabindex="1">
  17     <header style="height: 100px; width: 100px; overflow: scroll;"></header>
  18 </div>
  19
  20 <span contenteditable>
  21     <u style="height: 100px; width: 100px; overflow: scroll; display: block;"></u>
  22 </span>
  23
  24 <textarea rows="5">
  25     Text.
  26     Text.
  27     Text.
  28     Text.
  29     Text.
  30     Text.
  31     Text.
  32     Text.
  33     Text.
  34     Text.
  35 </textarea>
  36
  37 <select multiple>
  38     <option> Text.
  39     <option> Text.
  40     <option> Text.
  41     <option> Text.
  42     <option> Text.
  43     <option> Text.
  44     <option> Text.
  45 </select>
  46
  47 <script>
  48 if (window.testRunner)
  49     testRunner.dumpAsText();
  50
  51 function click(x, y)
  52 {
  53     if (window.eventSender) {
  54         eventSender.mouseMoveTo(x, y);
  55         eventSender.mouseDown();
  56         eventSender.mouseUp();
  57     }
  58 }
  59
  60 function clickVerticalScrollbar(type)
  61 {
  62     var element = document.querySelector(type);
  63     click(element.offsetLeft + element.offsetWidth - 5, element.offsetTop + 5);
  64 }
  65
  66 function clickHorizontalScrollbar(type)
  67 {
  68     var element = document.querySelector(type);
  69     click(element.offsetLeft + 5, element.offsetTop + element.offsetHeight - 5);
  70 }
  71
  72 function test(name, fn)
  73 {
  74     debug("<br>" + name);
  75     fn();
  76 }
  77
  78 description("This tests clicking scrollbars, which should only move the focus if an ancestor is mouse focusable.");
  79
  80 test("Focus should remain in the input", function() {
  81     document.querySelector("input").focus();
  82     clickVerticalScrollbar("section");
  83     clickHorizontalScrollbar("section");
  84     shouldBeEqualToString("document.activeElement.tagName", "INPUT");
  85 });
  86
  87 test("Focus should move if ancestor is mouse focusable", function() {
  88     document.querySelector("input").focus();
  89     clickVerticalScrollbar("header");
  90     shouldBeEqualToString("document.activeElement.tagName", "DIV");
  91     document.querySelector("input").focus();
  92     clickHorizontalScrollbar("header");
  93     shouldBeEqualToString("document.activeElement.tagName", "DIV");
  94 });
  95
  96 test("Focus should move if ancestor is content editable", function() {
  97     document.querySelector("input").focus();
  98     clickVerticalScrollbar("u");
  99     shouldBeEqualToString("document.activeElement.tagName", "SPAN");
 100     document.querySelector("input").focus();
 101     clickHorizontalScrollbar("u");
 102     shouldBeEqualToString("document.activeElement.tagName", "SPAN");
 103 });
 104
 105 test("Form controls should move the focus", function() {
 106     clickVerticalScrollbar("textarea");
 107     shouldBeEqualToString("document.activeElement.tagName", "TEXTAREA");
 108     clickVerticalScrollbar("select");
 109     shouldBeEqualToString("document.activeElement.tagName", "SELECT");
 110 });
 111
 112 test("Disabled form controls should not move the focus", function() {
 113     document.querySelector("input").focus();
 114     document.querySelector("select").disabled = true;
 115     clickVerticalScrollbar("select");
 116     shouldBeEqualToString("document.activeElement.tagName", "INPUT");
 117 });
 118 </script>
 119