blob: 33347c0784840a6d489caf343cda253b9e80acc0 [file] [log] [blame]
<!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>