[CSS Grid Layout] Properly support for z-index on grid items
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-item-z-index-change-repaint.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;
9     margin-top: 10px;
10 }
11 .red {
12     background-color: red;
13 }
14 .green {
15     background-color: green;
16 }
17 .negativeZIndex {
18     z-index: -1;
19 }
20 #item3 {
21     width: 200px;
22     height: 100px;
23 }
24 </style>
25 <script>
26 function modifyZIndexAndDisplay()
27 {
28     document.getElementById('item1').style.zIndex = 1;
29     document.getElementById('item2').style.zIndex = 1;
30
31     document.getElementById('grid3').className = "grid";
32 }
33
34 window.onload = modifyZIndexAndDisplay;
35 </script>
36 </head>
37 <body>
38 <div>
39     <p>This test checks that grid items correctly repaint when 'z-index' changes.</p>
40     <p>For this test to pass, there should be no red below.</p>
41 </div>
42
43 <div class="grid">
44     <div id="item1" class="sizedToGridArea green negativeZIndex"></div>
45     <div class="sizedToGridArea red"></div>
46 </div>
47
48 <div class="grid">
49     <div id="item2" class="sizedToGridArea green"></div>
50     <div class="sizedToGridArea red"></div>
51 </div>
52
53 <div id="grid3">
54     <div class="sizedToGridArea green"></div>
55     <div id="item3" class="red negativeZIndex"></div>
56 </div>
57
58 </body>
59 </html>