Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Fix table vertical alignment (middle, bottom, not yet baseline) with …
…differing height cells

Includes reftest for this behaviour
Patch fixes margin-collapse-clear-002,3,8,9
  • Loading branch information
adamncasey committed Jul 26, 2016
1 parent 2de3b11 commit b1debc4
Show file tree
Hide file tree
Showing 9 changed files with 102 additions and 12 deletions.
7 changes: 7 additions & 0 deletions components/layout/table_cell.rs
Expand Up @@ -80,6 +80,10 @@ impl TableCellFlow {
if !flow::base(self).restyle_damage.contains(REFLOW) {
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.
// 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| {
Expand All @@ -106,6 +110,9 @@ impl TableCellFlow {
let self_size = flow::base(self).position.size.block -
self.block_flow.fragment.border_padding.block_start_end();
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 {
vertical_align::T::middle => kids_self_gap / 2,
vertical_align::T::bottom => kids_self_gap,
Expand Down
3 changes: 3 additions & 0 deletions components/layout/table_row.rs
Expand Up @@ -162,6 +162,9 @@ impl TableRowFlow {
// Assign the child's 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
// is also needed to handle RTL.)
child_table_cell.block_flow.base.early_absolute_position_info =
Expand Down

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

24 changes: 24 additions & 0 deletions tests/wpt/mozilla/meta/MANIFEST.json
Expand Up @@ -6022,6 +6022,18 @@
"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": [
{
"path": "mozilla/webgl/clearcolor.html",
Expand Down Expand Up @@ -15110,6 +15122,18 @@
"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": [
{
"path": "mozilla/webgl/clearcolor.html",
Expand Down
34 changes: 34 additions & 0 deletions tests/wpt/mozilla/tests/mozilla/table_valign_uneven_height.html
@@ -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>
@@ -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>

0 comments on commit b1debc4

Please sign in to comment.