<!DOCTYPE html>
<html>
<style>
ul {
width: 978px;
position: absolute;
left: -2070px;
}
li {
position: absolute;
left: -690px;
}
#container {
height: 400px;;
position: relative;
overflow: hidden;
}
</style>
<body>
<div>This test checks that moving a positioned element with positioned children invalidates correctly.</div>
<div>The image below should be completely invalidated.</div>
<div id="container">
<ul id="list">
<li>
<img src="../resources/apple.jpg">
</li>
</ul>
</div>
<script src="../resources/text-based-repaint.js"></script>
<script>
function setUp() {
var elSlider = document.getElementById("list");
elSlider.style.left = "590px";
elSlider.offsetLeft;
runRepaintTest();
}
function repaintTest() {
var elSlider = document.getElementById("list");
elSlider.style.left = "690px";
};
window.addEventListener("load", setUp, false);
</script>
</body></html>