OLD | NEW |
| (Empty) |
1 <!-- Based on compositing/repaint/clipping-should-not-repaint-composited-descend
ants.html --> | |
2 <!DOCTYPE html> | |
3 <style> | |
4 .spacer { | |
5 position: relative; | |
6 width: 300px; | |
7 height: 300px; | |
8 } | |
9 | |
10 .clipping-container { | |
11 position: absolute; | |
12 height: 300px; | |
13 transform: translateZ(0); | |
14 } | |
15 | |
16 .with-initial-clipping { | |
17 clip: rect(50px, 250px, 250px, 50px); | |
18 } | |
19 | |
20 .clipped-composited-child { | |
21 width: 250px; | |
22 height: 250px; | |
23 background-color: yellow; | |
24 border: 1px solid black; | |
25 transform: translateZ(0); | |
26 } | |
27 </style> | |
28 <style id="alt1"> | |
29 .clipping-container { | |
30 width: 300px; | |
31 } | |
32 </style> | |
33 <style id="alt2"> | |
34 .clipping-container { | |
35 width: 100%; | |
36 clip: rect(100px, 200px, 200px, 100px); | |
37 } | |
38 </style> | |
39 <script src="resources/paint-invalidation-test.js"></script> | |
40 <script> | |
41 var alt1 = document.getElementById('alt1'); | |
42 var alt2 = document.getElementById('alt2'); | |
43 alt2.disabled = true; | |
44 | |
45 function paintInvalidationTest() { | |
46 alt2.disabled = false; | |
47 alt1.disabled = true; | |
48 } | |
49 | |
50 runPaintInvalidationTest(); | |
51 </script> | |
52 | |
53 <div class="spacer"> | |
54 <div class="clipping-container"> | |
55 <div class="clipped-composited-child"></div> | |
56 </div> | |
57 </div> | |
58 <div class="spacer"> | |
59 <div class="clipping-container with-initial-clipping"> | |
60 <div class="clipped-composited-child"></div> | |
61 </div> | |
62 </div> | |
OLD | NEW |