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 table vertical alignment (middle, bottom, not yet baseline) with differing height cells

Browse source 
Includes reftest for this behaviour
Patch fixes margin-collapse-clear-002,3,8,9
This commit is contained in:
Adam Casey 2016-07-23 01:07:16 +01:00
parent 2de3b119a9
commit b1debc40be
9 changed files with 102 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/layout/table_cell.rs
View file

@ -80,6 +80,10 @@ impl TableCellFlow {
if !flow::base(self).restyle_damage.contains(REFLOW) { if !flow::base(self).restyle_damage.contains(REFLOW) {
return; return;
} }
}
/// Position this cell's children according to vertical-align.
pub fn valign_children(&mut self) {
// Note to the reader: this code has been tested with negative margins. // Note to the reader: this code has been tested with negative margins.
// We end up with a "end" that's before the "start," but the math still works out. // We end up with a "end" that's before the "start," but the math still works out.
let first_start = flow::base(self).children.front().map(|kid| { let first_start = flow::base(self).children.front().map(|kid| {
@ -106,6 +110,9 @@ impl TableCellFlow {
let self_size = flow::base(self).position.size.block - let self_size = flow::base(self).position.size.block -
self.block_flow.fragment.border_padding.block_start_end(); self.block_flow.fragment.border_padding.block_start_end();
let kids_self_gap = self_size - kids_size; let kids_self_gap = self_size - kids_size;
// This offset should also account for vertical_align::T::baseline.
// Need max cell ascent from the first row of this cell.
let offset = match self.block_flow.fragment.style().get_box().vertical_align { let offset = match self.block_flow.fragment.style().get_box().vertical_align {
vertical_align::T::middle => kids_self_gap / 2, vertical_align::T::middle => kids_self_gap / 2,
vertical_align::T::bottom => kids_self_gap, vertical_align::T::bottom => kids_self_gap,

3
components/layout/table_row.rs
View file

@ -162,6 +162,9 @@ impl TableRowFlow {
// Assign the child's block size. // Assign the child's block size.
child_table_cell.block_flow.base.position.size.block = block_size; child_table_cell.block_flow.base.position.size.block = block_size;
// Now we know the cell height, vertical align the cell's children.
child_table_cell.valign_children();
// Write in the size of the relative containing block for children. (This information // Write in the size of the relative containing block for children. (This information
// is also needed to handle RTL.) // is also needed to handle RTL.)
child_table_cell.block_flow.base.early_absolute_position_info = child_table_cell.block_flow.base.early_absolute_position_info =

3
tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-002.htm.ini
View file

@ -1,3 +0,0 @@
[margin-collapse-clear-002.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-003.htm.ini
View file

@ -1,3 +0,0 @@
[margin-collapse-clear-003.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-008.htm.ini
View file

@ -1,3 +0,0 @@
[margin-collapse-clear-008.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-009.htm.ini
View file

@ -1,3 +0,0 @@
[margin-collapse-clear-009.htm]
type: reftest
expected: FAIL

24
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -6022,6 +6022,18 @@
"url": "/_mozilla/mozilla/table_valign_middle.html" "url": "/_mozilla/mozilla/table_valign_middle.html"
} }
], ],
"mozilla/table_valign_uneven_height.html": [
{
"path": "mozilla/table_valign_uneven_height.html",
"references": [
[
"/_mozilla/mozilla/table_valign_uneven_height_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/table_valign_uneven_height.html"
}
],
"mozilla/webgl/clearcolor.html": [ "mozilla/webgl/clearcolor.html": [
{ {
"path": "mozilla/webgl/clearcolor.html", "path": "mozilla/webgl/clearcolor.html",
@ -15110,6 +15122,18 @@
"url": "/_mozilla/mozilla/table_valign_middle.html" "url": "/_mozilla/mozilla/table_valign_middle.html"
} }
], ],
"mozilla/table_valign_uneven_height.html": [
{
"path": "mozilla/table_valign_uneven_height.html",
"references": [
[
"/_mozilla/mozilla/table_valign_uneven_height_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/table_valign_uneven_height.html"
}
],
"mozilla/webgl/clearcolor.html": [ "mozilla/webgl/clearcolor.html": [
{ {
"path": "mozilla/webgl/clearcolor.html", "path": "mozilla/webgl/clearcolor.html",

34
tests/wpt/mozilla/tests/mozilla/table_valign_uneven_height.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<meta charset="utf-8">
<title>Vertical Alignment for row with uneven height cells</title>
<link rel="match" href="table_valign_uneven_height_ref.html">
<style>
td {
border: 5px black solid;
border-spacing: 0;
padding: 0;
}
td {
vertical-align: middle;
background-color: green;
}
.b {
vertical-align: bottom;
}
div {
height: 50px;
width: 50px;
background-color: blue;
}
.c {
height: 100px !important;
background-color: red !important;
}
</style>
<table>
<tr>
<td><div class="c"></div></td>
<td><div></div></td>
<td class="b"><div></div></td>
</tr>
</table>

34
tests/wpt/mozilla/tests/mozilla/table_valign_uneven_height_ref.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<meta charset="utf-8">
<title>Reference: Vertical Alignment for row with uneven height cells</title>
<style>
td {
background-color: green;
border: 5px black solid;
border-spacing: 0;
padding: 0;
}
div {
height: 50px;
width: 50px;
background-color: blue;
}
.c {
height: 100px !important;
background-color: #f00 !important;
}
.middle {
margin-top: 25px;
margin-bottom: 25px;
}
.bottom {
margin-top: 50px;
}
</style>
<table>
<tr>
<td class="a"><div class="c"></div></td>
<td class="a"><div class="middle"></div></td>
<td class="b"><div class="bottom"></div></td>
</tr>
</table>