blob: d5f2aa76ac61eef22b7e40b8631639c3ae51de42 [file] [log] [blame]
<!-- Based on compositing/repaint/clipping-should-not-repaint-composited-descendants.html -->
<!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="resources/paint-invalidation-test.js"></script>
<script>
if (window.testRunner)
testRunner.dumpAsText();
var alt1 = document.getElementById('alt1');
var alt2 = document.getElementById('alt2');
alt2.disabled = true;
function paintInvalidationTest() {
alt2.disabled = false;
alt1.disabled = true;
}
runPaintInvalidationTest();
</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>