third_party/WebKit/LayoutTests/fast/scrolling/scroll-element-into-view.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6 #spacer {
   7   width: 1000px;
   8   height: 1000px;
   9 }
  10 #container {
  11   width: 310px;
  12   height: 310px;
  13   overflow: scroll;
  14   position: relative;
  15 }
  16 #focusable {
  17   position: absolute;
  18   background-color: #ace;
  19 }
  20 ::-webkit-scrollbar {
  21   width: 10px;
  22   height: 10px;
  23 }
  24 ::-webkit-scrollbar-thumb {
  25   background: #aaa;
  26 }
  27
  28 </style>
  29 </head>
  30 <body>
  31 <div id="container">
  32   <div id="spacer"></div>
  33   <div id="focusable" tabindex="-1"></div>
  34 </div>
  35 <script src="../../resources/js-test.js"></script>
  36 <script>
  37
  38 description('Tests that scrollable areas are scrolled to the correct location '
  39     + 'when an element is focused.');
  40
  41 var container = document.querySelector('#container');
  42 var focusable = document.querySelector('#focusable');
  43
  44 function runTest(elemRect, initialScroll, expectedFinalScroll) {
  45   focusable.style.left = elemRect.x + 'px';
  46   focusable.style.top = elemRect.y + 'px';
  47   focusable.style.width = elemRect.w + 'px';
  48   focusable.style.height = elemRect.h + 'px';
  49
  50   container.scrollLeft = initialScroll.x;
  51   container.scrollTop = initialScroll.y;
  52
  53   focusable.focus();
  54   focusable.blur();
  55
  56   shouldBe('container.scrollLeft', String(expectedFinalScroll.x));
  57   shouldBe('container.scrollTop', String(expectedFinalScroll.y));
  58 };
  59
  60 // Smaller fully offscreen element is centered when focused.
  61 runTest({x: 20, y: 20, w: 280, h: 280}, {x: 690, y: 690}, {x: 10, y: 10});
  62 runTest({x: 700, y: 700, w: 280, h: 280}, {x: 10, y: 10}, {x: 690, y: 690});
  63
  64 // Larger fully offscreen element is centered when focused.
  65 runTest({x: 10, y: 10, w: 320, h: 320}, {x: 690, y: 690}, {x: 20, y: 20});
  66 runTest({x: 670, y: 670, w: 320, h: 320}, {x: 10, y: 10}, {x: 680, y: 680});
  67
  68 // Smaller fully onscreen element does not scroll when focused.
  69 runTest({x: 10, y: 10, w: 100, h: 100}, {x: 10, y: 10}, {x: 10, y: 10});
  70 runTest({x: 210, y: 210, w: 100, h: 100}, {x: 10, y: 10}, {x: 10, y: 10});
  71
  72 // Larger fully overlapping element does not scroll when focused.
  73 runTest({x: 10, y: 10, w: 310, h: 310}, {x: 20, y: 20}, {x: 20, y: 20});
  74 runTest({x: 20, y: 20, w: 310, h: 310}, {x: 20, y: 20}, {x: 20, y: 20});
  75
  76 // Smaller overlapping element scrolls to nearest edge when focused.
  77 runTest({x: 20, y: 20, w: 280, h: 280}, {x: 290, y: 290}, {x: 20, y: 20});
  78 runTest({x: 700, y: 700, w: 280, h: 280}, {x: 410, y: 410}, {x: 680, y: 680});
  79
  80 // Larger overlapping element scrolls to nearest edge when focused.
  81 runTest({x: 10, y: 10, w: 320, h: 320}, {x: 320, y: 320}, {x: 30, y: 30});
  82 runTest({x: 670, y: 670, w: 320, h: 320}, {x: 380, y: 380}, {x: 670, y: 670});
  83
  84 if (window.testRunner)
  85   testRunner.dumpAsText();
  86
  87 </script>
  88 </body>
  89 <html>