overflow-position-004.html | Explore in Territory

<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
html, body {
  margin: 0; padding: 0;
}
#container {
  overflow: scroll;
  direction: rtl;
  position: relative;
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 12px 0px black;
}
#target {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: green;
}
</style>
<p>Overflow: origin of absolutely positioned child with rtl parent with scrollbars should be next to scrollbar</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() {
  var targetOffset = getTargetOffset();
  assert_equals(targetOffset.top, container.clientTop, "top");
  assert_equals(targetOffset.left, container.clientLeft, "left");
}, "absolute position with rtl scrollbars");

</script>
chromium/third_party/blink/web_tests/overflow/overflow-position-004.html
