Skip to content

Commit dffa252

Browse files
alanbaradlayalanbaradlay
committed
Regression (Safari 18.0): WordPress Classic Editor sidebar layout is broken (floats not clearing)
https://bugs.webkit.org/show_bug.cgi?id=280063 <rdar://136362683> Reviewed by Antti Koivisto. This change expands on 279867@main where we started allowing floats to overlap each other by addressing the "// FIXME: Should we check if placed floats come from outside of this formatting context." comment. 1. Let's check if the left/right side floats (in-between these floats we wanna insert a new incoming float), intersect our containing block (in this case the IFC formatting context root) 2. Also check if these left/right side floats belong to the current formatting context * Source/WebCore/layout/floats/FloatingContext.cpp: (WebCore::Layout::findAvailablePosition): Canonical link: https://commits.webkit.org/284247@main
1 parent a27c02d commit dffa252

File tree

5 files changed

+322
-14
lines changed

5 files changed

+322
-14
lines changed

‎LayoutTests/fast/block/float/overlapping-float-left-simple-expected.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<style>
2+
.container {
3+
margin-bottom: 10px;
4+
outline: 1px solid black;
5+
width: 150px;
6+
position: relative;
7+
}
8+
9+
.first-child {
10+
width: 220px;
11+
height: 25px;
12+
background-color: green;
13+
}
14+
15+
.second-child {
16+
width: 160px;
17+
height: 25px;
18+
background-color: green;
19+
}
20+
21+
.float-child {
22+
background-color: blue;
23+
width: 50px;
24+
height: 50px;
25+
position: absolute;
26+
left: 150px;
27+
top: 0px;
28+
z-index: -1;
29+
}
30+
</style>
31+
<div class=container>
32+
<div class=first-child></div>
33+
</div>
34+
35+
<div class=container>
36+
<div class=first-child></div>
37+
<div class=second-child></div>
38+
<div class=float-child></div>
39+
</div>
40+
41+
<div class=container style="height: 50px">
42+
<div class=first-child style="width: 150px"></div>
43+
<div class=float-child></div>
44+
</div>
45+
46+
<div class=container style="height: 50px;">
47+
<div class=first-child style="margin-left: -10px; width: 160px"></div>
48+
<div class=float-child></div>
49+
</div>
50+
51+
<div class=container style="height: 50px">
52+
<div class=first-child style="width: 10px"></div>
53+
<div class=second-child style="width: 150px"></div>
54+
<div class=float-child></div>
55+
</div>
56+
57+
<div class=container style="height: 50px">
58+
<div class=first-child style="margin-left: -5px; width: 10px"></div>
59+
<div class=second-child style="width: 150px"></div>
60+
<div class=float-child></div>
61+
</div>
62+

‎LayoutTests/fast/block/float/overlapping-float-left-simple.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<style>
2+
.main-container {
3+
width: 200px;
4+
margin-bottom: 10px;
5+
}
6+
7+
.non-intrusive-float {
8+
float: right;
9+
width: 50px;
10+
background-color: blue;
11+
position: relative;
12+
z-index: -1; /* move it behind the overlapping floats */
13+
}
14+
15+
.container-for-floats {
16+
width: 150px;
17+
outline: 1px solid black;
18+
}
19+
20+
.first-float {
21+
float: left;
22+
height: 25px;
23+
background-color: green;
24+
}
25+
26+
.second-float {
27+
float: left;
28+
height: 25px;
29+
background-color: green;
30+
}
31+
</style>
32+
<div class=main-container>
33+
<div class=non-intrusive-float style="height: 25px"></div>
34+
<div class=container-for-floats style="height: 25px">
35+
<div class=first-float style="width: 220px;"></div>
36+
</div>
37+
</div>
38+
39+
<div class=main-container>
40+
<div class=non-intrusive-float style="height: 50px"></div>
41+
<div class=container-for-floats style="height: 50px">
42+
<div class=first-float style="width: 220px;"></div>
43+
<div class=second-float style="width: 160px"></div>
44+
</div>
45+
</div>
46+
47+
<div class=main-container>
48+
<div class=non-intrusive-float style="height: 50px"></div>
49+
<div class=container-for-floats style="height: 50px">
50+
<div class=first-float style="width: 10px;"></div>
51+
<div class=second-float style="width: 140px"></div>
52+
</div>
53+
</div>
54+
55+
<div class=main-container>
56+
<div class=non-intrusive-float style="height: 50px"></div>
57+
<div class=container-for-floats style="height: 50px">
58+
<div class=first-float style="margin-left: -10px; width: 10px;"></div>
59+
<div class=second-float style="width: 150px"></div>
60+
</div>
61+
</div>
62+
63+
<div class=main-container>
64+
<div class=non-intrusive-float style="height: 50px"></div>
65+
<div class=container-for-floats style="height: 50px">
66+
<div class=first-float style="width: 10px;"></div>
67+
<div class=second-float style="width: 150px"></div>
68+
</div>
69+
</div>
70+
71+
<div class=main-container>
72+
<div class=non-intrusive-float style="height: 50px"></div>
73+
<div class=container-for-floats style="height: 50px">
74+
<div class=first-float style="margin-left: -5px; width: 10px;"></div>
75+
<div class=second-float style="width: 150px"></div>
76+
</div>
77+
</div>

