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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
|
<!doctype html>
<title>Columns widths fixed + padding</title>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/resources/check-layout-th.js"></script>
<link rel="stylesheet" type="text/css" href="./support/table-tentative.css">
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns" />
<style>
body {
background: #EEE;
}
main table {
background: gray;
border-spacing: 8px 8px;
table-layout: fixed;
}
main td {
padding: 6px;
background: #BFB;
font-size: 10px;
box-sizing:content-box;
}
main td > div {
display: inline-block;
background: rgba(56,162,56,0.3);
}
</style>
<main>
<h1>Fixed tables with padding: Compute column computed widths from assignable table width</h1>
<p>This test is the similar to table-width-redistribution-fixed.html,
except that all cells have 6px padding. The comments in this test refer to padding incompatibilities only.</p>
<p class="error">Percentage sizes and box-sizing are handled differently in FF/Chrome. In Chrome, %ge size is always treated as border-box size: column width = % * table width. In FF, box-sizing:content-box, %ge size is % * table width + border_padding, box-sizing:border-box same as Chrome. </p>
<h2>Fixed only</h2>
<p 3 class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/100
When table.css_width is < columns.css_width, how is the conflict resolved?
columns.css_width wins
<p class="error">
<table style="width:50px" data-expected-width=248>
<tr>
<td style="width:100px" data-expected-width=112>
<div style="width:50px">50</div><div style="width:50px">50</div></td>
<td style="width:100px" data-expected-width=112>
<div style="width:50px">50</div><div style="width:25px">25</div></td>
</tr>
</table>
<p 4 class="testdesc">Table: 300px; C0:100/100/200 C1:100/90/115
When table.css_width is > columns.css_width , how is the conflict resolved?
table.css_width wins</p>
<table style="width:300px" data-expected-width=300>
<tr>
<td style="width:100px" data-expected-width=138>
<div style="width:100px">100</div><div style="width:100px">100</div></td>
<td style="width:100px" data-expected-width=138>
<div style="width:90px">90</div><div style="width:25px">25</div></td>
</tr>
</table>
<p 5 class="testdesc">Table: 300px; C0:100/50/50 C1:100/100/100
Fixed cells must grow, but their min widths differ.
Fixed cells grow in proportion to their css width.
<table style="width:calc(300px + 24px)" data-expected-width=324>
<tr>
<td style="width:100px" data-expected-width=150>
<div style="width:50px">50</div></td>
<td style="width:100px" data-expected-width=150>
<div style="width:100px">100</div></td>
</tr>
</table>
<p 6 class="testdesc">Table: 50px; C0:100/50/50 C1:100/100/100
What happens when column.min_width > column.css_width
column.css_width wins over column.min_width.
<table style="width:100px" data-expected-width=248>
<tr>
<td style="width:100px" data-expected-width=112>
<div style="width:200px"></div></td>
<td style="width:100px" data-expected-width=112>
<div style="width:200px"></div></td>
</tr>
</table>
<p 7 class="testdesc">Table: 1px.
What happens to min_width when multiple cells specify css_width of the same column?
1st cell wins.
<table style="width:1px" data-expected-width=128>
<tr>
<td style="width:100px" data-expected-width=112>
<div style="width:200px">200</div></td>
</tr>
<td style="width:150px" data-expected-width=112>
<div style="width:150px">150</div></td>
</tr>
</table>
<h2>Colspan distribution</h2>
<p 9 class="testdesc">Table: 1px
Does column.min_width change with colspan distribution from later rows to first row?
No
<table style="width:1px" data-expected-width=86>
<tr>
<td data-expected-width=0>
<div style="width:50px"></div></td>
<td style="width:50px" data-expected-width=62>
<div style="width:50px"></div></td>
</tr>
<tr>
<td colspan=2 style="width:200px" data-expected-width=70>
<div style="width:200px"></div></td>
</tr>
</table>
<h2>Colspan header cells</h2>
<section>
<ol>
<li>Fixed/percentage colspan cells get distributed evenly.</li>
<li>Auto cells. Is the table even fixed?</li>
</ol>
<p 12 class="testdesc">Assi: 300px
To make CO distributable width 100, declare it as 100px+8px spacing - 12px padding.
To make C1 distributable width 200, declare it as 220px+8px spacing - 12px padding.
Fixed header cells with colspan get divided evenly.
</p>
<p class="error">Legacy chrome does not substract border spacing before distribution</p>
<table style="width:calc(300px + 40px)" data-expected-width=340>
<tr>
<td colspan=2 style="width:96px" data-expected-width=108>108</td>
<td colspan=2 style="width:196px" data-expected-width=208>208</td>
</tr>
<tr>
<td data-expected-width=50>1</td>
<td>1</td>
<td data-expected-width=100>1</td>
<td>1</td>
</tr>
</table>
<p 13 class="testdesc">Assignable: 400px, C0:40% C1:20% C2:40%
Percentage header cells with colspan.
Colspan cells do not distribute border_padding, they just distribute widths.
C0/1/2/3 will not have border-padding becaouse of colspan, C4 because border-box
TD0 splits
C0/1 get 20% max (40 + padding)/ 2 = 22px,
C2/3 10% and (20 + padding) / 2 = 12px max,
C4 40%, 12px percent border padding, and 52 max
Assignable width is 440 - 48, everyone gets according to percent.
C0/C1 get 80, C2/C3 get 40, and C4 gets 160.
</p>
<p class="error">Firefox seems to have a rounding error.</p>
<table style="width: calc(400px + 6 * 8px)" data-expected-width=448>
<tr>
<td colspan=2 style="width:40%" data-expected-width=168><div style="width:40px"></div></td>
<td colspan=2 style="width:20%" data-expected-width=88><div style="width:20px"></div></td>
<td style="width:40%;box-sizing:border-box" data-expected-width=160><div style="width:40px"></div></td>
</tr>
<tr>
<td data-expected-width=80>Auto</td>
<td data-expected-width=80>Auto</td>
<td data-expected-width=40>Auto</td>
<td data-expected-width=40>Auto</td>
<td data-expected-width=160>Auto</td>
</tr>
</table>
<p 14 class="testdesc">Assignable: 1px, C0 Auto/100 colspan=2 , C1 100/Auto
Auto header cells with colspan, table is min width
min_width does not get redistributed.
</p>
<table style="width:1px" data-expected-width=144>
<tr>
<td colspan=2 data-expected-width=8>
<div style="width:100px">100</div></td>
<td style="width:100px" data-expected-width=112>100</td>
</tr>
<tr>
<td data-expected-width=0>x</td>
<td data-expected-width=0>x</td>
<td data-expected-width=112>x</td>
</tr>
</table>
<p 16 class="testdesc">Assignable: 200; C0: colspan:2 Auto C1:colspan 8 Auto
Auto colspan cells, and nothing else. Tricky because this means that internally
table has to represent 10 cells, and wide cells that span beyond table width
are usually truncated.
C0: 20*2+8=48, C1: 20*8 + 7*8=216</p>
<table style="width:calc(200px + 88px)" data-expected-width=288>
<tr>
<td colspan=2 style="height:20px" data-expected-width=48></td>
<td colspan=8 style="height:20px" data-expected-width=216></td>
</tr>
</table>
<h2>Percentage only</h2>
<p 17 class="testdesc">Assignable: 100px;columns add to 100%, auto width
Column percent adds to a 100, but because box-sizing is content box,
Column content size adds up to table width.
Column border size adds up to table width + padding (36px).
Columns get scaled down.
Scaling down is not defined by standard. FF and NG differ by a px (rounding?).
</p>
<table style="width:calc(100px + 68px)" data-expected-width=168>
<tr>
<td style="width:50%" data-expected-width=63>50%</td>
<td style="width:30%" data-expected-width=42>30%</td>
<td style="width:20%" data-expected-width=31>20%</td>
</tr>
</table>
<p 18 class="testdesc">Assignable: 100px;columns add to 50%, auto width
Columns grow proportional to percent.
Slight rounding differences between NG and FF.
<table style="width:calc(100px + 68px)" data-expected-width=168>
<tr>
<td style="width:25%" data-expected-width=60>25%</td>
<td style="width:15%" data-expected-width=42.5>15%</td>
<td style="width:10%" data-expected-width=33>10%</td>
</tr>
</table>
<p 19 class="testdesc">Assignable: 100px;columns add to 50%, with min width
Min width is ignored.
<table style="width:calc(100px + 68px)" data-expected-width=168>
<tr>
<td style="width:50%" data-expected-width=63><div style="width:50px">50</div></td>
<td style="width:30%" data-expected-width=42><div style="width:50px">50</div></td>
<td style="width:20%" data-expected-width=31><div style="width:50px">50</div></td>
</tr>
</table>
<h2>Percentage/auto/fixed mix</h2>
<p class="testdesc">Assignable: 100px;C0:50% C1:100px
Clean split
<table style="width:calc(100px + 24px)" data-expected-width=124>
<tr>
<td style="width:50%" data-expected-width=38>50%</td>
<td style="width:50px" data-expected-width=62>50px</td>
</tr>
</table>
<p class="testdesc">Assignable: 100px;C0:60% C1:60px
Overconstrained: widths add up to 132.
Fixed widths get distributed first, percentage takes the rest.
<table style="width:calc(100px + 32px)" data-expected-width=132>
<tr>
<td style="width:20%" data-expected-width=9>20%</td>
<td style="width:60%" data-expected-width=19>60%</td>
<td style="width:60px" data-expected-width=72>60px</td>
</tr>
</table>
</main>
<script>
checkLayout("table");
</script>
|
