blob: eafacbe893e693906863410850d7535ca2b28f86 [file] [log] [blame]
<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#container {
overflow: auto;
border: 1px solid black;
width: 200px;
height: 100px;
perspective: 100px;
}
#target {
width: 180px;
height: 100px;
background-color: rgba(0,255,0, 0.3);
transform: rotateY(-45deg)
}
</style>
<p>Overflow: transform 3D.</p>
<div id="container">
<div id="target"></div>
</div>
<script>
var container = document.querySelector('#container');
var target = document.querySelector('#target');
test(function() {
assert_greater_than(container.scrollWidth, target.offsetWidth, "width");
assert_greater_than(container.scrollHeight, target.offsetHeight, "height");
}, "3D overflow");
test(function() {
target.style.transform = "rotateY(-50deg)";
assert_greater_than(container.scrollWidth, target.offsetWidth, "width");
assert_greater_than(container.scrollHeight, target.offsetHeight, "height");
}, "3D overflow, after css change");
</script>