OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <style> | 5 <style> |
| 6 .grid { |
| 7 grid-auto-columns: 5px; |
| 8 grid-auto-rows: 5px; |
| 9 } |
| 10 |
6 .gridWithoutRepeat { | 11 .gridWithoutRepeat { |
7 grid-template-columns: [a] 50px [b] 100px [c] 200px [d]; | 12 grid-template-columns: [a] 50px [b] 100px [c] 200px [d]; |
8 grid-template-rows: [e] 50px [f] 100px [g] 200px [h]; | 13 grid-template-rows: [e] 50px [f] 100px [g] 200px [h]; |
9 } | 14 } |
10 | 15 |
11 .gridWithRepeat { | 16 .gridWithRepeat { |
12 grid-template-columns: [b] 50px [b] 100px [b] 200px [b]; | 17 grid-template-columns: [b] 50px [b] 100px [b] 200px [b]; |
13 grid-template-rows: [g] 50px [g] 100px [g] 200px [g]; | 18 grid-template-rows: [g] 50px [g] 100px [g] 200px [g]; |
14 } | 19 } |
15 | 20 |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
67 | 72 |
68 <div style="position: relative"> | 73 <div style="position: relative"> |
69 <div class="grid gridWithoutRepeat"> | 74 <div class="grid gridWithoutRepeat"> |
70 <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-
y="150" data-expected-width="50" data-expected-height="200"></div> | 75 <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-
y="150" data-expected-width="50" data-expected-height="200"></div> |
71 </div> | 76 </div> |
72 </div> | 77 </div> |
73 | 78 |
74 | 79 |
75 <div style="position: relative"> | 80 <div style="position: relative"> |
76 <div class="grid gridWithRepeat"> | 81 <div class="grid gridWithRepeat"> |
77 <div class="sizedToGridArea gridItemBToD" data-offset-x="0" data-offset-
y="0" data-expected-width="50" data-expected-height="50"></div> | 82 <div class="sizedToGridArea gridItemBToD" data-offset-x="0" data-offset-
y="0" data-expected-width="355" data-expected-height="50"></div> |
78 </div> | 83 </div> |
79 </div> | 84 </div> |
80 | 85 |
81 <div style="position: relative"> | 86 <div style="position: relative"> |
82 <div class="grid gridWithRepeat"> | 87 <div class="grid gridWithRepeat"> |
83 <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-
y="0" data-expected-width="50" data-expected-height="50"></div> | 88 <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-
y="0" data-expected-width="50" data-expected-height="355"></div> |
84 </div> | 89 </div> |
85 </div> | 90 </div> |
86 | 91 |
87 <div style="position: relative"> | 92 <div style="position: relative"> |
88 <div class="grid gridWithoutRepeat"> | 93 <div class="grid gridWithoutRepeat"> |
89 <div class="sizedToGridArea gridItemInvalidNegativeGridLine" data-offset
-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"><
/div> | 94 <div class="sizedToGridArea gridItemInvalidNegativeGridLine" data-offset
-x="0" data-offset-y="0" data-expected-width="5" data-expected-height="10"></div
> |
90 </div> | 95 </div> |
91 </div> | 96 </div> |
92 </div> | 97 </div> |
93 | 98 |
94 <div style="position: relative"> | 99 <div style="position: relative"> |
95 <div class="grid gridWithoutRepeat"> | 100 <div class="grid gridWithoutRepeat"> |
96 <div class="sizedToGridArea gridItemAToSpanC" data-offset-x="0" data-off
set-y="0" data-expected-width="150" data-expected-height="50"></div> | 101 <div class="sizedToGridArea gridItemAToSpanC" data-offset-x="0" data-off
set-y="0" data-expected-width="150" data-expected-height="50"></div> |
97 </div> | 102 </div> |
98 </div> | 103 </div> |
99 | 104 |
100 <div style="position: relative"> | 105 <div style="position: relative"> |
101 <div class="grid gridWithoutRepeat"> | 106 <div class="grid gridWithoutRepeat"> |
102 <div class="sizedToGridArea gridItemFToSpanH" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="300"></div> | 107 <div class="sizedToGridArea gridItemFToSpanH" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="300"></div> |
103 </div> | 108 </div> |
104 </div> | 109 </div> |
105 | 110 |
106 <div style="position: relative"> | 111 <div style="position: relative"> |
107 <div class="grid gridWithoutRepeat"> | 112 <div class="grid gridWithoutRepeat"> |
108 <!-- There is only one 'b' so we should pick this one. Also span 2 'b' s
hould resolve to the same 'b'. | 113 <!-- Consider all the implicit lines to be called 'b' too. --> |
109 Thus being actually 'b' / span 1. --> | 114 <div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="355" data-o
ffset-y="0" data-expected-width="10" data-expected-height="50"></div> |
110 <div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="50" data-of
fset-y="0" data-expected-width="100" data-expected-height="50"></div> | |
111 </div> | 115 </div> |
112 </div> | 116 </div> |
113 | 117 |
114 <div style="position: relative"> | 118 <div style="position: relative"> |
115 <div class="grid gridWithoutRepeat"> | 119 <div class="grid gridWithoutRepeat"> |
116 <!-- There is only one 'g' so we should pick this one. Also both initial
and final position are equal so | 120 <!-- Consider all the implicit lines to be called 'g' too. --> |
117 this is resolved as span 1 / 'g'. --> | 121 <div class="sizedToGridArea gridItemSpan2GNegativeG" data-offset-x="0" d
ata-offset-y="0" data-expected-width="50" data-expected-height="160"></div> |
118 <div class="sizedToGridArea gridItemSpan2GNegativeG" data-offset-x="0" d
ata-offset-y="50" data-expected-width="50" data-expected-height="100"></div> | |
119 </div> | 122 </div> |
120 </div> | 123 </div> |
121 | 124 |
122 <div style="position: relative"> | 125 <div style="position: relative"> |
123 <div class="grid gridWithRepeat"> | 126 <div class="grid gridWithRepeat"> |
124 <!-- There is no 'a' or 'c' so it should default to auto / auto. --> | 127 <!-- There is no 'a' or 'c' so all the implicit lines are considered to
have those names. --> |
125 <div class="sizedToGridArea gridItemAToSpanC" data-offset-x="0" data-off
set-y="0" data-expected-width="50" data-expected-height="50"></div> | 128 <div class="sizedToGridArea gridItemAToSpanC" data-offset-x="355" data-o
ffset-y="0" data-expected-width="5" data-expected-height="50"></div> |
126 </div> | 129 </div> |
127 </div> | 130 </div> |
128 | 131 |
129 <div style="position: relative"> | 132 <div style="position: relative"> |
130 <div class="grid gridWithRepeat"> | 133 <div class="grid gridWithRepeat"> |
131 <!-- There is no 'f' or 'h' so it should default to auto / auto. --> | 134 <!-- There is no 'f' or 'h' so all the implicit lines are considered to
have those names. --> |
132 <div class="sizedToGridArea gridItemFToSpanH" data-offset-x="0" data-off
set-y="0" data-expected-width="50" data-expected-height="50"></div> | 135 <div class="sizedToGridArea gridItemFToSpanH" data-offset-x="0" data-off
set-y="0" data-expected-width="50" data-expected-height="360"></div> |
133 </div> | 136 </div> |
134 </div> | 137 </div> |
135 | 138 |
136 <div style="position: relative"> | 139 <div style="position: relative"> |
137 <div class="grid gridWithRepeat"> | 140 <div class="grid gridWithRepeat"> |
138 <div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="50" data-of
fset-y="0" data-expected-width="300" data-expected-height="50"></div> | 141 <div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="50" data-of
fset-y="0" data-expected-width="300" data-expected-height="50"></div> |
139 </div> | 142 </div> |
140 </div> | 143 </div> |
141 | 144 |
142 <div style="position: relative"> | 145 <div style="position: relative"> |
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
200 </div> | 203 </div> |
201 | 204 |
202 <div style="position: relative"> | 205 <div style="position: relative"> |
203 <div class="grid gridFromSpecs"> | 206 <div class="grid gridFromSpecs"> |
204 <div class="sizedToGridArea" style="grid-column: B 2 / span 1;" data-offse
t-x="100" data-expected-width="50"></div> | 207 <div class="sizedToGridArea" style="grid-column: B 2 / span 1;" data-offse
t-x="100" data-expected-width="50"></div> |
205 </div> | 208 </div> |
206 </div> | 209 </div> |
207 | 210 |
208 </body> | 211 </body> |
209 </html> | 212 </html> |
OLD | NEW |