Skip to content

GitLab

T
tangled
Commit 4a0b16b9 authored by rego@igalia.com's avatar rego@igalia.com
Browse files
Options

[css-grid] Percentage columns shouldn't include border and padding 

Subtract border and padding when we're calculating the breadth of the
columns in LayoutGrid::computeUsedBreadthOfSpecifiedLength().

Added test to check the behavior for both columns and rows.

BUG=529203
TEST=fast/css-grid-layout/grid-percent-track-margin-border-padding.html

Review URL: https://codereview.chromium.org/1321723008

git-svn-id: svn://svn.chromium.org/blink/trunk@201909 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent a10f594a
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 1 deletion
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding-expected.txt 0 → 100644
View file @ 4a0b16b9
This test checks that percentage tracks ignore grid container's margin, border and padding in order to calculate their breadths.
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html 0 → 100644
View file @ 4a0b16b9
<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
width: 100px;
height: 100px;
grid-template-columns: 20% 50% 30%;
grid-template-rows: 40% 60%;
}
.margin {
margin: 10px;
}
.border {
border: 5px solid black;
}
.padding {
padding: 20px;
}
</style>
<script src="../../resources/check-layout.js"></script>
</head>
<body onload="checkLayout('.grid');">
<p>This test checks that percentage tracks ignore grid container's margin, border and padding in order to calculate their breadths.</p>
<div class="grid">
<div data-expected-width="20" data-expected-height="40"></div>
<div data-expected-width="50" data-expected-height="40"></div>
<div data-expected-width="30" data-expected-height="40"></div>
<div data-expected-width="20" data-expected-height="60"></div>
<div data-expected-width="50" data-expected-height="60"></div>
<div data-expected-width="30" data-expected-height="60"></div>
</div>
<div class="grid margin">
<div data-expected-width="20" data-expected-height="40"></div>
<div data-expected-width="50" data-expected-height="40"></div>
<div data-expected-width="30" data-expected-height="40"></div>
<div data-expected-width="20" data-expected-height="60"></div>
<div data-expected-width="50" data-expected-height="60"></div>
<div data-expected-width="30" data-expected-height="60"></div>
</div>
<div class="grid border">
<div data-expected-width="20" data-expected-height="40"></div>
<div data-expected-width="50" data-expected-height="40"></div>
<div data-expected-width="30" data-expected-height="40"></div>
<div data-expected-width="20" data-expected-height="60"></div>
<div data-expected-width="50" data-expected-height="60"></div>
<div data-expected-width="30" data-expected-height="60"></div>
</div>
<div class="grid padding">
<div data-expected-width="20" data-expected-height="40"></div>
<div data-expected-width="50" data-expected-height="40"></div>
<div data-expected-width="30" data-expected-height="40"></div>
<div data-expected-width="20" data-expected-height="60"></div>
<div data-expected-width="50" data-expected-height="60"></div>
<div data-expected-width="30" data-expected-height="60"></div>
</div>
<div class="grid margin border">
<div data-expected-width="20" data-expected-height="40"></div>
<div data-expected-width="50" data-expected-height="40"></div>
<div data-expected-width="30" data-expected-height="40"></div>
<div data-expected-width="20" data-expected-height="60"></div>
<div data-expected-width="50" data-expected-height="60"></div>
<div data-expected-width="30" data-expected-height="60"></div>
</div>
<div class="grid margin padding">
<div data-expected-width="20" data-expected-height="40"></div>
<div data-expected-width="50" data-expected-height="40"></div>
<div data-expected-width="30" data-expected-height="40"></div>
<div data-expected-width="20" data-expected-height="60"></div>
<div data-expected-width="50" data-expected-height="60"></div>
<div data-expected-width="30" data-expected-height="60"></div>
</div>
<div class="grid border padding">
<div data-expected-width="20" data-expected-height="40"></div>
<div data-expected-width="50" data-expected-height="40"></div>
<div data-expected-width="30" data-expected-height="40"></div>
<div data-expected-width="20" data-expected-height="60"></div>
<div data-expected-width="50" data-expected-height="60"></div>
<div data-expected-width="30" data-expected-height="60"></div>
</div>
<div class="grid margin border padding">
<div data-expected-width="20" data-expected-height="40"></div>
<div data-expected-width="50" data-expected-height="40"></div>
<div data-expected-width="30" data-expected-height="40"></div>
<div data-expected-width="20" data-expected-height="60"></div>
<div data-expected-width="50" data-expected-height="60"></div>
<div data-expected-width="30" data-expected-height="60"></div>
</div>
</body>
</html>
third_party/WebKit/Source/core/layout/LayoutGrid.cpp
View file @ 4a0b16b9
......@@ -525,7 +525,7 @@ LayoutUnit LayoutGrid::computeUsedBreadthOfSpecifiedLength(GridTrackSizingDirect
{
ASSERT(trackLength.isSpecified());
// FIXME: The -1 here should be replaced by whatever the intrinsic height of the grid is.
return valueForLength(trackLength, direction == ForColumns ? logicalWidth() : std::max(LayoutUnit(), computeContentLogicalHeight(MainOrPreferredSize, style()->logicalHeight(), -1)));
return valueForLength(trackLength, direction == ForColumns ? logicalWidth() - borderAndPaddingLogicalWidth() : std::max(LayoutUnit(), computeContentLogicalHeight(MainOrPreferredSize, style()->logicalHeight(), -1)));
}
static bool sortByGridNormalizedFlexValue(const GridTrackForNormalization& track1, const GridTrackForNormalization& track2)
......
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