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 { | 6 .grid { |
7 grid-template-rows: (before) 50px (middle) 100px (after); | 7 grid-template-rows: (before) 50px (middle) 100px (after) 150px; |
8 grid-template-columns: 40px 80px 160px; | 8 grid-template-columns: 40px 80px 160px; |
9 } | 9 } |
10 | 10 |
11 .gridWithoutRepeat { | 11 .gridWithoutRepeat { |
12 grid-template-areas: "first second third" | 12 grid-template-areas: "first second third" |
13 "fourth fifth sixth"; | 13 "fourth fifth sixth"; |
14 } | 14 } |
15 | 15 |
16 .gridWithRepeat { | 16 .gridWithRepeat { |
17 grid-template-areas: "first second third" | 17 grid-template-areas: "first second third" |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
66 <div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data-
offset-y="0" data-expected-width="160" data-expected-height="50"></div> | 66 <div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data-
offset-y="0" data-expected-width="160" data-expected-height="50"></div> |
67 <div class="sizedToGridArea gridItemSecondArea" data-offset-x="40" data-
offset-y="0" data-expected-width="80" data-expected-height="50"></div> | 67 <div class="sizedToGridArea gridItemSecondArea" data-offset-x="40" data-
offset-y="0" data-expected-width="80" data-expected-height="50"></div> |
68 <div class="sizedToGridArea gridItemFirstArea" data-offset-x="0" data-of
fset-y="0" data-expected-width="40" data-expected-height="50"></div> | 68 <div class="sizedToGridArea gridItemFirstArea" data-offset-x="0" data-of
fset-y="0" data-expected-width="40" data-expected-height="50"></div> |
69 | 69 |
70 <div class="sizedToGridArea gridItemSpan2ThirdArea" data-offset-x="40" d
ata-offset-y="50" data-expected-width="240" data-expected-height="100"></div> | 70 <div class="sizedToGridArea gridItemSpan2ThirdArea" data-offset-x="40" d
ata-offset-y="50" data-expected-width="240" data-expected-height="100"></div> |
71 <div class="sizedToGridArea gridItemNamedGridLineWithArea" data-offset-x
="0" data-offset-y="0" data-expected-width="40" data-expected-height="150"></div
> | 71 <div class="sizedToGridArea gridItemNamedGridLineWithArea" data-offset-x
="0" data-offset-y="0" data-expected-width="40" data-expected-height="150"></div
> |
72 </div> | 72 </div> |
73 </div> | 73 </div> |
74 | 74 |
75 <div style="position: relative"> | 75 <div style="position: relative"> |
76 <div class="grid gridWithRepeat gridAutoFlowStack"> | 76 <div class="grid gridWithRepeat"> |
77 <!-- fifth and sixth are invalid named grid areas. --> | 77 <!-- fifth and sixth are invalid named grid areas. --> |
78 <div class="sizedToGridArea gridItemSixthArea" data-offset-x="0" data-of
fset-y="0" data-expected-width="40" data-expected-height="50"></div> | 78 <div class="sizedToGridArea gridItemSixthArea" data-offset-x="0" data-of
fset-y="150" data-expected-width="40" data-expected-height="150"></div> |
79 <div class="sizedToGridArea gridItemFifthArea" data-offset-x="0" data-of
fset-y="0" data-expected-width="40" data-expected-height="50"></div> | 79 <div class="sizedToGridArea gridItemFifthArea" data-offset-x="40" data-o
ffset-y="150" data-expected-width="80" data-expected-height="150"></div> |
80 | 80 |
81 <div class="sizedToGridArea gridItemFourthArea" data-offset-x="0" data-o
ffset-y="50" data-expected-width="120" data-expected-height="100"></div> | 81 <div class="sizedToGridArea gridItemFourthArea" data-offset-x="0" data-o
ffset-y="50" data-expected-width="120" data-expected-height="100"></div> |
82 <div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data-
offset-y="0" data-expected-width="160" data-expected-height="150"></div> | 82 <div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data-
offset-y="0" data-expected-width="160" data-expected-height="150"></div> |
83 <div class="sizedToGridArea gridItemSecondArea" data-offset-x="40" data-
offset-y="0" data-expected-width="80" data-expected-height="50"></div> | 83 <div class="sizedToGridArea gridItemSecondArea" data-offset-x="40" data-
offset-y="0" data-expected-width="80" data-expected-height="50"></div> |
84 <div class="sizedToGridArea gridItemFirstArea" data-offset-x="0" data-of
fset-y="0" data-expected-width="40" data-expected-height="50"></div> | 84 <div class="sizedToGridArea gridItemFirstArea" data-offset-x="0" data-of
fset-y="0" data-expected-width="40" data-expected-height="50"></div> |
85 | 85 |
86 <div class="sizedToGridArea gridItemSpan2ThirdArea" data-offset-x="40" d
ata-offset-y="50" data-expected-width="240" data-expected-height="100"></div> | 86 <div class="sizedToGridArea gridItemSpan2ThirdArea" data-offset-x="40" d
ata-offset-y="50" data-expected-width="240" data-expected-height="100"></div> |
87 <div class="sizedToGridArea gridItemNamedGridLineWithArea" data-offset-x
="0" data-offset-y="0" data-expected-width="40" data-expected-height="150"></div
> | 87 <div class="sizedToGridArea gridItemNamedGridLineWithArea" data-offset-x
="0" data-offset-y="0" data-expected-width="40" data-expected-height="150"></div
> |
88 </div> | 88 </div> |
89 </div> | 89 </div> |
90 | 90 |
91 </body> | 91 </body> |
92 </html> | 92 </html> |
OLD | NEW |