Skip to content

GitLab

T
tangled
Commit 1da432b8 authored by robhogan's avatar robhogan Committed by Commit bot
Browse files
Options

Calculate border-box dimensions correctly for cells 

When constraining a height on a cell according to box sizing we need to exclude the intrinsic
padding on table cells (calculated to line up the content of the cells with the
baseline of its neighbours) but include any collapsed borders the cells have
picked up from the row/table.

BUG=627305

Review-Url: https://codereview.chromium.org/2148513002
Cr-Commit-Position: refs/heads/master@{#406775}
parent 188b260f
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 17 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 1da432b8
......@@ -192,6 +192,8 @@ crbug.com/248938 virtual/threaded/transitions/transition-end-event-rendering.htm
crbug.com/542541 [ Debug ] fast/events/click-count.html [ Pass Failure ]
crbug.com/627305 fast/table/dynamic-descendant-percentage-height.html [ NeedsRebaseline ]
# TODO(oshima): Mac Android are currently not supported.
crbug.com/567837 [ Mac Android ] virtual/scalefactor200withzoom/fast/hidpi/static [ Skip ]
......
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-border-box-sized-cell-expected.txt 0 → 100644
View file @ 1da432b8
crbug.com/627305: Percent height content in a border-box sized cell with border and a computed height should use the height of the cell.
PASS
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-border-box-sized-cell-with-collapsed-border-expected.txt 0 → 100644
View file @ 1da432b8
crbug.com/627305: Percent height content in a border-box sized cell with a computed height should use the height of the cell.
PASS
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-border-box-sized-cell-with-collapsed-border-on-table-expected.txt 0 → 100644
View file @ 1da432b8
crbug.com/627305: Percent height content in a border-box sized cell with a computed height should use the height of the cell.
PASS
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-border-box-sized-cell-with-collapsed-border-on-table.html 0 → 100644
View file @ 1da432b8
<!DOCTYPE html>
<style>
td {
width: 50px;
height: 50px;
padding: 0px;
box-sizing: border-box;
}
#div {
height: 100%;
}
</style>
<table style="border-collapse:collapse; border: 18px solid lightblue;" id="table" data-expected-height=68 data-expected-width=68>
<tr id="row">
<td><div id="div" style="background:black" data-expected-height=32 data-expected-width=32></div></td>
</tr>
</table>
<script src="../../resources/check-layout.js"></script>
<p> crbug.com/627305: Percent height content in a border-box sized cell with a computed height should use the height of the cell. </p>
<div id="output"></div>
<script>
checkLayout('#table', output);
</script>
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-border-box-sized-cell-with-collapsed-border.html 0 → 100644
View file @ 1da432b8
<!DOCTYPE html>
<style>
td {
width: 50px;
height: 50px;
padding: 0px;
box-sizing: border-box;
}
#div {
height: 100%;
}
</style>
<table style="border-collapse:collapse" id="table" data-expected-height=68 data-expected-width=68>
<tr style="border:18px solid lightblue" id="row">
<td><div id="div" style="background:black" data-expected-height=32 data-expected-width=32></div></td>
</tr>
</table>
<script src="../../resources/check-layout.js"></script>
<p> crbug.com/627305: Percent height content in a border-box sized cell with a computed height should use the height of the cell. </p>
<div id="output"></div>
<script>
checkLayout('#table', output);
</script>
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-border-box-sized-cell-with-padding-expected.txt 0 → 100644
View file @ 1da432b8
crbug.com/627305: Percent height content in a border-box sized cell with border and a computed height should use the height of the cell.
PASS
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-border-box-sized-cell-with-padding.html 0 → 100644
View file @ 1da432b8
<!DOCTYPE html>
<style>
td {
width: 50px;
height: 50px;
padding: 9px;
box-sizing: border-box;
border: 9px solid lightblue;
}
#div {
height: 100%;
}
</style>
<table style="border-collapse:collapse" id="table" data-expected-height=59 data-expected-width=59>
<tr id="row">
<td><div id="div" style="background:black" data-expected-height=23 data-expected-width=23></div></td>
</tr>
</table>
<script src="../../resources/check-layout.js"></script>
<p> crbug.com/627305: Percent height content in a border-box sized cell with border and a computed height should use the height of the cell. </p>
<div id="output"></div>
<script>
checkLayout('#table', output);
</script>
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-border-box-sized-cell.html 0 → 100644
View file @ 1da432b8
<!DOCTYPE html>
<style>
td {
width: 50px;
height: 50px;
padding: 0px;
box-sizing: border-box;
border: 18px solid lightblue;
}
#div {
height: 100%;
}
</style>
<table style="border-collapse:collapse" id="table" data-expected-height=68 data-expected-width=68>
<tr id="row">
<td><div id="div" style="background:black" data-expected-height=32 data-expected-width=32></div></td>
</tr>
</table>
<script src="../../resources/check-layout.js"></script>
<p> crbug.com/627305: Percent height content in a border-box sized cell with border and a computed height should use the height of the cell. </p>
<div id="output"></div>
<script>
checkLayout('#table', output);
</script>
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-cell.html
View file @ 1da432b8
......@@ -25,7 +25,7 @@ td {
</style>
<table>
<td class="cell-specified-height">
<div class="container" data-expected-height=202>
<div class="container" data-expected-height=204>
<div class="content"></div>
</div>
</td>
......
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-content-box-sized-cell-expected.txt 0 → 100644
View file @ 1da432b8
crbug.com/627305: Percent height content in a content-box sized cell with a computed height should use the height of the cell.
PASS
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-content-box-sized-cell.html 0 → 100644
View file @ 1da432b8
<!DOCTYPE html>
<style>
td {
width: 50px;
height: 50px;
padding: 0px;
}
#div {
height: 100%;
}
</style>
<table style="border-collapse:collapse" id="table" data-expected-height=86 data-expected-width=86>
<tr style="border:18px solid lightblue" id="row">
<td><div id="div" style="background:black" data-expected-height=50 data-expected-width=50></div></td>
</tr>
</table>
<script src="../../resources/check-layout.js"></script>
<p> crbug.com/627305: Percent height content in a content-box sized cell with a computed height should use the height of the cell. </p>
<div id="output"></div>
<script>
checkLayout('#table', output);
</script>
third_party/WebKit/LayoutTests/platform/linux/fast/table/dynamic-descendant-percentage-height-expected.txt
View file @ 1da432b8
......@@ -6,17 +6,17 @@ layer at (0,0) size 800x600
LayoutBlockFlow {P} at (0,0) size 784x20
LayoutText {#text} at (0,0) size 327x19
text run at (0,0) width 327: "The following two green rectangles should be identical:"
LayoutTable {TABLE} at (0,36) size 266x106
LayoutTableSection {TBODY} at (0,0) size 266x106
LayoutTableRow {TR} at (0,2) size 266x102
LayoutTableCell {TD} at (2,2) size 262x102 [r=0 c=0 rs=1 cs=1]
LayoutBlockFlow {DIV} at (1,1) size 260x100 [bgcolor=#008000] [border: (3px solid #000000)]
LayoutTable {TABLE} at (0,36) size 266x112
LayoutTableSection {TBODY} at (0,0) size 266x112
LayoutTableRow {TR} at (0,2) size 266x108
LayoutTableCell {TD} at (2,2) size 262x108 [r=0 c=0 rs=1 cs=1]
LayoutBlockFlow {DIV} at (1,1) size 260x106 [bgcolor=#008000] [border: (3px solid #000000)]
LayoutText {#text} at (3,3) size 254x19
text run at (3,3) width 254: "This text should have a green background."
LayoutTable {TABLE} at (0,142) size 266x106
LayoutTableSection {TBODY} at (0,0) size 266x106
LayoutTableRow {TR} at (0,2) size 266x102
LayoutTableCell {TD} at (2,2) size 262x102 [r=0 c=0 rs=1 cs=1]
LayoutBlockFlow {DIV} at (1,1) size 260x100 [bgcolor=#008000] [border: (3px solid #000000)]
LayoutTable {TABLE} at (0,148) size 266x112
LayoutTableSection {TBODY} at (0,0) size 266x112
LayoutTableRow {TR} at (0,2) size 266x108
LayoutTableCell {TD} at (2,2) size 262x108 [r=0 c=0 rs=1 cs=1]
LayoutBlockFlow {DIV} at (1,1) size 260x106 [bgcolor=#008000] [border: (3px solid #000000)]
LayoutText {#text} at (3,3) size 254x19
text run at (3,3) width 254: "This text should have a green background."
third_party/WebKit/Source/core/layout/LayoutBox.cpp
View file @ 1da432b8
......@@ -1201,9 +1201,21 @@ void LayoutBox::clearExtraInlineAndBlockOffests()
gExtraBlockOffsetMap->remove(this);
}
static LayoutUnit borderPaddingWidthForBoxSizing(const LayoutBox* box)
{
// This excludes intrinsic padding on cells. It includes width from collapsed borders.
return box->computedCSSPaddingStart() + box->computedCSSPaddingEnd() + box->borderStart() + box->borderEnd();
}
static LayoutUnit borderPaddingHeightForBoxSizing(const LayoutBox* box)
{
// This excludes intrinsic padding on cells. It includes height from collapsed borders.
return box->computedCSSPaddingBefore() + box->computedCSSPaddingAfter() + box->borderBefore() + box->borderAfter();
}
LayoutUnit LayoutBox::adjustBorderBoxLogicalWidthForBoxSizing(float width) const
{
LayoutUnit bordersPlusPadding = borderAndPaddingLogicalWidth();
LayoutUnit bordersPlusPadding = borderPaddingWidthForBoxSizing(this);
LayoutUnit result(width);
if (style()->boxSizing() == BoxSizingContentBox)
return result + bordersPlusPadding;
......@@ -1212,7 +1224,7 @@ LayoutUnit LayoutBox::adjustBorderBoxLogicalWidthForBoxSizing(float width) const
LayoutUnit LayoutBox::adjustBorderBoxLogicalHeightForBoxSizing(float height) const
{
LayoutUnit bordersPlusPadding = borderAndPaddingLogicalHeight();
LayoutUnit bordersPlusPadding = borderPaddingHeightForBoxSizing(this);
LayoutUnit result(height);
if (style()->boxSizing() == BoxSizingContentBox)
return result + bordersPlusPadding;
......@@ -1223,7 +1235,7 @@ LayoutUnit LayoutBox::adjustContentBoxLogicalWidthForBoxSizing(float width) cons
{
LayoutUnit result(width);
if (style()->boxSizing() == BoxSizingBorderBox)
result -= borderAndPaddingLogicalWidth();
result -= borderPaddingWidthForBoxSizing(this);
return std::max(LayoutUnit(), result);
}
......@@ -1231,7 +1243,7 @@ LayoutUnit LayoutBox::adjustContentBoxLogicalHeightForBoxSizing(float height) co
{
LayoutUnit result(height);
if (style()->boxSizing() == BoxSizingBorderBox)
result -= borderAndPaddingLogicalHeight();
result -= borderPaddingHeightForBoxSizing(this);
return std::max(LayoutUnit(), result);
}
......@@ -2773,8 +2785,6 @@ LayoutUnit LayoutBox::computePercentageLogicalHeight(const Length& height) const
LayoutUnit contentBoxHeight = cb->adjustContentBoxLogicalHeightForBoxSizing(cbstyle.logicalHeight().value());
availableHeight = cb->constrainContentBoxLogicalHeightByMinMax(
contentBoxHeight - cb->scrollbarLogicalHeight(), LayoutUnit(-1)).clampNegativeToZero();
if (cb->isTableCell())
includeBorderPadding = true;
} else if (cb->isTableCell()) {
if (!skippedAutoHeightContainingBlock) {
// Table cells violate what the CSS spec says to do with heights. Basically we
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment