Skip to content

GitLab

T
tangled
Commit 15fcd2e8 authored by svillar@igalia.com's avatar svillar@igalia.com
Browse files
Options

[CSS Grid Layout] Redefining grids inside media queries does not work 

So the problem is that in
StyleBuilderFunctions::applyValueCSSPropertyGridTemplateAreas we were assuming
that we were always getting a fresh RenderStyle, something that is not true,
because we might have overlapping declarations (multipled matching media
queries, user styles, etc).

As that function might be called multiple times, we need to properly regenerate
the list of named grid lines each time the function is called because the
NamedGridLinesMap returned by RenderStyle contains both the old explicit named
grid lines and the old implicit named grid lines.

BUG=427481

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

git-svn-id: svn://svn.chromium.org/blink/trunk@185045 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 251504cd
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 2 deletions
third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query-expected.html 0 → 100644
View file @ 15fcd2e8
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.one { background-color: beige; width: 50%; }
.two { background-color: antiquewhite; width: 25%; }
.three { background-color: bisque; width: 25%; }
.one, .two, .three { min-height: 100px; float: left; }
</style>
<body>
<p>The test passes if you see 3 blocks bellow arranged on a single row</p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query.html 0 → 100644
View file @ 15fcd2e8
<!DOCTYPE html>
<html>
<style type="text/css">
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: "one"
"two"
"three";
}
.one {
grid-area: one;
background-color: beige;
}
.two {
grid-area: two;
background-color: antiquewhite;
}
.three {
grid-area: three;
background-color: bisque;
}
.one, .two, .three { min-height: 100px; }
@media screen and (min-width: 500px) {
.grid {
grid-template-columns: 1fr 1fr;
grid-template-areas: "one one"
"two three";
}
}
@media screen and (min-width: 700px) {
.grid {
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas: "one two three";
}
}
</style>
</head>
<body>
<p>The test passes if you see 3 blocks bellow arranged on a single row</p>
<div class="grid">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.cpp
View file @ 15fcd2e8
......@@ -466,6 +466,26 @@ bool StyleBuilderConverter::convertGridTrackList(CSSValue* value, Vector<GridTra
return true;
}
void StyleBuilderConverter::convertOrderedNamedGridLinesMapToNamedGridLinesMap(const OrderedNamedGridLines& orderedNamedGridLines, NamedGridLinesMap& namedGridLines)
{
ASSERT(namedGridLines.size() == 0);
if (orderedNamedGridLines.size() == 0)
return;
for (auto& orderedNamedGridLine : orderedNamedGridLines) {
for (auto& lineName : orderedNamedGridLine.value) {
NamedGridLinesMap::AddResult startResult = namedGridLines.add(lineName, Vector<size_t>());
startResult.storedValue->value.append(orderedNamedGridLine.key);
}
}
for (auto& namedGridLine : namedGridLines) {
Vector<size_t> gridLineIndexes = namedGridLine.value;
std::sort(gridLineIndexes.begin(), gridLineIndexes.end());
}
}
void StyleBuilderConverter::createImplicitNamedGridLinesFromGridArea(const NamedGridAreaMap& namedGridAreas, NamedGridLinesMap& namedGridLines, GridTrackSizingDirection direction)
{
for (const auto& namedGridAreaEntry : namedGridAreas) {
......
third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.h
View file @ 15fcd2e8
......@@ -85,6 +85,7 @@ public:
static bool convertGridTrackList(CSSValue*, Vector<GridTrackSize>&, NamedGridLinesMap&, OrderedNamedGridLines&, StyleResolverState&);
static void createImplicitNamedGridLinesFromGridArea(const NamedGridAreaMap&, NamedGridLinesMap&, GridTrackSizingDirection);
static void convertOrderedNamedGridLinesMapToNamedGridLinesMap(const OrderedNamedGridLines&, NamedGridLinesMap&);
};
template <typename T>
......
third_party/WebKit/Source/core/css/resolver/StyleBuilderCustom.cpp
View file @ 15fcd2e8
......@@ -290,8 +290,10 @@ void StyleBuilderFunctions::applyValueCSSPropertyGridTemplateAreas(StyleResolver
CSSGridTemplateAreasValue* gridTemplateAreasValue = toCSSGridTemplateAreasValue(value);
const NamedGridAreaMap& newNamedGridAreas = gridTemplateAreasValue->gridAreaMap();
NamedGridLinesMap namedGridColumnLines = state.style()->namedGridColumnLines();
NamedGridLinesMap namedGridRowLines = state.style()->namedGridRowLines();
NamedGridLinesMap namedGridColumnLines;
NamedGridLinesMap namedGridRowLines;
StyleBuilderConverter::convertOrderedNamedGridLinesMapToNamedGridLinesMap(state.style()->orderedNamedGridColumnLines(), namedGridColumnLines);
StyleBuilderConverter::convertOrderedNamedGridLinesMapToNamedGridLinesMap(state.style()->orderedNamedGridRowLines(), namedGridRowLines);
StyleBuilderConverter::createImplicitNamedGridLinesFromGridArea(newNamedGridAreas, namedGridColumnLines, ForColumns);
StyleBuilderConverter::createImplicitNamedGridLinesFromGridArea(newNamedGridAreas, namedGridRowLines, ForRows);
state.style()->setNamedGridColumnLines(namedGridColumnLines);
......
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