Bug 177521 – big padding should push float elements on a new line

• Status: NEW
• Component: Layout and Rendering

[karl]

Created attachment 321933 [details]
issue on Safari

Initially a behavior creating a Web compat issue for Edge and Firefox. 
Chrome fixed it recently https://bugs.chromium.org/p/chromium/issues/detail?id=754136 and aligned with Firefox and Edge.

Safari is the only one with this issue.

Daniel Holbert provided a reduced test case
 https://jsfiddle.net/doy5okmz/
 https://jsfiddle.net/doy5okmz/2/

HTML:

<div class="container">
  <span class="padded">
      a
      <span class="float">Float

CSS:

.container {
  width: 300px;
  border: 3px solid black;
}
.padded {
  padding-right: 260px;
  border: 2px dotted lime;
}
.float {
  float: right;
  width: 50px;
  border: 2px dotted red;
}

[Radar WebKit Bug Importer]

<rdar://problem/34676410>

[Ahmad Saleem]

Created attachment 468398 [details]
Safari vs Other browsers

Still reproducible in Safari / WebKit ToT.

[zalan]

This happens because we stop looking for soft wrap opportunities when we see a float box. There's a FIXME on this exact issue here:
https://github.com/WebKit/WebKit/blob/c7578c8aa8bf5e14ebebbc1f531f4001fd7d1327/Source/WebCore/layout/formattingContexts/inline/InlineFormattingUtils.cpp#L452


also while Chrome indeed fixed this particular case with decorations present, it still fails when the inline box has some content _after_ the float box (i.e. it looks like Chrome also injects a soft wrap opportunity at the float box)

<style>
.container {
  width: 300px;
  border: 3px solid black;
}
.padded {
  padding-right: 260px;
  border: 1px solid red;
}
.float {
  float: right;
  width: 50px;
  border: 1px solid blue;
}
</style>
<div class="container"><span class="padded">a<span class="float">Float</span>b</span></div>

[Karl Dubost]

https://searchfox.org/wubkat/rev/0160d3a767ad8fff76bf95f1e7ba0cb325cc6c2d/Source/WebCore/layout/formattingContexts/inline/InlineFormattingUtils.cpp#494-503
```cpp
ASSERT(currentItem.isText() || currentItem.isAtomicInlineBox() || currentItem.isFloat() || currentItem.layoutBox().isRubyInlineBox());
if (currentItem.isFloat()) {
    // While floats are not part of the inline content and they are not supposed to introduce soft wrap opportunities,
    // e.g. [text][float box][float box][text][float box][text] is essentially just [text][text][text]
    // figuring out whether a float (or set of floats) should stay on the line or not (and handle potentially out of order inline items)
    // brings in unnecessary complexity.
    // For now let's always treat a float as a soft wrap opportunity.
    auto wrappingPosition = index == startIndex ? std::min(index + 1, layoutRange.endIndex()) : index;
    return wrappingPosition;
}
```