‎LayoutTests/fast/block/float/overlapping-float-right-simple-expected.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<style>
2+
.container {
3+
margin-bottom: 10px;
4+
outline: 1px solid black;
5+
width: 150px;
6+
position: relative;
7+
margin-left: 50px;
8+
}
9+
10+
.first-child {
11+
width: 210px;
12+
height: 25px;
13+
background-color: green;
14+
}
15+
16+
.second-child {
17+
width: 160px;
18+
height: 25px;
19+
background-color: green;
20+
}
21+
22+
.float-child {
23+
background-color: blue;
24+
width: 50px;
25+
height: 50px;
26+
position: absolute;
27+
left: -50px;
28+
top: 0px;
29+
z-index: -1;
30+
}
31+
</style>
32+
<div class=container>
33+
<div class=first-child style="margin-left: -60px"></div>
34+
</div>
35+
36+
<div class=container>
37+
<div class=first-child style="margin-left: -60px"></div>
38+
<div class=second-child style="margin-left: -10px"></div>
39+
<div class=float-child></div>
40+
</div>
41+
42+
<div class=container style="height: 50px">
43+
<div class=first-child style="width: 150px"></div>
44+
<div class=float-child></div>
45+
</div>
46+
47+
<div class=container style="height: 50px;">
48+
<div class=first-child style="width: 160px"></div>
49+
<div class=float-child></div>
50+
</div>
51+
52+
<div class=container style="height: 50px">
53+
<div class=first-child style="margin-left: 140px; width: 10px"></div>
54+
<div class=second-child style="width: 150px"></div>
55+
<div class=float-child></div>
56+
</div>
57+
58+
<div class=container style="height: 50px">
59+
<div class=first-child style="margin-left: 145px; width: 10px"></div>
60+
<div class=second-child style="width: 150px"></div>
61+
<div class=float-child></div>
62+
</div>
63+

‎LayoutTests/fast/block/float/overlapping-float-right-simple.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<style>
2+
.main-container {
3+
width: 200px;
4+
margin-bottom: 10px;
5+
}
6+
7+
.non-intrusive-float {
8+
float: left;
9+
width: 50px;
10+
background-color: blue;
11+
position: relative;
12+
z-index: -1; /* move it behind the overlapping floats */
13+
}
14+
15+
.container-for-floats {
16+
width: 150px;
17+
outline: 1px solid black;
18+
margin-left: 50px;
19+
}
20+
21+
.first-float {
22+
float: right;
23+
height: 25px;
24+
background-color: green;
25+
}
26+
27+
.second-float {
28+
float: right;
29+
height: 25px;
30+
background-color: green;
31+
}
32+
</style>
33+
<div class=main-container>
34+
<div class=non-intrusive-float style="height: 25px"></div>
35+
<div class=container-for-floats style="height: 25px">
36+
<div class=first-float style="width: 220px;"></div>
37+
</div>
38+
</div>
39+
40+
<div class=main-container>
41+
<div class=non-intrusive-float style="height: 50px"></div>
42+
<div class=container-for-floats style="height: 50px">
43+
<div class=first-float style="width: 220px;"></div>
44+
<div class=second-float style="width: 160px"></div>
45+
</div>
46+
</div>
47+
48+
<div class=main-container>
49+
<div class=non-intrusive-float style="height: 50px"></div>
50+
<div class=container-for-floats style="height: 50px">
51+
<div class=first-float style="width: 10px;"></div>
52+
<div class=second-float style="width: 140px"></div>
53+
</div>
54+
</div>
55+
56+
<div class=main-container>
57+
<div class=non-intrusive-float style="height: 50px"></div>
58+
<div class=container-for-floats style="height: 50px">
59+
<div class=first-float style="margin-right: -10px; width: 10px;"></div>
60+
<div class=second-float style="width: 150px"></div>
61+
</div>
62+
</div>
63+
64+
<div class=main-container>
65+
<div class=non-intrusive-float style="height: 50px"></div>
66+
<div class=container-for-floats style="height: 50px">
67+
<div class=first-float style="width: 10px;"></div>
68+
<div class=second-float style="width: 150px"></div>
69+
</div>
70+
</div>
71+
72+
<div class=main-container>
73+
<div class=non-intrusive-float style="height: 50px"></div>
74+
<div class=container-for-floats style="height: 50px">
75+
<div class=first-float style="margin-right: -5px; width: 10px;"></div>
76+
<div class=second-float style="width: 150px"></div>
77+
</div>
78+
</div>
79+

0 commit comments

Comments
 (0)