blob: 6b958129211494f1b734293c357d9a509d4fd3d4 [file] [log] [blame]
<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#container {
writing-mode: vertical-rl;
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 + writing-mode: vertical-rl</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>