Skip to content

GitLab

T
tangled
Commit b47a1d69 authored by Oriol Brufau's avatar Oriol Brufau Committed by Commit Bot
Browse files
Options

[css-grid] Update item placement when grid-template-areas changes 

Before r747669, both explicit and implicit named lines were stored in
NamedGridColumnLines and NamedGridRowLines. But that patch moved the
implicit ones into their own ImplicitNamedGridColumnLines and
ImplicitNamedGridRowLines fields.

However, LayoutGrid::NamedGridLinesDefinitionDidChange was not updated
to also look at the new fields. Therefore, a dynamic change in
grid-template-areas might not force the grid items to be placed again.

BUG=1066679

TEST=external/wpt/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html

Change-Id: I4b6ff2de1f1c13f985b146169f39283613defc88
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132397Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#755548}
parent b10a5ca2
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 1 deletion
third_party/blink/renderer/core/layout/layout_grid.cc
View file @ b47a1d69
...@@ -194,7 +194,12 @@ bool LayoutGrid::ExplicitGridDidResize(const ComputedStyle& old_style) const { ...@@ -194,7 +194,12 @@ bool LayoutGrid::ExplicitGridDidResize(const ComputedStyle& old_style) const {
bool LayoutGrid::NamedGridLinesDefinitionDidChange( bool LayoutGrid::NamedGridLinesDefinitionDidChange(
const ComputedStyle& old_style) const { const ComputedStyle& old_style) const {
return old_style.NamedGridRowLines() != StyleRef().NamedGridRowLines() || return old_style.NamedGridRowLines() != StyleRef().NamedGridRowLines() ||
old_style.NamedGridColumnLines() != StyleRef().NamedGridColumnLines(); old_style.NamedGridColumnLines() !=
StyleRef().NamedGridColumnLines() ||
old_style.ImplicitNamedGridRowLines() !=
StyleRef().ImplicitNamedGridRowLines() ||
old_style.ImplicitNamedGridColumnLines() !=
StyleRef().ImplicitNamedGridColumnLines();
} }
void LayoutGrid::ComputeTrackSizesForDefiniteSize( void LayoutGrid::ComputeTrackSizesForDefiniteSize(
......
third_party/blink/web_tests/external/wpt/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html 0 → 100644
View file @ b47a1d69
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item placement with dynamically named grid lines</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="Grid item placement is updated when the names of the grid lines change dynamically.">
<style>
.container {
display: grid;
width: 300px;
height: 100px;
background: red;
}
.container::before {
content: "";
grid-area: main;
background: green;
}
.explicit {
grid-template-columns: [quux-start] 100% [quux-end];
grid-template-rows: [quux-start] 100% [quux-end];
}
.explicit.changed {
grid-template-columns: [main-start] 100% [main-end];
grid-template-rows: [main-start] 100% [main-end];
}
.auto-repeat {
grid-template-columns: repeat(auto-fill, [quux-start] 100% [quux-end]);
grid-template-rows: repeat(auto-fill, [quux-start] 100% [quux-end]);
}
.auto-repeat.changed {
grid-template-columns: repeat(auto-fill, [main-start] 100% [main-end]);
grid-template-rows: repeat(auto-fill, [main-start] 100% [main-end]);
}
.implicit {
grid-template-columns: 100%;
grid-template-rows: 100%;
grid-template-areas: "quux";
}
.implicit.changed {
grid-template-areas: "main";
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="container explicit"></div>
<div class="container auto-repeat"></div>
<div class="container implicit"></div>
<script>
// Force layout
document.body.offsetLeft;
// Change the grid line names
for (let container of document.querySelectorAll(".container")) {
container.classList.add("changed");
}
</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