OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <link href="resources/grid.css" rel="stylesheet"> | |
4 <style> | |
5 .grid { | |
6 grid-auto-rows: 50px; | |
7 grid-auto-columns: 100px; | |
8 } | |
9 | |
10 .autoRowAutoColumnSpanning2 { | |
11 background-color: maroon; | |
12 grid-column: span 2; | |
Julien - ping for review
2014/05/16 10:08:10
That should resolve to 'auto / auto' when we expan
| |
13 grid-row: auto; | |
14 } | |
15 | |
16 .autoRowAutoColumnSpanning3 { | |
17 background-color: teal; | |
18 grid-column: span 3; | |
19 grid-row: auto; | |
20 } | |
21 | |
22 .autoRowSpanning2AutoColumn { | |
23 background-color: aqua; | |
24 grid-column: auto; | |
25 grid-row: span 2; | |
26 height: 100%; | |
27 } | |
28 | |
29 .autoRowSpanning3AutoColumn { | |
30 background-color: salmon; | |
31 grid-column: auto; | |
32 grid-row: span 3; | |
33 height: 100%; | |
34 } | |
35 | |
36 .autoRowSpanning2AutoColumnSpanning2 { | |
37 background-color: olive; | |
38 grid-column: span 2; | |
39 grid-row: span 2; | |
40 height: 100%; | |
41 } | |
42 </style> | |
43 <script src="../../resources/check-layout.js"></script> | |
44 <body onload="checkLayout('.grid');"> | |
45 | |
46 <p>Thist test checks that span is supported in auto-placement for automatic posi tions.</p> | |
47 | |
48 <div style="position: relative"> | |
49 <div class="grid gridAutoFlowRow"> | |
50 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0 " data-offset-y="0" data-expected-width="200" data-expected-height="50"></div> | |
51 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data- offset-y="0" data-expected-width="100" data-expected-height="50"></div> | |
52 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="50" data-expected-width="100" data-expected-height="50"></div> | |
53 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="1 00" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div > | |
54 <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0 " data-offset-y="100" data-expected-width="300" data-expected-height="50"></div> | |
55 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="0" data-offset-y="150" data-expected-width="200" data-expected-height="1 00"></div> | |
56 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data- offset-y="150" data-expected-width="100" data-expected-height="50"></div> | |
57 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data- offset-y="200" data-expected-width="100" data-expected-height="50"></div> | |
58 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="250" data-expected-width="100" data-expected-height="50"></div> | |
59 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="100" data-offset-y="250" data-expected-width="200" data-expected-height= "100"></div> | |
60 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="300" data-expected-width="100" data-expected-height="50"></div> | |
61 </div> | |
62 </div> | |
63 | |
64 <div style="position: relative"> | |
65 <div class="grid gridAutoFlowRow"> | |
66 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0 " data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> | |
67 <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" dat a-offset-y="0" data-expected-width="100" data-expected-height="50"></div> | |
68 <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="200" data -offset-y="0" data-expected-width="100" data-expected-height="50"></div> | |
69 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height=" 100"></div> | |
70 <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="0 " data-offset-y="100" data-expected-width="100" data-expected-height="150"></div > | |
71 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="100" data-offset-y="150" data-expected-width="200" data-expected-height= "100"></div> | |
72 </div> | |
73 </div> | |
74 | |
75 <div style="position: relative"> | |
76 <div class="grid gridAutoFlowColumn"> | |
77 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0 " data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> | |
78 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="100" data-expected-width="100" data-expected-height="50"></div> | |
79 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data- offset-y="0" data-expected-width="100" data-expected-height="50"></div> | |
80 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="1 00" data-offset-y="50" data-expected-width="100" data-expected-height="100"></di v> | |
81 <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="2 00" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div > | |
82 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="1 00"></div> | |
83 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data- offset-y="100" data-expected-width="100" data-expected-height="50"></div> | |
84 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="400" data- offset-y="100" data-expected-width="100" data-expected-height="50"></div> | |
85 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="500" data- offset-y="0" data-expected-width="100" data-expected-height="50"></div> | |
86 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="500" data-offset-y="50" data-expected-width="200" data-expected-height=" 100"></div> | |
87 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="600" data- offset-y="0" data-expected-width="100" data-expected-height="50"></div> | |
88 </div> | |
89 </div> | |
90 | |
91 <div style="position: relative"> | |
92 <div class="grid gridAutoFlowColumn"> | |
93 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0 " data-offset-y="0" data-expected-width="200" data-expected-height="50"></div> | |
94 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data- offset-y="50" data-expected-width="100" data-expected-height="50"></div> | |
95 <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-o ffset-y="100" data-expected-width="100" data-expected-height="50"></div> | |
96 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height=" 100"></div> | |
97 <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="2 00" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div> | |
98 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height=" 100"></div> | |
99 </div> | |
100 </div> | |
101 | |
102 </body> | |
103 </html> | |
OLD | NEW |