[CSS Grid Layout] Properly support for z-index on grid items
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-item-z-index-stacking-context.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <style>
6 .grid {
7     -webkit-grid-template-rows: 100px;
8     -webkit-grid-template-columns: 200px 200px;
9     margin-top: 10px;
10 }
11 .red {
12     background-color: red;
13 }
14 .green {
15     background-color: green;
16 }
17 .positiveZIndex {
18     z-index: 10;
19 }
20 .negativeZIndex {
21     z-index: -5;
22 }
23 </style>
24 </head>
25 <body>
26 <p>This test checks that grid items with 'z-index' do produce a stacking context and that we honor the property.</p>
27 <p>For this test to pass, there should be no red below.</p>
28
29 <div class="grid">
30     <div class="sizedToGridArea green positiveZIndex"></div>
31     <div class="sizedToGridArea red"></div>
32 </div>
33
34 <div class="grid">
35     <div class="sizedToGridArea green"></div>
36     <div class="sizedToGridArea red negativeZIndex"></div>
37 </div>
38
39 <div class="grid">
40     <div class="sizedToGridArea green firstRowBothColumn"></div>
41     <div class="sizedToGridArea red negativeZIndex firstRowFirstColumn"></div>
42     <div class="sizedToGridArea red negativeZIndex firstRowSecondColumn"></div>
43 </div>
44
45 </body>
46 </html>