1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
<!doctype html>
<title>TBODY redistribution</title>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/resources/check-layout-th.js"></script>
<link rel='stylesheet' href='../support/base.css' />
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#height-distribution-algorithm" />
<style>
main table {
border-collapse: collapse;
background: #DDD;
}
main td {
padding: 0;
}
main td .empty {
line-height: 0;
}
main tbody tr:nth-child(1) {
background: rgba(255, 156, 0, 0.5);
}
main tbody tr:nth-child(2) {
background: rgba(255, 255, 0, 0.5);
}
main tbody tr:nth-child(3) {
background: rgba(0, 255, 0, 0.5);
}
</style>
<main>
<h1>TBODY/THEAD/TFOOT height redistribution.</h1>
<li>FF passes most of the tests.
<li>Legacy Chrome does not distribute TBODY height to rows.
<li>At the time this test was written, there was no spec. Currently, spec is in the process of being written.
<p>1) Empty row group's size is 0 with collapsed borders</p>
<table id="one" style="border-collapse: collapse;border-spacing: 10px 10px;border:10px solid green"
data-expected-width="0" data-expected-height="0">
<tbody>
<tr> </tr>
</tbody>
</table>
<p>2) Empty row group's size is 0 with separate borders.</p>
<table id="two" style="border-collapse: separate;border-spacing: 10px 10px;border:10px solid green"
data-expected-width="20" data-expected-height="20">
<tbody>
<tr> </tr>
</tbody>
</table>
<p>3) Row group height is redistributed to unconstrained rows in proportion to their size.</p>
<table id="three">
<tbody style="height:100px" data-expected-height="100">
<tr data-expected-height="25">
<td><div style="height:10px" >0,0</div></td>
</tr>
<tr data-expected-height="75">
<td><div style="height:30px" >0,0</div></td>
</tr>
</tbody>
</table>
<p>4) Constrained fixed rows do not grow if there are unconstrained rows</p>
<table id="four">
<tbody style="height:100px">
<tr style="height: 10px" data-expected-height="10">
<td></td>
</tr>
<tr data-expected-height="90">
<td>0,1</td>
</tr>
</tbody>
</table>
<p>5) Constrained percentage are resolved against row group height.</p>
<table id="five">
<tbody style="height:100px">
<tr style="height:25%" data-expected-height="25">
<td>0,0</td>
</tr>
<tr style="height:50%" data-expected-height="50">
<td>0,0</td>
</tr>
<tr data-expected-height="25">
<td>0,2</td>
</tr>
</tbody>
</table>
<p>6) Row group height is treated as min-height.</p>
<table id="six">
<tbody style="height:100px" data-expected-height="125">
<tr style="height:125px">
<td>0,0</td>
</tr>
</tbody>
</table>
<p>7) Constrained/unconstrained mix: row group height is distributed to unconstrained cells.</p>
<table id="seven">
<tbody style="height:100px">
<tr style="height:20px" data-expected-height="20"><td>0,0</td></tr>
<tr style="height:30px" data-expected-height="30"><td>0,1</td></tr>
<tr data-expected-height="25"><td>0,2</td></tr>
<tr data-expected-height="25"><td>0,3</td></tr>
</tbody>
</table>
<p>8) Unconstrained empty rows grow to fill table if all other rows are constrained. Not in FF.</p>
<table id="eight">
<tbody style="height:100px">
<tr style="height:20px" data-expected-height="20"><td>0,0</td></tr>
<tr style="height:30px" data-expected-height="30"><td>0,1</td></tr>
<tr data-expected-height="50"><td></td></tr>
</tbody>
</table>
<br>
<table id="eightplus">
<tbody style="height:100px">
<tr data-expected-height="50"><td></td></tr>
<tr style="height:20px" data-expected-height="20"><td>0,1</td></tr>
<tr style="height:30px" data-expected-height="30"><td>0,2</td></tr>
</tbody>
</table>
<p>9) Empty section height is not ignored</p>
<table id="nine" >
<tbody style="height:75px" data-expected-height="75">
</tbody>
</table>
<p>10) Section with empty rows is not considered empty.</p>
<p>In FF, empty section height is 100, but table's height is 0?</p>
<table id="nine" >
<tbody style="height:75px" data-expected-height="75">
<tr data-expected-height="25"></tr>
<tr data-expected-height="25"></tr>
<tr data-expected-height="25"></tr>
</tbody>
</table>
<p>11) Mixed constrained and unconstrained empty rows: only unconstrained rows grow.</p>
<table id="ten" style="width:50px">
<tbody style="height:50px" data-expected-height="50">
<tr style="height:0" data-expected-height="0"><td></td></tr>
<tr data-expected-height="25"><td></td></tr>
<tr data-expected-height="25"><td></td></tr>
</tbody>
</table>
</main>
<script>
checkLayout("table");
</script>
|
