OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
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: 5px; | 7 grid-template-rows: 5px; |
8 grid-template-columns: 10px; | 8 grid-template-columns: 10px; |
9 } | 9 } |
10 | 10 |
(...skipping 13 matching lines...) Expand all Loading... |
24 grid-auto-columns: max-content; | 24 grid-auto-columns: max-content; |
25 } | 25 } |
26 </style> | 26 </style> |
27 </head> | 27 </head> |
28 <script src="../../resources/check-layout.js"></script> | 28 <script src="../../resources/check-layout.js"></script> |
29 <body onload="checkLayout('.grid');"> | 29 <body onload="checkLayout('.grid');"> |
30 | 30 |
31 <div>This test checks that grid rows / columns created via the auto-placement al
gorithm do follow, grid-auto-{rows|columns}.</div> | 31 <div>This test checks that grid rows / columns created via the auto-placement al
gorithm do follow, grid-auto-{rows|columns}.</div> |
32 | 32 |
33 <div class="unconstrainedContainer" style="position: relative"> | 33 <div class="unconstrainedContainer" style="position: relative"> |
34 <div class="grid gridAutoFixedFixed gridAutoFlowRow"> | 34 <div class="grid gridAutoFixedFixed gridAutoFlowRowDense"> |
35 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div
> | 35 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div
> |
36 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 36 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
37 </div> | 37 </div> |
38 </div> | 38 </div> |
39 | 39 |
40 <div class="unconstrainedContainer" style="position: relative"> | 40 <div class="unconstrainedContainer" style="position: relative"> |
41 <div class="grid gridAutoFixedFixed gridAutoFlowColumn"> | 41 <div class="grid gridAutoFixedFixed gridAutoFlowColumnDense"> |
42 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div
> | 42 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div
> |
43 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 43 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
44 </div> | 44 </div> |
45 </div> | 45 </div> |
46 | 46 |
47 <div class="unconstrainedContainer" style="position: relative"> | 47 <div class="unconstrainedContainer" style="position: relative"> |
48 <div class="grid gridAutoFixedFixed gridAutoFlowRow"> | 48 <div class="grid gridAutoFixedFixed gridAutoFlowRowDense"> |
49 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div
> | 49 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div
> |
50 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 50 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
51 </div> | 51 </div> |
52 </div> | 52 </div> |
53 | 53 |
54 <div class="unconstrainedContainer" style="position: relative"> | 54 <div class="unconstrainedContainer" style="position: relative"> |
55 <div class="grid gridAutoFixedFixed gridAutoFlowColumn"> | 55 <div class="grid gridAutoFixedFixed gridAutoFlowColumnDense"> |
56 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div
> | 56 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div
> |
57 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 57 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
58 </div> | 58 </div> |
59 </div> | 59 </div> |
60 | 60 |
61 <div class="unconstrainedContainer" style="position: relative"> | 61 <div class="unconstrainedContainer" style="position: relative"> |
62 <div class="grid gridAutoMinMax gridAutoFlowRow"> | 62 <div class="grid gridAutoMinMax gridAutoFlowRowDense"> |
63 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</di
v> | 63 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</di
v> |
64 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 64 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
65 </div> | 65 </div> |
66 </div> | 66 </div> |
67 | 67 |
68 <div class="unconstrainedContainer" style="position: relative"> | 68 <div class="unconstrainedContainer" style="position: relative"> |
69 <div class="grid gridAutoMinMax gridAutoFlowColumn"> | 69 <div class="grid gridAutoMinMax gridAutoFlowColumnDense"> |
70 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</di
v> | 70 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</di
v> |
71 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 71 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
72 </div> | 72 </div> |
73 </div> | 73 </div> |
74 | 74 |
75 <div class="unconstrainedContainer" style="position: relative"> | 75 <div class="unconstrainedContainer" style="position: relative"> |
76 <div class="grid gridAutoMinMax gridAutoFlowRow"> | 76 <div class="grid gridAutoMinMax gridAutoFlowRowDense"> |
77 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</di
v> | 77 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</di
v> |
78 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 78 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
79 </div> | 79 </div> |
80 </div> | 80 </div> |
81 | 81 |
82 <div class="unconstrainedContainer" style="position: relative"> | 82 <div class="unconstrainedContainer" style="position: relative"> |
83 <div class="grid gridAutoMinMax gridAutoFlowColumn"> | 83 <div class="grid gridAutoMinMax gridAutoFlowColumnDense"> |
84 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</di
v> | 84 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</di
v> |
85 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 85 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
86 </div> | 86 </div> |
87 </div> | 87 </div> |
88 | 88 |
89 <div class="unconstrainedContainer" style="position: relative"> | 89 <div class="unconstrainedContainer" style="position: relative"> |
90 <div class="grid gridAutoMinMaxContent gridAutoFlowRow"> | 90 <div class="grid gridAutoMinMaxContent gridAutoFlowRowDense"> |
91 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</di
v> | 91 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</di
v> |
92 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 92 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
93 </div> | 93 </div> |
94 </div> | 94 </div> |
95 | 95 |
96 <div class="unconstrainedContainer" style="position: relative"> | 96 <div class="unconstrainedContainer" style="position: relative"> |
97 <div class="grid gridAutoMinMaxContent gridAutoFlowColumn"> | 97 <div class="grid gridAutoMinMaxContent gridAutoFlowColumnDense"> |
98 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div
> | 98 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div
> |
99 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 99 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
100 </div> | 100 </div> |
101 </div> | 101 </div> |
102 | 102 |
103 <div class="unconstrainedContainer" style="position: relative"> | 103 <div class="unconstrainedContainer" style="position: relative"> |
104 <div class="grid gridAutoMinMaxContent gridAutoFlowRow"> | 104 <div class="grid gridAutoMinMaxContent gridAutoFlowRowDense"> |
105 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div
> | 105 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div
> |
106 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 106 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
107 </div> | 107 </div> |
108 </div> | 108 </div> |
109 | 109 |
110 <div class="unconstrainedContainer" style="position: relative"> | 110 <div class="unconstrainedContainer" style="position: relative"> |
111 <div class="grid gridAutoMinMaxContent gridAutoFlowColumn"> | 111 <div class="grid gridAutoMinMaxContent gridAutoFlowColumnDense"> |
112 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</di
v> | 112 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</di
v> |
113 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 113 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
114 </div> | 114 </div> |
115 </div> | 115 </div> |
116 | 116 |
117 </body> | 117 </body> |
118 </html> | 118 </html> |
OLD | NEW |