Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / will-change / stacking-context-creation.html
blob0985bd58cf5f5c1810e1612f3ed350077f85d87f
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .shouldStack {
6 position: absolute;
7 width: 150px;
8 height: 50px;
9 background-color: red;
12 .shouldNotStack {
13 position: absolute;
14 width: 150px;
15 height: 50px;
16 background-color: green;
19 .child {
20 position: relative;
21 top: 0px;
22 left: 0px;
23 width: 150px;
24 height: 50px;
25 background-color: green;
26 z-index: -1;
29 .shouldNotStack .child {
30 background-color: red;
33 #willChangeOpacity {
34 will-change: opacity;
35 top: 0px;
36 left: 0px;
39 #willChangeTransform {
40 will-change: -webkit-transform;
41 top: 0px;
42 left: 200px;
45 #willChangeTransformStyle {
46 will-change: -webkit-transform-style;
47 top: 0px;
48 left: 400px;
51 #willChangePerspective {
52 will-change: -webkit-perspective;
53 top: 100px;
54 left: 0px;
57 #willChangeMask {
58 will-change: -webkit-mask;
59 top: 100px;
60 left: 200px;
63 #willChangeMaskBoxImage {
64 will-change: -webkit-mask-box-image;
65 top: 100px;
66 left: 400px;
69 #willChangeClipPath {
70 will-change: -webkit-clip-path;
71 top: 200px;
72 left: 0px;
75 #willChangeBoxReflect {
76 will-change: -webkit-box-reflect;
77 top: 200px;
78 left: 200px;
81 #willChangeFilter {
82 will-change: -webkit-filter;
83 top: 200px;
84 left: 400px;
87 #willChangeZIndex {
88 will-change: z-index;
89 top: 300px;
90 left: 0px;
93 #willChangeMixBlendMode {
94 will-change: mix-blend-mode;
95 top: 300px;
96 left: 200px;
99 #willChangeIsolation {
100 will-change: isolation;
101 top: 300px;
102 left: 400px;
105 #willChangePosition {
106 will-change: position;
107 top: 400px;
108 left: 0px;
111 #willChangeCombination {
112 will-change: top, opacity, left;
113 top: 400px;
114 left: 200px;
117 #willChangeTop {
118 will-change: top;
119 top: 400px;
120 left: 400px;
122 </style>
123 </head>
125 <body>
126 <div id="willChangeOpacity" class="shouldStack">
127 <div class="child">opacity</div>
128 </div>
129 <div id="willChangeTransform" class="shouldStack">
130 <div class="child">-webkit-transform</div>
131 </div>
132 <div id="willChangeTransformStyle" class="shouldStack">
133 <div class="child">-webkit-transform-style</div>
134 </div>
135 <div id="willChangePerspective" class="shouldStack">
136 <div class="child">-webkit-perspective</div>
137 </div>
138 <div id="willChangeMask" class="shouldStack">
139 <div class="child">-webkit-mask</div>
140 </div>
141 <div id="willChangeMaskBoxImage" class="shouldStack">
142 <div class="child">-webkit-mask-box-image</div>
143 </div>
144 <div id="willChangeClipPath" class="shouldStack">
145 <div class="child">-webkit-clip-path</div>
146 </div>
147 <div id="willChangeBoxReflect" class="shouldStack">
148 <div class="child">-webkit-box-reflect</div>
149 </div>
150 <div id="willChangeFilter" class="shouldStack">
151 <div class="child">-webkit-filter</div>
152 </div>
153 <div id="willChangeZIndex" class="shouldStack">
154 <div class="child">z-index</div>
155 </div>
156 <div id="willChangeMixBlendMode" class="shouldStack">
157 <div class="child">mix-blend-mode</div>
158 </div>
159 <div id="willChangeIsolation" class="shouldStack">
160 <div class="child">isolation</div>
161 </div>
162 <div id="willChangePosition" class="shouldStack">
163 <div class="child">position</div>
164 </div>
165 <div id="willChangeCombination" class="shouldStack">
166 <div class="child">combination</div>
167 </div>
168 <div id="willChangeTop" class="shouldNotStack">
169 <div class="child">top</div>
170 </div>
171 </body>
173 </html>