OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <link href="resources/grid.css" rel="stylesheet"> | 2 <link href="resources/grid.css" rel="stylesheet"> |
3 <link href="resources/grid-alignment.css" rel="stylesheet"> | 3 <link href="resources/grid-alignment.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 .grid { | 5 .grid { |
6 border: 5px solid magenta; | 6 border: 5px solid magenta; |
7 margin-bottom: 25px; | 7 margin-bottom: 25px; |
8 grid-template-rows: minmax(auto, 0px); | 8 grid-template-rows: minmax(auto, 0px); |
9 } | 9 } |
10 | 10 |
11 .item { | 11 .item { |
12 font: 25px/1 Ahem; | 12 font: 25px/1 Ahem; |
13 } | 13 } |
14 | 14 |
15 .container { width: 150px; } | 15 .container { width: 150px; } |
16 .borderPadding { | 16 .borderPaddingMargin { |
17 border-width: 2px 3px 5px 9px; | 17 border-width: 2px 3px 5px 9px; |
18 border-color: blue; | 18 border-color: blue; |
19 border-style: solid; | 19 border-style: solid; |
20 padding: 4px 9px 12px 20px; | 20 padding: 4px 9px 12px 20px; |
| 21 margin: 7px 10px 12px 14px; |
21 } | 22 } |
22 | 23 |
23 </style> | 24 </style> |
24 | 25 |
25 <script src="../../resources/testharness.js"></script> | 26 <script src="../../resources/testharness.js"></script> |
26 <script src="../../resources/testharnessreport.js"></script> | 27 <script src="../../resources/testharnessreport.js"></script> |
27 <script src="../../resources/check-layout-th.js"></script> | 28 <script src="../../resources/check-layout-th.js"></script> |
28 | 29 |
29 <body onload="checkLayout('.grid')"> | 30 <body onload="checkLayout('.grid')"> |
30 <div id="log"></div> | 31 <div id="log"></div> |
31 | 32 |
32 <h3>min-height: auto. grid height: auto</h3> | 33 <h3>min-height: auto. grid height: auto</h3> |
33 <div class="container"> | 34 <div class="container"> |
34 <div class="grid" data-expected-width="150" data-expected-height="35"> | 35 <div class="grid" data-expected-width="150" data-expected-height="35"> |
35 <div class="item" data-expected-width="140" data-expected-height="25">XX
XX</div> | 36 <div class="item" data-expected-width="140" data-expected-height="25">XX
XX</div> |
36 </div> | 37 </div> |
37 </div> | 38 </div> |
38 | 39 |
39 <div class="container"> | 40 <div class="container"> |
40 <div class="grid" data-expected-width="150" data-expected-height="58"> | 41 <div class="grid" data-expected-width="150" data-expected-height="77"> |
41 <div class="item borderPadding" data-expected-width="140" data-expected-
height="48">XXX</div> | 42 <div class="item borderPaddingMargin" data-expected-width="116" data-exp
ected-height="48">XXX</div> |
42 </div> | 43 </div> |
43 </div> | 44 </div> |
44 | 45 |
45 <h3>min-height: 0px. grid height: auto</h3> | 46 <h3>min-height: 0px. grid height: auto</h3> |
46 <div class="container"> | 47 <div class="container"> |
47 <div class="grid" data-expected-width="150" data-expected-height="10"> | 48 <div class="grid" data-expected-width="150" data-expected-height="10"> |
48 <div class="item" style="min-height: 0px;" data-expected-width="140" dat
a-expected-height="0">XXXX</div> | 49 <div class="item" style="min-height: 0px;" data-expected-width="140" dat
a-expected-height="0">XXXX</div> |
49 </div> | 50 </div> |
50 </div> | 51 </div> |
51 | 52 |
52 <div class="container"> | 53 <div class="container"> |
53 <div class="grid" data-expected-width="150" data-expected-height="33"> | 54 <div class="grid" data-expected-width="150" data-expected-height="52"> |
54 <div class="item borderPadding" style="min-height: 0px;" data-expected-w
idth="140" data-expected-height="23">XXX</div> | 55 <div class="item borderPaddingMargin" style="min-height: 0px;" data-expe
cted-width="116" data-expected-height="23">XXX</div> |
55 </div> | 56 </div> |
56 </div> | 57 </div> |
57 | 58 |
58 <h3>NO STRETCH min-height: 0px. grid height: auto</h3> | 59 <h3>NO STRETCH min-height: 0px. grid height: auto</h3> |
59 <div class="container"> | 60 <div class="container"> |
60 <div class="grid" data-expected-width="150" data-expected-height="10"> | 61 <div class="grid" data-expected-width="150" data-expected-height="10"> |
61 <div class="item alignSelfStart" style="min-height: 0px;" data-expected-
width="140" data-expected-height="25">XXXX</div> | 62 <div class="item alignSelfStart" style="min-height: 0px;" data-expected-
width="140" data-expected-height="25">XXXX</div> |
62 </div> | 63 </div> |
63 </div> | 64 </div> |
64 | 65 |
65 <div class="container"> | 66 <div class="container"> |
66 <div class="grid" data-expected-width="150" data-expected-height="33"> | 67 <div class="grid" data-expected-width="150" data-expected-height="52"> |
67 <div class="item alignSelfStart borderPadding" style="min-height: 0px;"
data-expected-width="140" data-expected-height="48">XXX</div> | 68 <div class="item alignSelfStart borderPaddingMargin" style="min-height:
0px;" data-expected-width="116" data-expected-height="48">XXX</div> |
68 </div> | 69 </div> |
69 </div> | 70 </div> |
70 | 71 |
71 <h3>min-height: 0px. grid height: 15px</h3> | 72 <h3>min-height: 0px. grid height: 15px</h3> |
72 <div class="container"> | 73 <div class="container"> |
73 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec
ted-height="25"> | 74 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec
ted-height="25"> |
74 <div class="item" style="min-height: 0px;" data-expected-width="140" dat
a-expected-height="0">XXXX</div> | 75 <div class="item" style="min-height: 0px;" data-expected-width="140" dat
a-expected-height="0">XXXX</div> |
75 </div> | 76 </div> |
76 </div> | 77 </div> |
77 | 78 |
78 <div class="container"> | 79 <div class="container"> |
79 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec
ted-height="25"> | 80 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec
ted-height="25"> |
80 <div class="item borderPadding" style="min-height: 0px;" data-expected-w
idth="140" data-expected-height="23">XXX</div> | 81 <div class="item borderPaddingMargin" style="min-height: 0px;" data-expe
cted-width="116" data-expected-height="23">XXX</div> |
81 </div> | 82 </div> |
82 </div> | 83 </div> |
83 | 84 |
84 <h3>NO STRETCH min-height: 0px. grid height: 15px</h3> | 85 <h3>NO STRETCH min-height: 0px. grid height: 15px</h3> |
85 <div class="container"> | 86 <div class="container"> |
86 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec
ted-height="25"> | 87 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec
ted-height="25"> |
87 <div class="item alignSelfStart" style="min-height: 0px;" data-expected-
width="140" data-expected-height="25">XXXX</div> | 88 <div class="item alignSelfStart" style="min-height: 0px;" data-expected-
width="140" data-expected-height="25">XXXX</div> |
88 </div> | 89 </div> |
89 </div> | 90 </div> |
90 | 91 |
91 <div class="container"> | 92 <div class="container"> |
92 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec
ted-height="25"> | 93 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec
ted-height="25"> |
93 <div class="item alignSelfStart borderPadding" style="min-height: 0px;"
data-expected-width="140" data-expected-height="48">XXX</div> | 94 <div class="item alignSelfStart borderPaddingMargin" style="min-height:
0px;" data-expected-width="116" data-expected-height="48">XXX</div> |
94 </div> | 95 </div> |
95 </div> | 96 </div> |
96 | 97 |
97 <h3>min-height: 30px. grid height: auto</h3> | 98 <h3>min-height: 30px. grid height: auto</h3> |
98 <div class="container"> | 99 <div class="container"> |
99 <div class="grid" data-expected-width="150" data-expected-height="40"> | 100 <div class="grid" data-expected-width="150" data-expected-height="40"> |
100 <div class="item" style="min-height: 30px;" data-expected-width="140" da
ta-expected-height="30">XXXX</div> | 101 <div class="item" style="min-height: 30px;" data-expected-width="140" da
ta-expected-height="30">XXXX</div> |
101 </div> | 102 </div> |
102 </div> | 103 </div> |
103 | 104 |
104 <div class="container"> | 105 <div class="container"> |
105 <div class="grid" data-expected-width="150" data-expected-height="63"> | 106 <div class="grid" data-expected-width="150" data-expected-height="82"> |
106 <div class="item borderPadding" style="min-height: 30px;" data-expected-
width="140" data-expected-height="53">XXX</div> | 107 <div class="item borderPaddingMargin" style="min-height: 30px;" data-exp
ected-width="116" data-expected-height="53">XXX</div> |
107 </div> | 108 </div> |
108 </div> | 109 </div> |
109 | 110 |
110 <h3>NO STRETCH min-height: 30px. grid height: auto</h3> | 111 <h3>NO STRETCH min-height: 30px. grid height: auto</h3> |
111 <div class="container"> | 112 <div class="container"> |
112 <div class="grid" data-expected-width="150" data-expected-height="40"> | 113 <div class="grid" data-expected-width="150" data-expected-height="40"> |
113 <div class="item alignSelfStart" style="min-height: 30px;" data-expected
-width="140" data-expected-height="30">XXXX</div> | 114 <div class="item alignSelfStart" style="min-height: 30px;" data-expected
-width="140" data-expected-height="30">XXXX</div> |
114 </div> | 115 </div> |
115 </div> | 116 </div> |
116 | 117 |
117 <div class="container"> | 118 <div class="container"> |
118 <div class="grid" data-expected-width="150" data-expected-height="63"> | 119 <div class="grid" data-expected-width="150" data-expected-height="82"> |
119 <div class="item alignSelfStart borderPadding" style="min-height: 30px;"
data-expected-width="140" data-expected-height="53">XXX</div> | 120 <div class="item alignSelfStart borderPaddingMargin" style="min-height:
30px;" data-expected-width="116" data-expected-height="53">XXX</div> |
120 </div> | 121 </div> |
121 </div> | 122 </div> |
122 | 123 |
123 </body> | 124 </body> |
OLD | NEW |