overflow-position-001.html | Explore in Territory

<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#container {
  writing-mode: horizontal-tb;
  overflow: scroll;
  position: relative;
  width: 200px;
  height: 100px;
  box-shadow: 0px 0px 12px 0px black;
}
#target {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 255, 0, 0.3);
}
</style>
<p>Overflow: child position and size</p>
<div id="container">
  <div id="target">foo</div>
</div>
<script>

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

function getTargetOffset() {
  var containerRect = container.getBoundingClientRect();
  var targetRect = target.getBoundingClientRect();
  return {
    top: targetRect.top - containerRect.top,
    left: targetRect.left - containerRect.left
  }
}

test(function() {
  assert_equals(target.offsetWidth, container.clientWidth, "width");
  assert_equals(target.offsetHeight, container.clientHeight, "height");
  var targetOffset = getTargetOffset();
  assert_equals(targetOffset.top, container.clientTop, "top");
  assert_equals(targetOffset.left, container.clientLeft, "left");
}, "position with scrollbars");

test(function() {
  container.style.direction = "rtl";
  assert_equals(target.offsetWidth, container.clientWidth, "width");
  assert_equals(target.offsetHeight, container.clientHeight, "height");
  var targetOffset = getTargetOffset();
  assert_equals(targetOffset.top, container.clientTop, "top");
  assert_equals(targetOffset.left, container.clientLeft, "left");
}, "position with scrollbars + rtl");
</script>
chromium/third_party/blink/web_tests/overflow/overflow-position-001.html
