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
|
<!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' href='../support/base.css' />
<link rel='stylesheet' href='/fonts/ahem.css' />
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-cell-measures" />
<style>
main table {
border-spacing: 0;
}
main td {
background: gray;
width:100px;
padding: 0;
}
.bb {
box-sizing: border-box;
}
</style>
<main>
<p>Tests of intrinsic cell sizing wrt border/padding, and box-sizing.</p>
<p>box-sizing: content-box; border px; padding px.
<table>
<tbody>
<tr>
<td data-expected-width="100">
<div style="width:50px;height:50px;background:yellow">0,0</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr data-expected-width="120">
<td data-expected-width="120" style="border:10px solid black">
<div style="height:50px;background:yellow">0,0</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr data-expected-width="140">
<td data-expected-width="140" style="border:10px solid black;padding: 10px">
<div style="height:50px;background:yellow">0,0</div>
</td>
</tr>
</tbody>
</table>
<p>box-sizing: border-box, border px, padding px.
<table>
<tbody>
<tr>
<td data-expected-width="100" class="bb">
<div style="height:50px;background:yellow">0,0</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td data-expected-width="100" class="bb" style="border:10px solid black" >
<div style="height:50px;background:yellow">0,0</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td data-expected-width="100" class="bb" style="border:10px solid black;padding: 10px">
<div style="height:50px;background:yellow">0,0</div>
</td>
</tr>
</tbody>
</table>
<p>box-sizing: border-box;padding: px, width px</p>
<li>td's intrinsic width must be >= border + padding</li>
<table style="width:300px;table-layout:fixed">
<tbody>
<tr>
<td style="box-sizing:border-box;padding-left:50px;padding-right:50px;width:30px" data-expected-width=100></td>
<td>auto</td>
<td>auto</td>
</tr>
</tbody>
</table>
<p>box-sizing: border-box; border px; padding %.</p>
<li>intrinsic size of % padding is 0.
<li>final size of % padding is computed against table's width.
<table data-expected-width="240">
<tbody>
<tr>
<td data-expected-width="120" style="border:10px solid black;padding: 30%">
<div data-offset-x="72" data-offset-y="72" style="width:50px;height:50px;background:yellow">0,0</div>
</td>
<td style="border:10px solid black;padding: 30%">
<div style="width:50px;height:50px;background:yellow">0,0</div>
</td>
</tr>
</tbody>
</table>
<table data-expected-width="300">
<caption><div style="width:300px;background:#ddd">300px caption</div></caption>
<tbody>
<tr>
<td data-expected-width="150" style="border:10px solid black;padding: 30%">
<div data-offset-x="90" data-offset-y="90" style="width:50px;height:50px;background:yellow">0,0</div>
</td>
<td style="border:10px solid black;padding: 30%">
<div style="width:50px;height:50px;background:yellow">0,0</div>
</td>
</tr>
</tbody>
</table>
<p>Block percentage resolution of TD children + row fixed height during intrinsic pass</p>
<li>Chrome Legacy/Edge/Safari do not use row fixed height for percetage block size resolution.</li>
<li>FF uses row height as %ge resolution size.</li>
<li>Proposal: file an issue on what is the right thing to do.</li>
<table>
<tr>
<td style="height:100px;font: 50px/1 Ahem;" id="cell" data-expected-height="100">
y<div style="display:inline-block;height:100%;width:50px;background:yellow"
data-expected-height="100"></div>
</td>
</tr>
</table>
<table>
<tr style="height:100px">
<td style="font: 50px/1 Ahem;" id="cell" data-expected-height="100">
y<div style="display:inline-block;height:100%;width:50px;background:yellow" data-expected-height="0"></div>
</td>
</tr>
</table>
</main>
<script>
checkLayout("table");
</script>
|
