diff options
9 files changed, 102 insertions, 12 deletions
diff --git a/components/layout/table_cell.rs b/components/layout/table_cell.rs index a71b78b8ace..18ff88e109a 100644 --- a/components/layout/table_cell.rs +++ b/components/layout/table_cell.rs @@ -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| { @@ -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, diff --git a/components/layout/table_row.rs b/components/layout/table_row.rs index 8fd0255f261..cb2f8f76c7c 100644 --- a/components/layout/table_row.rs +++ b/components/layout/table_row.rs @@ -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 = diff --git a/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-002.htm.ini b/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-002.htm.ini deleted file mode 100644 index ea6943c1c80..00000000000 --- a/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-002.htm.ini +++ /dev/null @@ -1,3 +0,0 @@ -[margin-collapse-clear-002.htm] - type: reftest - expected: FAIL diff --git a/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-003.htm.ini b/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-003.htm.ini deleted file mode 100644 index ef6e83de26c..00000000000 --- a/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-003.htm.ini +++ /dev/null @@ -1,3 +0,0 @@ -[margin-collapse-clear-003.htm] - type: reftest - expected: FAIL diff --git a/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-008.htm.ini b/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-008.htm.ini deleted file mode 100644 index 4a1f3812c59..00000000000 --- a/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-008.htm.ini +++ /dev/null @@ -1,3 +0,0 @@ -[margin-collapse-clear-008.htm] - type: reftest - expected: FAIL diff --git a/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-009.htm.ini b/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-009.htm.ini deleted file mode 100644 index 62b047475e6..00000000000 --- a/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-clear-009.htm.ini +++ /dev/null @@ -1,3 +0,0 @@ -[margin-collapse-clear-009.htm] - type: reftest - expected: FAIL diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json index 3fedff120e5..db8aa5be87d 100644 --- a/tests/wpt/mozilla/meta/MANIFEST.json +++ b/tests/wpt/mozilla/meta/MANIFEST.json @@ -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", @@ -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", diff --git a/tests/wpt/mozilla/tests/mozilla/table_valign_uneven_height.html b/tests/wpt/mozilla/tests/mozilla/table_valign_uneven_height.html new file mode 100644 index 00000000000..6668070831a --- /dev/null +++ b/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> diff --git a/tests/wpt/mozilla/tests/mozilla/table_valign_uneven_height_ref.html b/tests/wpt/mozilla/tests/mozilla/table_valign_uneven_height_ref.html new file mode 100644 index 00000000000..321132b7e7e --- /dev/null +++ b/tests/wpt/mozilla/tests/mozilla/table_valign_uneven_height_ref.html @@ -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> |