Skip to content

GitLab

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

Percent height content should respect the fixed height of its containing cell 

Reland: https://codereview.chromium.org/992483002

When an element in a cell has a percent height and the cell has a fixed height we
currently let the element ignore the height on the cell and instead let its content
determine the height of the cell (and the row).

Instead we should follow FF/Presto/Edge and the rendering agreed on the WG list
and let the element calculate itself as a percentage of its parent, the cell's
height.

https://lists.w3.org/Archives/Public/www-style/2015Mar/0101.html

BUG=465096,468699

Review-Url: https://codereview.chromium.org/2037783002
Cr-Commit-Position: refs/heads/master@{#397799}
parent 19d55d34
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 33 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 28307938
......@@ -1180,6 +1180,13 @@ crbug.com/594672 virtual/trustedeventsdefaultaction/fast/events/iframe-object-on
crbug.com/594672 virtual/trustedeventsdefaultaction/fast/events/scale-and-scroll-iframe-body.html [ Failure Pass ]
crbug.com/594672 virtual/trustedeventsdefaultaction/fast/events/updateLayoutForHitTest.html [ Failure Pass ]
crbug.com/465096 fast/block/basic/quirk-percent-height-table-cell.html [ NeedsRebaseline ]
crbug.com/465096 fast/table/colspan-with-all-percent-cells.html [ NeedsRebaseline ]
crbug.com/465096 fast/html/details-writing-mode.html [ NeedsRebaseline ]
crbug.com/465096 fast/html/details-writing-mode-align-center.html [ NeedsRebaseline ]
crbug.com/465096 fast/html/details-writing-mode-align-left.html [ NeedsRebaseline ]
crbug.com/465096 fast/html/details-writing-mode-align-right.html [ NeedsRebaseline ]
crbug.com/603728 [ Linux ] virtual/gpu-rasterization/fast/images/color-profile-filter.html [ Failure Timeout Pass ]
crbug.com/593568 [ Win Debug ] virtual/threaded/fast/scroll-behavior/smooth-scroll/horizontal-smooth-scroll-in-rtl.html [ Failure ]
......
third_party/WebKit/LayoutTests/fast/block/basic/quirk-percent-height-table-cell-expected.txt
View file @ 28307938
......@@ -6,12 +6,12 @@ layer at (0,0) size 800x600
LayoutTable {TABLE} at (0,0) size 120x426 [border: (1px outset #808080)]
LayoutTableSection {TBODY} at (1,1) size 118x424
LayoutTableRow {TR} at (0,2) size 118x420
LayoutTableCell {TD} at (2,-48) size 114x520 [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=1]
LayoutTableCell {TD} at (2,2) size 114x420 [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 20x100 [bgcolor=#FFFF00]
LayoutTable {TABLE} at (2,102) size 110x416 [border: (1px outset #808080)]
LayoutTableSection {TBODY} at (1,1) size 108x414
LayoutTableRow {TR} at (0,2) size 108x410
LayoutTableCell {TD} at (2,52) size 104x310 [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=1]
LayoutTable {TABLE} at (2,102) size 110x316 [border: (1px outset #808080)]
LayoutTableSection {TBODY} at (1,1) size 108x314
LayoutTableRow {TR} at (0,2) size 108x310
LayoutTableCell {TD} at (2,2) size 104x310 [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 100x6
LayoutBlockFlow {DIV} at (0,0) size 100x6 [border: (3px solid #0000FF)]
LayoutBlockFlow {DIV} at (2,8) size 100x300 [bgcolor=#008000]
third_party/WebKit/LayoutTests/fast/table/colspan-with-all-percent-cells-expected.txt
View file @ 28307938
......@@ -6,11 +6,11 @@ layer at (0,0) size 800x276
LayoutTable {TABLE} at (0,0) size 607x260
LayoutTableSection {TBODY} at (0,0) size 607x260
LayoutTableRow {TR} at (0,2) size 607x154
LayoutTableCell {TD} at (2,2) size 603x154 [border: (1px solid #000000)] [r=0 c=0 rs=1 cs=3]
LayoutTable {TABLE} at (2,2) size 600x150
LayoutTableSection {TBODY} at (0,0) size 600x150
LayoutTableRow {TR} at (0,2) size 600x146
LayoutTableCell {TD} at (2,74) size 596x2 [r=0 c=0 rs=1 cs=1]
LayoutTableCell {TD} at (2,4) size 603x150 [border: (1px solid #000000)] [r=0 c=0 rs=1 cs=3]
LayoutTable {TABLE} at (2,2) size 600x146
LayoutTableSection {TBODY} at (0,0) size 600x146
LayoutTableRow {TR} at (0,2) size 600x142
LayoutTableCell {TD} at (2,72) size 596x2 [r=0 c=0 rs=1 cs=1]
LayoutTableRow {TR} at (0,158) size 607x100
LayoutTableCell {TD} at (2,158) size 112x4 [bgcolor=#008000] [border: (1px solid #000000)] [r=1 c=0 rs=1 cs=1]
LayoutTableCell {TD} at (116,158) size 375x4 [bgcolor=#0000FF] [border: (1px solid #000000)] [r=1 c=1 rs=1 cs=1]
......
third_party/WebKit/LayoutTests/fast/table/percent-height-content-in-fixed-height-cell-expected.txt 0 → 100644
View file @ 28307938
crbug.com/465096: Percent height content in a 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-cell.html 0 → 100644
View file @ 28307938
<!DOCTYPE html>
<style>
table {
width: 250px;
}
td {
width: 242px;
}
.cell-specified-height {
height: 202px;
}
.container {
height: 100%;
overflow-y: hidden;
border: 1px solid #ccc;
}
.content {
background-color: black;
height: 2000px;
width: 225px;
}
</style>
<table>
<td class="cell-specified-height">
<div class="container" data-expected-height=200>
<div class="content"></div>
</div>
</td>
</table>
<script src="../../resources/check-layout.js"></script>
<p> crbug.com/465096: Percent height content in a cell with a computed height should use the height of the cell. </p>
<div id="output"></div>
<script>
checkLayout('.container', output);
</script>
third_party/WebKit/LayoutTests/platform/linux/fast/html/details-writing-mode-align-center-expected.txt
View file @ 28307938
......@@ -33,8 +33,8 @@ layer at (0,0) size 800x600
LayoutTableCell {TH} at (74,150) size 27x32 [border: (1px inset #808080)] [r=3 c=1 rs=1 cs=1]
LayoutText {#text} at (6,6) size 15x19
text run at (6,6) width 15: "ltr"
LayoutTableCell {TD} at (103,104) size 124x124 [border: (1px solid #000000)] [r=3 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x120
LayoutTableCell {TD} at (103,106) size 124x120 [border: (1px solid #000000)] [r=3 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x116
LayoutBlockFlow {DETAILS} at (0,0) size 120x20
LayoutBlockFlow {SUMMARY} at (0,0) size 120x20
LayoutDetailsMarker {DIV} at (24.53,4) size 10.55x10.55: right
......@@ -76,8 +76,8 @@ layer at (0,0) size 800x600
LayoutTableCell {TH} at (74,276) size 27x32 [border: (1px inset #808080)] [r=4 c=1 rs=1 cs=1]
LayoutText {#text} at (6,6) size 15x19
text run at (6,6) width 15: "rtl"
LayoutTableCell {TD} at (103,230) size 124x124 [border: (1px solid #000000)] [r=4 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x120
LayoutTableCell {TD} at (103,232) size 124x120 [border: (1px solid #000000)] [r=4 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x116
LayoutBlockFlow {DETAILS} at (0,0) size 120x20
LayoutBlockFlow {SUMMARY} at (0,0) size 120x20
LayoutDetailsMarker {DIV} at (84.92,4) size 10.55x10.55: left
......
third_party/WebKit/LayoutTests/platform/linux/fast/html/details-writing-mode-align-left-expected.txt
View file @ 28307938
......@@ -33,8 +33,8 @@ layer at (0,0) size 800x600
LayoutTableCell {TH} at (74,150) size 27x32 [border: (1px inset #808080)] [r=3 c=1 rs=1 cs=1]
LayoutText {#text} at (6,6) size 15x19
text run at (6,6) width 15: "ltr"
LayoutTableCell {TD} at (103,104) size 124x124 [border: (1px solid #000000)] [r=3 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x120
LayoutTableCell {TD} at (103,106) size 124x120 [border: (1px solid #000000)] [r=3 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x116
LayoutBlockFlow {DETAILS} at (0,0) size 120x20
LayoutBlockFlow {SUMMARY} at (0,0) size 120x20
LayoutDetailsMarker {DIV} at (0,4) size 10.55x10.55: right
......@@ -76,8 +76,8 @@ layer at (0,0) size 800x600
LayoutTableCell {TH} at (74,276) size 27x32 [border: (1px inset #808080)] [r=4 c=1 rs=1 cs=1]
LayoutText {#text} at (6,6) size 15x19
text run at (6,6) width 15: "rtl"
LayoutTableCell {TD} at (103,230) size 124x124 [border: (1px solid #000000)] [r=4 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x120
LayoutTableCell {TD} at (103,232) size 124x120 [border: (1px solid #000000)] [r=4 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x116
LayoutBlockFlow {DETAILS} at (0,0) size 120x20
LayoutBlockFlow {SUMMARY} at (0,0) size 120x20
LayoutDetailsMarker {DIV} at (60.39,4) size 10.55x10.55: left
......
third_party/WebKit/LayoutTests/platform/linux/fast/html/details-writing-mode-align-right-expected.txt
View file @ 28307938
......@@ -33,8 +33,8 @@ layer at (0,0) size 800x600
LayoutTableCell {TH} at (74,150) size 27x32 [border: (1px inset #808080)] [r=3 c=1 rs=1 cs=1]
LayoutText {#text} at (6,6) size 15x19
text run at (6,6) width 15: "ltr"
LayoutTableCell {TD} at (103,104) size 124x124 [border: (1px solid #000000)] [r=3 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x120
LayoutTableCell {TD} at (103,106) size 124x120 [border: (1px solid #000000)] [r=3 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x116
LayoutBlockFlow {DETAILS} at (0,0) size 120x20
LayoutBlockFlow {SUMMARY} at (0,0) size 120x20
LayoutDetailsMarker {DIV} at (49.06,4) size 10.55x10.55: right
......@@ -76,8 +76,8 @@ layer at (0,0) size 800x600
LayoutTableCell {TH} at (74,276) size 27x32 [border: (1px inset #808080)] [r=4 c=1 rs=1 cs=1]
LayoutText {#text} at (6,6) size 15x19
text run at (6,6) width 15: "rtl"
LayoutTableCell {TD} at (103,230) size 124x124 [border: (1px solid #000000)] [r=4 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x120
LayoutTableCell {TD} at (103,232) size 124x120 [border: (1px solid #000000)] [r=4 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x116
LayoutBlockFlow {DETAILS} at (0,0) size 120x20
LayoutBlockFlow {SUMMARY} at (0,0) size 120x20
LayoutDetailsMarker {DIV} at (109.45,4) size 10.55x10.55: left
......
third_party/WebKit/LayoutTests/platform/linux/fast/html/details-writing-mode-expected.txt
View file @ 28307938
......@@ -33,8 +33,8 @@ layer at (0,0) size 800x600
LayoutTableCell {TH} at (74,150) size 27x32 [border: (1px inset #808080)] [r=3 c=1 rs=1 cs=1]
LayoutText {#text} at (6,6) size 15x19
text run at (6,6) width 15: "ltr"
LayoutTableCell {TD} at (103,104) size 124x124 [border: (1px solid #000000)] [r=3 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x120
LayoutTableCell {TD} at (103,106) size 124x120 [border: (1px solid #000000)] [r=3 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x116
LayoutBlockFlow {DETAILS} at (0,0) size 120x20
LayoutBlockFlow {SUMMARY} at (0,0) size 120x20
LayoutDetailsMarker {DIV} at (0,4) size 10.55x10.55: right
......@@ -76,8 +76,8 @@ layer at (0,0) size 800x600
LayoutTableCell {TH} at (74,276) size 27x32 [border: (1px inset #808080)] [r=4 c=1 rs=1 cs=1]
LayoutText {#text} at (6,6) size 15x19
text run at (6,6) width 15: "rtl"
LayoutTableCell {TD} at (103,230) size 124x124 [border: (1px solid #000000)] [r=4 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x120
LayoutTableCell {TD} at (103,232) size 124x120 [border: (1px solid #000000)] [r=4 c=2 rs=1 cs=1]
LayoutBlockFlow {DIV} at (2,2) size 120x116
LayoutBlockFlow {DETAILS} at (0,0) size 120x20
LayoutBlockFlow {SUMMARY} at (0,0) size 120x20
LayoutDetailsMarker {DIV} at (109.45,4) size 10.55x10.55: left
......
third_party/WebKit/Source/core/layout/LayoutBox.cpp
View file @ 28307938
......@@ -2733,6 +2733,15 @@ LayoutUnit LayoutBox::computePercentageLogicalHeight(const Length& height) const
availableHeight = stretchedFlexHeight;
} else if (hasOverrideContainingBlockLogicalHeight()) {
availableHeight = overrideContainingBlockContentLogicalHeight();
} else if (cbstyle.logicalHeight().isFixed()) {
LayoutUnit contentBoxHeight = cb->adjustContentBoxLogicalHeightForBoxSizing(cbstyle.logicalHeight().value());
availableHeight = cb->constrainContentBoxLogicalHeightByMinMax(
contentBoxHeight - cb->scrollbarLogicalHeight(), LayoutUnit(-1)).clampNegativeToZero();
if (cb->isTableCell()) {
includeBorderPadding = true;
// We're sizing content to the height from the cell's style so don't involve the intrinsic padding used to align the content.
availableHeight -= cb->computedCSSPaddingBefore() + cb->computedCSSPaddingAfter() + cb->borderBefore() + cb->borderAfter();
}
} else if (cb->isTableCell()) {
if (!skippedAutoHeightContainingBlock) {
// Table cells violate what the CSS spec says to do with heights. Basically we
......@@ -2754,9 +2763,6 @@ LayoutUnit LayoutBox::computePercentageLogicalHeight(const Length& height) const
availableHeight = cb->overrideLogicalContentHeight();
includeBorderPadding = true;
}
} else if (cbstyle.logicalHeight().isFixed()) {
LayoutUnit contentBoxHeight = cb->adjustContentBoxLogicalHeightForBoxSizing(LayoutUnit(cbstyle.logicalHeight().value()));
availableHeight = std::max(LayoutUnit(), cb->constrainContentBoxLogicalHeightByMinMax(contentBoxHeight - cb->scrollbarLogicalHeight(), LayoutUnit(-1)));
} else if (cbstyle.logicalHeight().hasPercent() && !isOutOfFlowPositionedWithSpecifiedHeight) {
// We need to recur and compute the percentage height for our containing block.
LayoutUnit heightWithScrollbar = cb->computePercentageLogicalHeight(cbstyle.logicalHeight());
......@@ -2789,10 +2795,8 @@ LayoutUnit LayoutBox::computePercentageLogicalHeight(const Length& height) const
LayoutUnit result = valueForLength(height, availableHeight);
if (includeBorderPadding) {
// FIXME: Table cells should default to box-sizing: border-box so we can avoid this hack.
// It is necessary to use the border-box to match WinIE's broken
// box model. This is essential for sizing inside
// table cells using percentage heights.
// TODO(rhogan) crbug.com/467378: Doing this for content inside tables cells is wrong, it should fill
// whatever height the cell makes available.
result -= borderAndPaddingLogicalHeight();
return std::max(LayoutUnit(), result);
}
......
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