overflow:clip fails when intrusive float is present

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Simon Fraser (smfr)]

As noted here: https://github.com/w3c/csswg-drafts/issues/8607#issuecomment-1533932813

"First, in Safari, the test doesn't work, because it seems that overflow: clip stops having any effect at all (!) if a float overflows in the block axis. It would take effect in the inline axis if there was no block overflow, or if any block axis overflow was caused by something other than a float, like an abspos. Hard to think that's anything but a bug, but that bug could be a sign of "it's harder than we thought"."

Test case at http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=11611

[Radar WebKit Bug Importer]

<rdar://problem/109293228>

[zalan]

intrusive floats like this don't get clipped by their containing block (or ancestors all the way to where they end up being intrusive) because we paint them out of the normal paint order (see RenderBlockFlow::paintFloats), so by the time we get to paint them, clipping is gone.
Probably RenderBlockFlow::paintFloats should apply clipping by looking at the ancestor chain of these intrusive floats.

should read the spec first (always), but with overflow: clip, layout and paint could get very disconnected when intrusive floats are involved due to the fact that unlike overflow: hidden, clip does not establish a formatting context. such intrusive floats can impact the position of other, inline level and/or float avoider boxes and yet in the final rendering they look like as if some invisible force pushed them away.
e.g.

<style>
.clip {
  width: 50px;
  height: 50px;
}

.float {
  width: 500px;
  height: 100px;
  float: left;
}

</style>
<div class=clip>
  <div class=float></div>
</div>
<div>
  this line is constrained by the intrusive but yet clipped float
</div

will produce something like this:

   .clip
 ___________
|          |*******************************
|  .float  |                              *
|          |                              *
|__________|   clipped out part           *
 *                                        *this line is constrained by the intrusive but yet clipped float
 ******************************************

where the '*' part is hidden.

 ___________
|          |
|          |                              
|          |                              
|__________|           
                                           this line is constrained by the intrusive but yet clipped float

[zalan]

Created attachment 466348 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 466348 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=466348&action=review

> Source/WebCore/rendering/FloatingObjects.cpp:56
> +    , m_overflowClippedByAncestor(false)

maybe `m_hasAncestorWithOverflowClip`. Also, we can initialize bitfield members with initializers now.

[zalan]

Created attachment 466358 [details]
Patch

[EWS]

Committed 264101@main (a5ba024da4f4): <https://commits.webkit.org/264101@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 466358 [details].