LayoutTests/fast/scrolling/scroll-element-into-view_t01.dart

/*
 * Copyright (c) 2014, the Dart project authors.  Please see the AUTHORS file
 * for details. All rights reserved. Use of this source code is governed by a
 * BSD-style license that can be found in the LICENSE file.
 */
/**
 * @assertion
 * @description
 */
import "dart:html";
import "../../testharness.dart";

const String htmlEL1 = r'''
<style>

#spacer {
  width: 1000px;
  height: 1000px;
}
#container {
  width: 310px;
  height: 310px;
  overflow: scroll;
  position: relative;
}
#focusable {
  position: absolute;
  background-color: #ace;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #aaa;
}

</style>
''';

const String htmlEL2 = r'''
<div id="container">
  <div id="spacer"></div>
  <div id="focusable" tabindex="-1"></div>
</div>
''';

const x="x";
const y="y";
const w="w";
const h="h";

var container = document.querySelector('#container');
var focusable = document.querySelector('#focusable');

void runTest(Map elemRect, Map initialScroll, Map expectedFinalScroll) {
  focusable.style.left = '${elemRect[x]}px';
  focusable.style.top = '${elemRect[y]}px';
  focusable.style.width = '${elemRect[w]}px';
  focusable.style.height = '${elemRect[h]}px';

  container.scrollLeft = initialScroll[x];
  container.scrollTop = initialScroll[y];

  focusable.focus();
  focusable.blur();

  shouldBe(container.scrollLeft, expectedFinalScroll[x], 'scrollLeft: elemRect ${elemRect[x]}px ${elemRect[y]}px ${elemRect[w]}px ${elemRect[h]}px');
  shouldBe(container.scrollTop, expectedFinalScroll[y], 'scrollTop: elemRect ${elemRect[x]}px ${elemRect[y]}px ${elemRect[w]}px ${elemRect[h]}px');
}

void main() {
    description('Tests that scrollable areas are scrolled to the correct location '
    + 'when an element is focused.');
    document.head.appendHtml(htmlEL1, treeSanitizer: new NullTreeSanitizer());
    document.body.setInnerHtml(htmlEL2, treeSanitizer: new NullTreeSanitizer());
    // Smaller fully offscreen element is centered when focused.
    runTest({x: 20, y: 20, w: 280, h: 280}, {x: 690, y: 690}, {x: 10, y: 10});
    runTest({x: 700, y: 700, w: 280, h: 280}, {x: 10, y: 10}, {x: 690, y: 690});

    // Larger fully offscreen element is centered when focused.
    runTest({x: 10, y: 10, w: 320, h: 320}, {x: 690, y: 690}, {x: 20, y: 20});
    runTest({x: 670, y: 670, w: 320, h: 320}, {x: 10, y: 10}, {x: 680, y: 680});

    // Smaller fully onscreen element does not scroll when focused.
    runTest({x: 10, y: 10, w: 100, h: 100}, {x: 10, y: 10}, {x: 10, y: 10});
    runTest({x: 210, y: 210, w: 100, h: 100}, {x: 10, y: 10}, {x: 10, y: 10});

    // Larger fully overlapping element does not scroll when focused.
    runTest({x: 10, y: 10, w: 310, h: 310}, {x: 20, y: 20}, {x: 20, y: 20});
    runTest({x: 20, y: 20, w: 310, h: 310}, {x: 20, y: 20}, {x: 20, y: 20});

    // Smaller overlapping element scrolls to nearest edge when focused.
    runTest({x: 20, y: 20, w: 280, h: 280}, {x: 290, y: 290}, {x: 20, y: 20});
    runTest({x: 700, y: 700, w: 280, h: 280}, {x: 410, y: 410}, {x: 680, y: 680});

    // Larger overlapping element scrolls to nearest edge when focused.
    runTest({x: 10, y: 10, w: 320, h: 320}, {x: 320, y: 320}, {x: 30, y: 30});
    runTest({x: 670, y: 670, w: 320, h: 320}, {x: 380, y: 380}, {x: 670, y: 670});

    checkTestFailures();
}