<!doctype HTML>
<!-- Tests a situation where the DOM descendant (but not stacking descendant)
of a composited layer squashes into a sibling. -->
<div style="width: 100px; height: 100px; background: lightblue; will-change: transform"></div>
<div style="width: 100px; height: 100px; backface-visibility: hidden;">
<div id=target style="width: 100px; height: 100px;
background: green; position: relative; margin-top: -50px"></div>
</div>
<script>
if (window.testRunner)
window.testRunner.waitUntilDone();
onload = () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
target.style.boxShadow = '5px 5px black';
if (window.testRunner)
window.testRunner.notifyDone();
});
});
}
</script>