Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 04:30:10 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix padding on tables. This fixes the TOC on wikipedia pages.

Browse source 
Ref: #2554
This commit is contained in:
Glenn Watson 2014-09-19 14:56:33 +10:00
parent b11a110e85
commit fd176d5387
5 changed files with 79 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/layout/table.rs
View file

@ -229,9 +229,13 @@ impl Flow for TableFlow {
}
}
}
let fragment_intrinsic_inline_sizes = self.block_flow.fragment.intrinsic_inline_sizes();
self.block_flow.base.intrinsic_inline_sizes.minimum_inline_size = min_inline_size;
self.block_flow.base.intrinsic_inline_sizes.preferred_inline_size =
geometry::max(min_inline_size, pref_inline_size);
self.block_flow.base.intrinsic_inline_sizes.surround_inline_size =
fragment_intrinsic_inline_sizes.surround_inline_size;
}
/// Recursively (top-down) determines the actual inline-size of child contexts and fragments. When

26
components/layout/table_wrapper.rs
View file

@ -228,24 +228,26 @@ impl TableWrapper {
let mut input = self.compute_inline_size_constraint_inputs(&mut table_wrapper.block_flow,
parent_flow_inline_size,
ctx);
let style = table_wrapper.block_flow.fragment.style();
// Get inline-start and inline-end paddings, borders for table.
// We get these values from the fragment's style since table_wrapper doesn't have it's own border or padding.
// input.available_inline-size is same as containing_block_inline-size in table_wrapper.
let padding = style.logical_padding();
let border = style.logical_border_width();
let padding_and_borders =
specified(padding.inline_start, input.available_inline_size) +
specified(padding.inline_end, input.available_inline_size) +
border.inline_start +
border.inline_end;
let computed_inline_size = match table_wrapper.table_layout {
FixedLayout => {
let fixed_cells_inline_size = table_wrapper.col_inline_sizes.iter().fold(Au(0),
|sum, inline_size| sum.add(inline_size));
let mut computed_inline_size = input.computed_inline_size.specified_or_zero();
let style = table_wrapper.block_flow.fragment.style();
// Get inline-start and inline-end paddings, borders for table.
// We get these values from the fragment's style since table_wrapper doesn't have it's own border or padding.
// input.available_inline-size is same as containing_block_inline-size in table_wrapper.
let padding = style.logical_padding();
let border = style.logical_border_width();
let padding_and_borders =
specified(padding.inline_start, input.available_inline_size) +
specified(padding.inline_end, input.available_inline_size) +
border.inline_start +
border.inline_end;
// Compare border-edge inline-sizes. Because fixed_cells_inline-size indicates content-inline-size,
// padding and border values are added to fixed_cells_inline-size.
computed_inline_size = geometry::max(
@ -308,7 +310,7 @@ impl TableWrapper {
inline_size + extra_inline_size.scale_by(1.0 / cell_len)
}).collect();
}
inline_size
inline_size + padding_and_borders
}
};
input.computed_inline_size = Specified(computed_inline_size);

1
tests/ref/basic.list
View file

@ -132,3 +132,4 @@ flaky_gpu,flaky_linux == acid2_noscroll.html acid2_ref_broken.html
== link_style_order.html link_style_order_ref.html
== percent_height.html percent_height_ref.html
== inline_block_with_margin_a.html inline_block_with_margin_ref.html
== table_padding_a.html table_padding_ref.html

33
tests/ref/table_padding_a.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'ahem';
src: url(fonts/ahem/ahem.ttf);
}
body {
margin: 0;
font-family: 'ahem';
font-size: 100px;
line-height: 1;
}
table {
background:green;
padding: 150px;
}
th {
color: yellow;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>X</th>
</tr>
</tbody>
</table>
</body>
</html>

27
tests/ref/table_padding_ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.bg {
background-color: green;
width: 400px;
height: 400px;
}
.fg {
background-color: yellow;
position: absolute;
width: 100px;
height: 100px;
left: 150px;
top: 150px;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="fg"></div>
</body>
</html>