detik.com: Menu text is not shown in safari at top left corner of header

https://bugs.webkit.org/show_bug.cgi?id=268790
<rdar://60358063>

Reviewed by Antti Koivisto.

Inline content by definition is "float avoider". This is the case when inline content is wrapped inside a block container to ensure block sibling rule.
e.g.
  <div><div>
  <div float></div>
  float avoider content.

where the "float avoider content" is wrapped inside an anon block container.

This helps when computing min/max content width for block content where
float avoiders get accumulated on inline direction axis (as opposed to block axis).

* LayoutTests/fast/block/inline-content-is-float-avoider-simple-expected.html: Added.
* LayoutTests/fast/block/inline-content-is-float-avoider-simple.html: Added.
* Source/WebCore/rendering/RenderBox.cpp:
(WebCore::RenderBox::avoidsFloats const):

Canonical link: https://commits.webkit.org/274191@main

LayoutTests/fast/block/inline-content-is-float-avoider-simple-expected.html

@@ -0,0 +1,22 @@
+<style>
+.container {
+  width: 100px;
+  color: green;
+  font-family: Ahem;
+  font-size: 50px;
+}
+.inline {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+}
+img {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+}
+</style>
+<div class=container><div class=inline></div><div class=inline style="background-color: green"></div></div>
+<div class=container><div class=inline></div><img></div>
+<div class=container><div class=inline></div><span style="vertical-align: top">X</span></div>

LayoutTests/fast/block/inline-content-is-float-avoider-simple.html

@@ -0,0 +1,28 @@
+<style>
+.container {
+  width: max-content;
+  color: green;
+  font-family: Ahem;
+  font-size: 50px;
+}
+.floater {
+  float: left;
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+}
+.inline {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  background-color: green;
+}
+img {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+}
+</style>
+<div class=container><div></div><div class=floater></div><div class=inline></div></div>
+<div class=container><div></div><div class=floater></div><img></div>
+<div class=container><div></div><div class=floater></div>X</div>

Source/WebCore/rendering/RenderBlock.cpp

@@ -2305,7 +2305,10 @@ void RenderBlock::computeBlockPreferredLogicalWidths(LayoutUnit& minLogicalWidth
         }
 
         const RenderStyle& childStyle = child->style();
-        if (child->isFloating() || (is<RenderBox>(*child) && downcast<RenderBox>(*child).avoidsFloats())) {
+        // Either the box itself of its content avoids floats.
+        auto* childBox = dynamicDowncast<RenderBox>(*child);
+        auto childAvoidsFloats = childBox ? childBox->avoidsFloats() || (childBox->isAnonymousBlock() && childBox->childrenInline()) : false;
+        if (child->isFloating() || childAvoidsFloats) {
             LayoutUnit floatTotalWidth = floatLeftWidth + floatRightWidth;
             auto childUsedClear = RenderStyle::usedClear(*child);
             if (childUsedClear == UsedClear::Left || childUsedClear == UsedClear::Both) {
@@ -2345,7 +2348,7 @@ void RenderBlock::computeBlockPreferredLogicalWidths(LayoutUnit& minLogicalWidth
         w = childMaxPreferredLogicalWidth + margin;
 
         if (!child->isFloating()) {
-            if (auto* box = dynamicDowncast<RenderBox>(*child); box && box->avoidsFloats()) {
+            if (childAvoidsFloats) {
                 // Determine a left and right max value based off whether or not the floats can fit in the
                 // margins of the object.  For negative margins, we will attempt to overlap the float if the negative margin
                 // is smaller than the float width.