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

Auto merge of #12593 - adamncasey:table-row-cell-height, r=pcwalton

Browse source 
Fix table vertical alignment (middle, bottom)

<!-- Please describe your changes on the following line: -->
Fixes table cell vertical alignment (middle, bottom, not yet baseline) when the row contains cells of differing heights.

Moved the work done earlier by @notriddle into a separate public function on TableCellFlow. This function is then called by TableRowFlow once the cell's block size has been calculator.

---

<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #12531 (github issue number if applicable).

<!-- Either: -->
- [X] There are tests for these changes

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/12593)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2016-07-26 20:17:02 -05:00 • committed by GitHub
commit b374582e23
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) {
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,

3
components/layout/table_row.rs
View file

@ -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 =

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"
}
],
"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",

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>