blob: e3c6c6a6f4c6731bba7438dc54bef1a7a92df7e4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html>
<script src="resources/text-based-repaint.js"></script>
<body onload="runRepaintTest()">
You should see the text 'after' in the inner box, no mangled pixels.
<div id="parent1" style="position:absolute; width:300px; height:300px; overflow:hidden; border: solid 1px yellow">
<div id="parent2" style="position:absolute; width:300px; height:300px; overflow:hidden; border: solid 1px red">
<div style="position:absolute; width:100px; height:100px; left:100px; top:100px; border:solid 1px green; overflow:hidden">
<div id="target" style="width:50px; height:50px">before</div>
</div>
<div style="width:1000px; height:1000px;"></div>
</div>
</div>
</body>
<script>
parent1 = document.getElementById('parent1');
parent1.scrollTop = 7;
parent1.scrollLeft = 7;
parent2 = document.getElementById('parent2');
parent2.scrollTop = 7;
parent2.scrollLeft = 7;
function repaintTest() {
document.getElementById('target').innerText = 'after'
}
</script>
</html>
|