[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / place-cell-by-index.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: 50px 60px;
11     -webkit-grid-definition-rows: 20px 30px;
12     max-width: 110px;
13 }
14
15 .firstRowFirstColumn {
16     width: 10px;
17     height: 15px;
18 }
19
20 .firstRowSecondColumn {
21     width: 10px;
22     height: 15px;
23 }
24
25 .secondRowFirstColumn {
26     width: 10px;
27     height: 15px;
28 }
29
30 .secondRowSecondColumn {
31     width: 10px;
32     height: 15px;
33 }
34 </style>
35 <script src="../../resources/check-layout.js"></script>
36 <body onload="checkLayout('.grid')">
37
38 <p>Test some simple grid layouts by positioning grid items by index.</p>
39
40 <!-- FIXME: The offsets assumes that grid-{column|row}-align are set to 'start', not 'stretch' (the default). Fix
41      them once we properly implement stretching / alignment. -->
42 <div style="position: relative">
43 <div class="grid" data-expected-width="110" data-expected-height="50">
44     <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
45     <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
46     <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
47     <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
48 </div>
49 </div>
50
51 <div style="position: relative">
52 <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="110" data-expected-height="50">
53     <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="35"></div>
54     <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="35"></div>
55     <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="15"></div>
56     <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="15"></div>
57 </div>
58 </div>
59
60 <div style="position: relative">
61 <div class="grid" style="-webkit-writing-mode: vertical-rl; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
62     <div class="firstRowFirstColumn" data-offset-x="40" data-offset-y="0"></div>
63     <div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="50"></div>
64     <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
65     <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>
66 </div>
67 </div>
68
69 <div style="position: relative">
70 <div class="grid" style="-webkit-writing-mode: vertical-lr; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
71     <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
72     <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50"></div>
73     <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
74     <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>
75 </div>
76 </div>
77
78 </body>
79 </html>