overflow-basic-003.html | Explore in Territory

<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#container {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  width: 200px;
  height: 100px;
}
#target {
  width: 300px;
  height: 200px;
  background-color: rgba(0, 255, 0, 0.3);
  position: absolute;
  top: 7px;
  left: 9px;
}
</style>
<p>Overflow, with position:absolute.</p>
<div id="container">
  <div id="target"></div>
</div>
<script>

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

test(function() {
  var targetStyle = window.getComputedStyle(target);
  assert_equals(container.scrollHeight,
    target.offsetHeight + parseInt(targetStyle.top));
  assert_equals(container.scrollWidth,
    target.offsetWidth + parseInt(targetStyle.left));
}, "absolute overflow");

test(function() {
  target.style.top = "20px";
  var targetStyle = window.getComputedStyle(target);
  assert_equals(container.scrollHeight,
    target.offsetHeight + parseInt(targetStyle.top));
  assert_equals(container.scrollWidth,
    target.offsetWidth + parseInt(targetStyle.left));
}, "absolute overflow, after target move");
</script>
chromium/third_party/blink/web_tests/overflow/overflow-basic-003.html
