blob: 3f93415780aedbebd8ab63e150412232032c5eb8 [file] [log] [blame]
<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#container {
overflow: auto;
position: relative;
border: 1px solid black;
width: 200px;
height: 100px;
}
#target {
width: 100px;
height: 50px;
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(0, 255, 0, 0.3);
transform: translateX(7px) translateY(9px)
}
</style>
<p>Overflow, transfrom 2D + absolute</p>
<p>This is LayoutNG-specific failure</p>
<div id="container">
<div id="target"></div>
</div>
<div id="log"></div>
<script>
var container = document.querySelector('#container');
var target = document.querySelector('#target');
test(function() {
var targetStyle = window.getComputedStyle(target);
assert_equals(container.scrollWidth,
container.clientWidth,
"width");
assert_equals(container.scrollHeight,
container.clientHeight,
"height");
}, "overflow, 2D transform + absolute, no scrollbars");
test(function() {
target.style.transform = "translateX(200px) translateY(200px)";
var targetStyle = window.getComputedStyle(target);
assert_equals(container.scrollWidth,
target.offsetWidth + 200 + parseInt(targetStyle.left),
"width");
assert_equals(container.scrollHeight,
target.offsetHeight + 200 + parseInt(targetStyle.top),
"height");
}, "overflow, 2D transform + absolute, after css change.");
</script>