[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / percent-grid-item-in-percent-grid-track-update.html
1 <!DOCTYPE html>
2 <html>
3 <script>
4 if (window.testRunner)
5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
6 </script>
7 <link href="resources/grid.css" rel="stylesheet">
8 <style>
9 .grid {
10     -webkit-grid-definition-columns: 70% 30%;
11     -webkit-grid-definition-rows: 40% 60%;
12     width: 400px;
13     height: 300px;
14 }
15
16 .firstRowFirstColumn {
17     width: 100%;
18     height: 15px;
19 }
20
21 .firstRowSecondColumn {
22     width: 15px;
23     height: 100%;
24 }
25
26 .secondRowFirstColumn {
27     width: 50%;
28     height: 50%;
29 }
30
31 .secondRowSecondColumn {
32     width: -webkit-calc(100%);
33     height: -webkit-calc(100%);
34 }
35 </style>
36 <script src="../../resources/check-layout.js"></script>
37 <script>
38 function changeGridDefinitionsAndCheckValues()
39 {
40     var grid0 = document.getElementsByClassName("grid")[0];
41     var grid1 = document.getElementsByClassName("grid")[1];
42     var grid2 = document.getElementsByClassName("grid")[2];
43     document.body.offsetLeft;
44     grid0.style.webkitGridDefinitionColumns = "40% 60%";
45
46     grid1.style.webkitGridDefinitionRows = "30% 70%";
47
48     grid2.style.webkitGridDefinitionColumns = "40% 60%";
49     grid2.style.webkitGridDefinitionRows = "30% 70%";
50
51     checkLayout('.grid');
52 }
53 window.addEventListener("load", changeGridDefinitionsAndCheckValues, false);
54 </script>
55 <body>
56
57 <p>Test that changing percentage sized grid tracks make the grid items relayouts.</p>
58
59 <div style="position: relative">
60 <div class="grid" data-expected-width="400" data-expected-height="300">
61     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
62     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="120"></div>
63     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="90"></div>
64     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="180"></div>
65 </div>
66 </div>
67
68 <div style="position: relative">
69 <div class="grid" data-expected-width="400" data-expected-height="300">
70     <div class="firstRowFirstColumn" data-expected-width="280" data-expected-height="15"></div>
71     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
72     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="105"></div>
73     <div class="secondRowSecondColumn" data-expected-width="120" data-expected-height="210"></div>
74 </div>
75 </div>
76
77 <div style="position: relative">
78 <div class="grid" data-expected-width="400" data-expected-height="300">
79     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
80     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
81     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
82     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
83 </div>
84 </div>
85
86 </body>
87 </html>