<!DOCTYPE html>
<style>
.spacer {
position: relative;
width: 300px;
height: 300px;
}
.clipping-container {
position: absolute;
height: 300px;
transform: translateZ(0);
}
.with-initial-clipping {
clip: rect(50px, 250px, 250px, 50px);
}
.clipped-composited-child {
width: 250px;
height: 250px;
background-color: yellow;
border: 1px solid black;
transform: translateZ(0);
}
</style>
<style id="alt1">
.clipping-container {
width: 300px;
}
</style>
<style id="alt2">
.clipping-container {
width: 100%;
clip: rect(100px, 200px, 200px, 100px);
}
</style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
var alt1 = document.getElementById('alt1');
var alt2 = document.getElementById('alt2');
alt2.disabled = true;
function repaintTest() {
alt2.disabled = false;
alt1.disabled = true;
}
runRepaintTest();
</script>
<div class="spacer">
<div class="clipping-container">
<div class="clipped-composited-child"></div>
</div>
</div>
<div class="spacer">
<div class="clipping-container with-initial-clipping">
<div class="clipped-composited-child"></div>
</div>
</div>