[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-item-change-row-repaint.html
1 <!DOCTYPE html>
2 <html>
3 <script src="../repaint/resources/text-based-repaint.js"></script>
4 <script>
5 if (window.testRunner)
6     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7
8 function repaintTest()
9 {
10     var gridItem = document.getElementsByClassName("sizedToGridArea")[0];
11     gridItem.style.webkitGridRow = "2";
12 }
13 window.addEventListener("load", runRepaintTest, false);
14 </script>
15 <link href="resources/grid.css" rel="stylesheet">
16 <style>
17 body {
18     font: 10px/1 Ahem;
19 }
20
21 .grid {
22     -webkit-grid-definition-rows: 50px 100px;
23     -webkit-grid-definition-columns: 100px 50px;
24     /* Make the grid shrink to fit. */
25     position: absolute;
26 }
27 .sizedToGridArea {
28     background-color: purple;
29 }
30 </style>
31 <body>
32 <div>This test checks that changing the grid-row on a grid item properly repaint. The final grid item should be 100px * 100px. There should be no trace of the grid item at the old position.</div>
33 <div class="grid">
34     <div class="sizedToGridArea"></div>
35 </div>
36 </body>
37 </html>