Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / css3 / flexbox / z-index.html
blob499e686a6ad6b4666930b2811bc6c2994ebbfb99
1 <!DOCTYPE html>
2 <style>
3 .flex-item {
4 width: 50px;
5 height: 50px;
7 .positioned {
8 position: absolute;
9 left: 25px;
10 height: 25px;
11 width: 50px;
13 </style>
14 <div>This tests that z-index on non-positioned flex-items works. The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div>
15 <div style="position:relative">
16 <div style="display:flex;">
17 <div class="flex-item" style="z-index: 1; background-color: salmon;"></div>
18 <div class="flex-item" style="z-index: 100; background-color: orange;"></div>
19 </div>
20 <div class="positioned" style="top: 0; z-index: 150; background-color: green"></div>
21 <div class="positioned" style="top: 25px; z-index: 50; background-color: purple"></div>
22 </div>
23 <div style="position:relative">
24 <div style="display:flex;">
25 <img class="flex-item" style="z-index: 1; background-color: salmon;"></img>
26 <img class="flex-item" style="z-index: 100; background-color: orange;"></img>
27 </div>
28 <img class="positioned" style="top: 0; z-index: 150; background-color: green"></img>
29 <img class="positioned" style="top: 25px; z-index: 50; background-color: purple"></img>
30 </div>