[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.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: 40% 60%;
11     -webkit-grid-definition-rows: 30% 70%;
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 <body onload="checkLayout('.grid')">
38
39 <p>Test that percentage sized grid items inside percentage sized grid tracks get properly sized.</p>
40
41 <div style="position: relative">
42 <div class="grid" data-expected-width="400" data-expected-height="300">
43     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
44     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
45     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
46     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
47 </div>
48 </div>
49
50 <div style="position: relative">
51 <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
52     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
53     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
54     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
55     <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
56 </div>
57 </div>
58
59 <div style="position: relative">
60 <div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
61     <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
62     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
63     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
64     <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
65 </div>
66 </div>
67
68 <div style="position: relative">
69 <div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
70     <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
71     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
72     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
73     <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
74 </div>
75 </div>
76
77 </body>
78 </html>