blob: 923b9d61808027c027047badfff1d81a43595d04 (
plain)
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
|
<style>
.container {
width: 2000000px;
}
.child {
display:inline-block;
background-color: orange;
height: 10px;
}
td {
padding: 0;
}
table {
border-spacing: 0;
display: inline-table;
outline: 5px solid salmon;
}
</style>
<!-- The inner div should fill the container. It doesn't right now because we artificially limit the table's maxPreferredLogicalWidth to 1000000.
See the related FIXME in TableLayoutAlgorithm.h.
-->
<div class="container">
<div style="display:inline-block; border: 5px solid salmon;" data-expected-width=2000000>
<table style="width:100%; background-color:green; table-layout:fixed"><tr><td>Content</td></tr></table>
</div>
</div>
<div class="container">
<!-- The 1 px extra is from the align=right td. -->
<table data-expected-width=20000>
<td align=right></td>
<td width="100%">
<div class="child" style="width: 10000px"></div><div class="child" style="width: 10000px"></div>
</td>
</table>
</div>
<div class="container">
<!-- The 1 px extra is from the align=right td. -->
<table data-expected-width=1000000>
<td align=right></td>
<td width="100%">
<div class="child" style="width: 500000px"></div><div class="child" style="width: 500000px"></div>
</td>
</table>
</div>
<div class="container">
<!-- The 1 px extra is from the align=right td. -->
<table data-expected-width=1500000>
<td align=right></td>
<td width="100%">
<div class="child" style="width: 500000px"></div><div class="child" style="width: 500000px"></div><div class="child" style="width: 500000px"></div>
</td>
</table>
</div>
<script src="../../resources/check-layout.js"></script>
<script>
checkLayout('.container');
</script>
|
