Skip to content

Commit 4b7904b

Browse files
stwrtstwrt
committed
Changing flow-tolerance in Web Inspector doesn't trigger relayout for display: grid-lanes
https://bugs.webkit.org/show_bug.cgi?id=306068 rdar://problem/168711707 Reviewed by Sammy Gill and Tim Nguyen. The flow-tolerance CSS property was stored directly in NonInheritedRareData, but rareDataChangeRequiresLayout only checked for changes to the grid and gridItem DataRefs. This meant changes to flow-tolerance weren't detected as requiring layout. Move flow-tolerance into GridData alongside the other grid container properties. This ensures changes to flow-tolerance are detected by the existing `a.grid != b.grid` check in rareDataChangeRequiresLayout. * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-lanes/tentative/item-placement/flow-tolerance/flow-tolerance-dynamic-update-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-lanes/tentative/item-placement/flow-tolerance/flow-tolerance-dynamic-update-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-lanes/tentative/item-placement/flow-tolerance/flow-tolerance-dynamic-update.html: Added. * Source/WebCore/css/CSSProperties.json: * Source/WebCore/style/computed/data/StyleGridData.cpp: (WebCore::Style::GridData::GridData): (WebCore::Style::GridData::operator== const): (WebCore::Style::GridData::dumpDifferences const): * Source/WebCore/style/computed/data/StyleGridData.h: * Source/WebCore/style/computed/data/StyleNonInheritedRareData.cpp: (WebCore::Style::NonInheritedRareData::NonInheritedRareData): (WebCore::Style::NonInheritedRareData::operator== const): (WebCore::Style::NonInheritedRareData::dumpDifferences const): * Source/WebCore/style/computed/data/StyleNonInheritedRareData.h: Canonical link: https://commits.webkit.org/306093@main
1 parent 66eee55 commit 4b7904b

File tree

8 files changed

+167
-9
lines changed

8 files changed

