Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / geometry / fixed-in-composited.html
blobf0e3b2ca7f730898754526e679de5663f8524d5f
1 <!DOCTYPE html>
3 <html>
4 <head>
5 <style type="text/css" media="screen">
6 body {
7 margin: 0;
8 height: 1000px;
11 .container {
12 position: absolute;
13 z-index: 1;
14 left: 95px;
15 top: 145px;
16 width: 50px;
17 height: 50px;
18 outline: 4px solid black;
21 .fixed {
22 position: fixed;
23 background-color: green;
24 height: 100px;
25 width: 100px;
26 top: 20px;
27 left: 20px;
30 .composited {
31 transform: translateZ(0);
34 .container.two {
35 left: 200px;
36 top: 100px;
39 .container.three {
40 left: 400px;
41 top: 100px;
44 .box {
45 width: 100px;
46 height: 100px;
49 .composited.box {
50 width: 60px;
51 height: 60px;
54 .transformed {
55 transform: translate(0, 0);
58 .indicator {
59 position: absolute;
60 background-color: red;
61 left: 20px;
62 top: 70px;
65 .indicator.two {
66 left: 220px;
67 top: 120px;
70 .indicator.three {
71 left: 420px;
72 top: 120px;
75 p {
76 margin-top: 150px;
78 </style>
79 <script type="text/javascript" charset="utf-8">
80 window.addEventListener('load', function() {
81 window.scrollBy(50, 50);
82 }, false);
83 </script>
84 </head>
85 <body>
87 <div class="indicator box"></div>
88 <div class="indicator box two"></div>
89 <div class="indicator box three"></div>
90 <div class="composited box" style="background-color: rgba(0, 0, 255, 0.2)"></div>
92 <div class="container">
93 <div class="fixed">
94 </div>
95 </div>
97 <div class="container composited two">
98 <div class="fixed">
99 </div>
100 </div>
102 <div class="container three">
103 <div class="transformed box">
104 <div class="fixed"></div>
105 </div>
106 </div>
108 <p>You should see no red above.</p>
110 </body>
111 </html>