Skip to content

GitLab

T
tangled
Commit e60cf4ef authored by Hyunjune Kim's avatar Hyunjune Kim Committed by Commit Bot
Browse files
Options

[css-grid] Fix up that the width of nested grid container with margin:auto is zero 

the width of nested grid container with margin:auto is zero when their
item has 'max-height'. so the grid item's position is incorrect because
the value of auto-margin computed with 'width' is wrong. Because intrin-
sic width is not updated so they use the old intrinsic width.
This patch is checking the dirty of the intrinsic logical width when
the grid area is changed in |UpdateGridAreaLogicalSize|.

Bug: 1149143
Change-Id: I4d4bf839723f05c60ed91b80148caf7b504d5aa1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2503910Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Commit-Queue: Hyunjune Kim <hyunjune.kim@samsung.com>
Cr-Commit-Position: refs/heads/master@{#830086}
parent 64a41cf1
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 0 deletions
third_party/blink/renderer/core/layout/grid_track_sizing_algorithm.cc
View file @ e60cf4ef
......@@ -383,6 +383,8 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::MinContentForChild(
// FIXME: It's unclear if we should return the intrinsic width or the
// preferred width.
// See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
if (child.NeedsPreferredWidthsRecalculation())
child.SetIntrinsicLogicalWidthsDirty();
return child.PreferredLogicalWidths().min_size +
GridLayoutUtils::MarginLogicalWidthForChild(*GetLayoutGrid(),
child) +
......@@ -407,6 +409,8 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::MaxContentForChild(
// FIXME: It's unclear if we should return the intrinsic width or the
// preferred width.
// See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
if (child.NeedsPreferredWidthsRecalculation())
child.SetIntrinsicLogicalWidthsDirty();
return child.PreferredLogicalWidths().max_size +
GridLayoutUtils::MarginLogicalWidthForChild(*GetLayoutGrid(),
child) +
......
third_party/blink/web_tests/TestExpectations
View file @ e60cf4ef
......@@ -3805,6 +3805,7 @@ crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/grid-definiti
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.tentative.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/grid-items/grid-automatic-minimum-intrinsic-aspect-ratio-001.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/grid-items/grid-inline-items-001.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/grid-items/grid-inline-items-002.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-ref.html 0 → 100644
View file @ e60cf4ef
<!DOCTYPE html>
<meta charset="utf-8">
<title>Reference: 100x100 green square image in the middle</title>
<link rel="author" title="Hyunjune Kim" href="mailto:hyunjune.kim@samsung.com">
<style>
img {
display: block;
margin: auto;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<img src="./support/100x100-green.png">
</div>
third_party/blink/web_tests/external/wpt/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html 0 → 100644
View file @ e60cf4ef
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Margin auto and replaced grid item</title>
<link rel="author" title="Hyunjune Kim" href="mailto:hyunjune.kim@samsung.com">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#alignment">
<meta name="assert" content="Checks width of the nested grid container applied 'margin:auto' with a replaced item which has a property called max-height.">
<link rel="match" href="grid-auto-margin-and-replaced-item-001-ref.html">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
left:0;
right:0;
margin: auto;
z-index: -1;
}
.grid {
display: grid;
}
.nested-grid {
display: grid;
margin: auto;
}
img {
max-height: 100%;
}
</style>
<body onload="loadImage()">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="grid">
<div id="reference-overlapped-red"></div>
<div class="nested-grid">
<img id="replaced">
</div>
</div>
<script>
function loadImage() {
var replaced = document.getElementById("replaced");
replaced.src = "./support/100x100-green.png";
}
</script>
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