Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / squashing / visibility-composited-squashing.html
blobc1b9ff66ad2b3eb9b14ab03cb6164fbe6d2bc48f
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .set {
6 position: absolute;
7 top: 8px;
9 .box {
10 height: 100px;
11 width: 100px;
12 background-color: lightblue;
14 .squashed {
15 height: 40px;
16 width: 40px;
17 background-color: lightgreen;
18 position: absolute;
19 left: 16px;
21 .hidden {
22 visibility: hidden;
24 .visible {
25 visibility: visible;
27 .composited {
28 transform: translateZ(1px);
30 </style>
31 <script>
32 if (window.testRunner)
33 testRunner.waitUntilDone();
35 requestAnimationFrame(function() {
36 requestAnimationFrame(function() {
37 document.getElementById('target1').classList.add('visible');
38 document.getElementById('target2').classList.add('visible');
39 setTimeout(function() {
40 if (window.testRunner)
41 testRunner.notifyDone();
42 });
43 });
44 });
45 </script>
46 </head>
47 <body>
48 <!-- This test checks that squashed Layers are painted even if not all
49 of the Layers squahed into a given GraphicsLayer are visible. -->
50 <div class="set">
51 <div class="composited box"></div>
52 <div class="squashed hidden" style="top: 4px"></div>
53 <div id="target1" class="squashed hidden" style="top: 54px"></div>
54 </div>
56 <div class="set" style="top: 116px">
57 <div class="composited box"></div>
58 <div id="target2" class="squashed hidden" style="top: 4px"></div>
59 <div class="squashed hidden" style="top: 54px"></div>
60 </div>
61 </body>
62 </html>