<!DOCTYPE html>
<style>
#container {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
#composited {
will-change: transform;
width: 100px;
height: 100px;
background-color: green;
}
</style>
This test verifies layout overflow will be recomputed when CSS transform is changed.
<div id="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
<div id="composited">
</div>
</div>
<script src="../../resources/check-layout.js"></script>
<script>
checkLayout("#container");
var composited = document.getElementById('composited');
composited.style.webkitTransform = 'translate3d(100px, 100px, 0)';
var container = document.getElementById('container');
container.setAttribute("data-expected-scroll-width", 200);
container.setAttribute("data-expected-scroll-height", 200);
checkLayout("#container");
</script>