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
|
<!doctype html>
<title>TD box sizing</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/" />
<style>
main table {
background: gray;
border-spacing: 10px 10px;
table-layout: auto;
}
main td {
padding: 20px;
background: #BFB;
font-size: 10px;
box-sizing: border-box;
}
main td > div {
display: inline-block;
background: rgba(56,162,56,0.3);
}
</style>
<main>
<h1>TD and box sizing</h1>
<p>TD defaults to box-sizing: content-box. How does box-sizing affect final TD size?</p>
<ol>
<li>Auto table layout</li>
<ol>
<li>Percent cells ignore box-sizing, it is always border-box.</li>
<li>Fixed cells respect box-sizing.</li>
</ol>
<li>Fixed table layout</li>
<ol>
<li>Percent cells respect box sizing when computing cell width from assignable width.</li>
<li>Percent cells ignore box sizing when computing grid max from cell width.</li>
</ol>
</ol>
<h2>Table-layout: auto</h2>
<h4>TD width:%</h4>
<p class="testdesc">content-box, C0:50%/100 C1:Auto
Percent gets resolved to compute grid max size.
C0 max_width is max_width + 2 padding = 100 + 2*20 = 140
Table width is 1/50%*140 + 3*padding = 280+30 = 310
<table data-expected-width=310>
<tr>
<td style="width:50%;box-sizing:content-box" data-expected-width=140>
<div style="width:100px">50%/100</td>
<td data-expected-width=140>Auto</td>
</tr>
</table>
<p class="testdesc">border-box, C0:50%/100 C1:Auto
Same test as above, but box-sizing is border-box.
<table data-expected-width=310>
<tr>
<td style="width:50%;box-sizing:border-box" data-expected-width=140>
<div style="width:100px">50%/100</td>
<td data-expected-width=140>Auto</td>
</tr>
</table>
<p class="testdesc">content-box, C0:80%/100 C1:Auto
Percent gets resolved to compute final cell size from assignable width.
C0 border box width is 500 * 80%
<table style="width:530px" data-expected-width=530>
<tr>
<td style="width:80%;box-sizing:content-box" data-expected-width=400>
<div style="width:100px">80%/100</td>
<td data-expected-width=100>Auto</td>
</tr>
</table>
<p class="testdesc">border-box, C0:80%/100 C1:Auto
Same as above, but border-box
<table style="width:530px" data-expected-width=530>
<tr>
<td style="width:80%;box-sizing:border-box" data-expected-width=400>
<div style="width:100px">80%/100</td>
<td data-expected-width=100>Auto</td>
</tr>
</table>
<h4>TD width:fixed</h4>
<p class="testdesc">content-box, C0:100/Auto C1:100/Auto
Tests whether box-sizing affects how percentages are computed.
C0 max_width is max_width + 2 padding = 100 + 2*20 = 140
Table width is 1/50%*140 + 3*padding = 280+30 = 310
<table data-expected-width=310>
<tr>
<td style="width:100px;box-sizing:content-box" data-expected-width=140>100</td>
<td style="width:100px;box-sizing:content-box">100</td>
</tr>
</table>
<p class="testdesc">border-box, C0:100/Auto C1:100/Auto
Same test as above, but box-sizing is border-box.
<table data-expected-width=230>
<tr>
<td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td>
<td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td>
</tr>
</table>
<h4>TD height: fixed</h4>
<p class="testdesc">content-box, C0 height:100px
<table data-expected-height=160>
<tr>
<td style="height:100px;box-sizing:content-box" data-expected-height=140>100 height</td>
</tr>
</table>
<p class="testdesc">border-box, C0 height:100px
<table data-expected-height=120>
<tr>
<td style="height:100px;box-sizing:border-box" data-expected-height=100>100 height</td>
</tr>
</table>
<h2>Table-layout: fixed</h2>
<h4>TD width:%</h4>
<p class="testdesc">content-box, C0:50%/100 C1:Auto
Percent gets resolved to compute grid max size.
C0 max_width is max_width + 2 padding = 100 + 2*20 = 140
Table width is 1/50%*140 + 3*padding = 280+30 = 310
<table style="table-layout:fixed" data-expected-width=310>
<tr>
<td style="width:50%;box-sizing:content-box" data-expected-width=140>
<div style="width:100px">50%/100</td>
<td data-expected-width=140>Auto</td>
</tr>
</table>
<p class="testdesc">border-box, C0:50%/100 C1:Auto
Same test as above, but box-sizing is border-box.
<table style="table-layout:fixed" data-expected-width=310>
<tr>
<td style="width:50%;box-sizing:border-box" data-expected-width=140>
<div style="width:100px">50%/100</td>
<td data-expected-width=140>Auto</td>
</tr>
</table>
<p class="testdesc">content-box, C0:60%/100 C1:Auto
Percent gets resolved to compute final cell size from assignable width.
Assignable width is 530 - 3*10 = 500
C0 content box width is 500 * 60% + 40px padding = 340
C1 is 500 - 340 = 160
<p class="error">Legacy/Edge treat %ge TD as border box, and end up with 300px</p>
<table style="table-layout:fixed;width:530px" data-expected-width=530>
<tr>
<td style="width:60%;box-sizing:content-box" data-expected-width=340>
<div style="width:100px">60%/100</td>
<td data-expected-width=160>Auto</td>
</tr>
</table>
<p class="testdesc">border-box, C0:60%/100 C1:Auto
Same as above, but border-box
<table style="table-layout:fixed;width:530px" data-expected-width=530>
<tr>
<td style="width:60%;box-sizing:border-box" data-expected-width=300>
<div style="width:100px">80%/100</td>
<td data-expected-width=200>Auto</td>
</tr>
</table>
<h4>TD width:fixed</h4>
<p class="testdesc">content-box, C0:100/Auto C1:100/Auto
Tests whether box-sizing affects how percentages are computed.
C0 max_width is max_width + 2 padding = 100 + 2*20 = 140
Table width is 1/50%*140 + 3*padding = 280+30 = 310
<table style="table-layout:fixed" data-expected-width=310>
<tr>
<td style="width:100px;box-sizing:content-box" data-expected-width=140>100</td>
<td style="width:100px;box-sizing:content-box">100</td>
</tr>
</table>
<p class="testdesc">border-box, C0:100/Auto C1:100/Auto
Same test as above, but box-sizing is border-box.
<table style="table-layout:fixed" data-expected-width=230>
<tr>
<td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td>
<td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td>
</tr>
</table>
</main>
<script>
checkLayout("table");
</script>
|