+167
-9
lines changed

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-lanes/tentative/item-placement/flow-tolerance/flow-tolerance-dynamic-update-expected.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Grid Test: flow-tolerance dynamic update triggers relayout (reference)</title>
6+
<style>
7+
html, body {
8+
color: black;
9+
background-color: white;
10+
padding: 0;
11+
margin: 0;
12+
}
13+
14+
.grid {
15+
display: inline-grid-lanes;
16+
grid-template-rows: repeat(2, 100px);
17+
gap: 10px;
18+
border: 1px solid;
19+
padding: 2px;
20+
}
21+
22+
.item {
23+
background-color: #444;
24+
color: #fff;
25+
padding: 10px;
26+
margin: 3px;
27+
border: 2px solid blue;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
33+
<p>Test passes if the grid items are arranged in round-robin order (blue/green in first row, orange/red in second row).</p>
34+
35+
<!--
36+
With flow-tolerance: infinite, items are placed in strict round-robin
37+
order across rows:
38+
Item 1 (blue) -> Row 1 Col 1
39+
Item 2 (orange) -> Row 2 Col 1
40+
Item 3 (green) -> Row 1 Col 2
41+
Item 4 (red) -> Row 2 Col 2
42+
-->
43+
<div class="grid">
44+
<div class="item" style="width: 100px; background: blue; grid-row: 1; grid-column: 1;"></div>
45+
<div class="item" style="width: 50px; background: orange; grid-row: 2; grid-column: 1;"></div>
46+
<div class="item" style="width: 50px; background: green; grid-row: 1; grid-column: 2;"></div>
47+
<div class="item" style="width: 100px; background: red; grid-row: 2; grid-column: 2;"></div>
48+
</div>
49+
50+
</body>
51+
</html>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-lanes/tentative/item-placement/flow-tolerance/flow-tolerance-dynamic-update-ref.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Grid Test: flow-tolerance dynamic update triggers relayout (reference)</title>
6+
<style>
7+
html, body {
8+
color: black;
9+
background-color: white;
10+
padding: 0;
11+
margin: 0;
12+
}
13+
14+
.grid {
15+
display: inline-grid-lanes;
16+
grid-template-rows: repeat(2, 100px);
17+
gap: 10px;
18+
border: 1px solid;
19+
padding: 2px;
20+
}
21+
22+
.item {
23+
background-color: #444;
24+
color: #fff;
25+
padding: 10px;
26+
margin: 3px;
27+
border: 2px solid blue;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
33+
<p>Test passes if the grid items are arranged in round-robin order (blue/green in first row, orange/red in second row).</p>
34+
35+
<!--
36+
With flow-tolerance: infinite, items are placed in strict round-robin
37+
order across rows:
38+
Item 1 (blue) -> Row 1 Col 1
39+
Item 2 (orange) -> Row 2 Col 1
40+
Item 3 (green) -> Row 1 Col 2
41+
Item 4 (red) -> Row 2 Col 2
42+
-->
43+
<div class="grid">
44+
<div class="item" style="width: 100px; background: blue; grid-row: 1; grid-column: 1;"></div>
45+
<div class="item" style="width: 50px; background: orange; grid-row: 2; grid-column: 1;"></div>
46+
<div class="item" style="width: 50px; background: green; grid-row: 1; grid-column: 2;"></div>
47+
<div class="item" style="width: 100px; background: red; grid-row: 2; grid-column: 2;"></div>
48+
</div>
49+
50+
</body>
51+
</html>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-lanes/tentative/item-placement/flow-tolerance/flow-tolerance-dynamic-update.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Grid Test: flow-tolerance dynamic update triggers relayout</title>
6+
<link rel="author" title="Apple Inc.">
7+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#placement-tolerance">
8+
<link rel="match" href="flow-tolerance-dynamic-update-ref.html">
9+
<style>
10+
html, body {
11+
color: black;
12+
background-color: white;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
17+
.grid-lanes {
18+
display: inline-grid-lanes;
19+
grid-template-rows: repeat(2, 100px);
20+
gap: 10px;
21+
flow-tolerance: normal;
22+
border: 1px solid;
23+
padding: 2px;
24+
}
25+
26+
.item {
27+
background-color: #444;
28+
color: #fff;
29+
padding: 10px;
30+
margin: 3px;
31+
border: 2px solid blue;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
37+
<p>Test passes if the grid items are arranged in round-robin order (blue/green in first row, orange/red in second row).</p>
38+
39+
<div class="grid-lanes" id="grid">
40+
<div class="item" style="width: 100px; background: blue;"></div>
41+
<div class="item" style="width: 50px; background: orange;"></div>
42+
<div class="item" style="width: 50px; background: green;"></div>
43+
<div class="item" style="width: 100px; background: red;"></div>
44+
</div>
45+
46+
<script>
47+
window.onload = function() {
48+
// Start with normal tolerance, then change to infinite.
49+
// With infinite tolerance, items are placed strictly in round-robin order.
50+
// If layout is properly invalidated, items will reflow to match the reference.
51+
const grid = document.getElementById("grid");
52+
grid.style.flowTolerance = "infinite";
53+
};
54+
</script>
55+
56+
</body>
57+
</html>

‎Source/WebCore/css/CSSProperties.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5225,7 +5225,7 @@
52255225
"infinite"
52265226
],
52275227
"codegen-properties": {
5228-
"computed-style-storage-path": ["m_nonInheritedData", "rareData"],
5228+
"computed-style-storage-path": ["m_nonInheritedData", "rareData", "grid"],
52295229
"computed-style-storage-kind": "reference",
52305230
"computed-style-type": "Style::FlowTolerance",
52315231
"parser-grammar": "normal | <length-percentage> | infinite"

‎Source/WebCore/style/computed/data/StyleGridData.cpp‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ GridData::GridData()
4444
, gridTemplateAreas(ComputedStyle::initialGridTemplateAreas())
4545
, gridTemplateColumns(ComputedStyle::initialGridTemplateColumns())
4646
, gridTemplateRows(ComputedStyle::initialGridTemplateRows())
47+
, flowTolerance(ComputedStyle::initialFlowTolerance())
4748
{
4849
}
4950

@@ -55,6 +56,7 @@ inline GridData::GridData(const GridData& o)
5556
, gridTemplateAreas(o.gridTemplateAreas)
5657
, gridTemplateColumns(o.gridTemplateColumns)
5758
, gridTemplateRows(o.gridTemplateRows)
59+
, flowTolerance(o.flowTolerance)
5860
{
5961
}
6062

@@ -65,7 +67,8 @@ bool GridData::operator==(const GridData& o) const
6567
&& gridAutoRows == o.gridAutoRows
6668
&& gridTemplateAreas == o.gridTemplateAreas
6769
&& gridTemplateColumns == o.gridTemplateColumns
68-
&& gridTemplateRows == o.gridTemplateRows;
70+
&& gridTemplateRows == o.gridTemplateRows
71+
&& flowTolerance == o.flowTolerance;
6972
}
7073

7174
Ref<GridData> GridData::copy() const
@@ -82,6 +85,7 @@ void GridData::dumpDifferences(TextStream& ts, const GridData& other) const
8285
LOG_IF_DIFFERENT(gridTemplateAreas);
8386
LOG_IF_DIFFERENT(gridTemplateColumns);
8487
LOG_IF_DIFFERENT(gridTemplateRows);
88+
LOG_IF_DIFFERENT(flowTolerance);
8589
}
8690
#endif // !LOG_DISABLED
8791

‎Source/WebCore/style/computed/data/StyleGridData.h‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626

2727
#pragma once
2828

29+
#include <WebCore/StyleFlowTolerance.h>
2930
#include <WebCore/StyleGridAutoFlow.h>
3031
#include <WebCore/StyleGridTemplateAreas.h>
3132
#include <WebCore/StyleGridTemplateList.h>
@@ -55,6 +56,7 @@ class GridData : public RefCounted<GridData> {
5556
GridTemplateAreas gridTemplateAreas;
5657
GridTemplateList gridTemplateColumns;
5758
GridTemplateList gridTemplateRows;
59+
FlowTolerance flowTolerance;
5860

5961
private:
6062
GridData();

‎Source/WebCore/style/computed/data/StyleNonInheritedRareData.cpp‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ NonInheritedRareData::NonInheritedRareData()
7373
, viewTransitionName(ComputedStyle::initialViewTransitionName())
7474
, columnGap(ComputedStyle::initialColumnGap())
7575
, rowGap(ComputedStyle::initialRowGap())
76-
, flowTolerance(ComputedStyle::initialFlowTolerance())
7776
, offsetPath(ComputedStyle::initialOffsetPath())
7877
, offsetDistance(ComputedStyle::initialOffsetDistance())
7978
, offsetPosition(ComputedStyle::initialOffsetPosition())
@@ -184,7 +183,6 @@ inline NonInheritedRareData::NonInheritedRareData(const NonInheritedRareData& o)
184183
, viewTransitionName(o.viewTransitionName)
185184
, columnGap(o.columnGap)
186185
, rowGap(o.rowGap)
187-
, flowTolerance(o.flowTolerance)
188186
, offsetPath(o.offsetPath)
189187
, offsetDistance(o.offsetDistance)
190188
, offsetPosition(o.offsetPosition)
@@ -301,7 +299,6 @@ bool NonInheritedRareData::operator==(const NonInheritedRareData& o) const
301299
&& containerNames == o.containerNames
302300
&& columnGap == o.columnGap
303301
&& rowGap == o.rowGap
304-
&& flowTolerance == o.flowTolerance
305302
&& offsetPath == o.offsetPath
306303
&& offsetDistance == o.offsetDistance
307304
&& offsetPosition == o.offsetPosition
@@ -451,7 +448,6 @@ void NonInheritedRareData::dumpDifferences(TextStream& ts, const NonInheritedRar
451448

452449
LOG_IF_DIFFERENT(columnGap);
453450
LOG_IF_DIFFERENT(rowGap);
454-
LOG_IF_DIFFERENT(flowTolerance);
455451

456452
LOG_IF_DIFFERENT(offsetPath);
457453
LOG_IF_DIFFERENT(offsetDistance);

‎Source/WebCore/style/computed/data/StyleNonInheritedRareData.h‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
#include <WebCore/StyleCounterIncrement.h>
3939
#include <WebCore/StyleCounterReset.h>
4040
#include <WebCore/StyleCounterSet.h>
41-
#include <WebCore/StyleFlowTolerance.h>
4241
#include <WebCore/StyleGapGutter.h>
4342
#include <WebCore/StyleMarginTrim.h>
4443
#include <WebCore/StyleMaskBorder.h>
@@ -176,8 +175,6 @@ class NonInheritedRareData : public RefCounted<NonInheritedRareData> {
176175
GapGutter columnGap;
177176
GapGutter rowGap;
178177

179-
FlowTolerance flowTolerance;
180-
181178
OffsetPath offsetPath;
182179
OffsetDistance offsetDistance;
183180
OffsetPosition offsetPosition;

0 commit comments

Comments
 (0)