Bug 242057 – REGRESSION(r287922): Incorrect inline-level box placement with negative horizontal margin when text-align has non-initial value.

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

Created attachment 460515 [details]
sample of bug

Safari 15.4 has a problem with negative margins, it was not present in 15.3.
Here's the code:

<style>.c1 {width:113px;height:158px;text-align:center} .pi {margin:0 -100%;} </style> <div class="c1"><img class="pi" src="https://i.ibb.co/7R0NTRt/photo.jpg"></div>

As you can see, image is cut in half in Safari 15.4

[Radar WebKit Bug Importer]

<rdar://problem/96060962>

[alan]

Created attachment 460517 [details]
Test reduction

[alan]

it only fails when the negative margin is resolved to > border box width

[alan]

Negative margin could create "negative content width" for the line which does not work very well with certain alignment values. LineBoxBuilder::horizontalAlignmentOffset may need to use the content right offset (can be negative) instead of the content width (can _not_ be negative) to compute the alignment offset.

[alan]

Created attachment 460526 [details]
Patch

[Antti Koivisto]

Comment on attachment 460526 [details]
Patch

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

> Source/WebCore/layout/formattingContexts/inline/InlineLineBoxBuilder.cpp:53
> +            contentLogicalRight = std::min(contentLogicalRight, lineContent.lineLogicalWidth);

min(right, width) looks weird but I suppose they are in different coordinate spaces.

[alan]

(In reply to Antti Koivisto from comment #6)
> Comment on attachment 460526 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=460526&action=review
> 
> > Source/WebCore/layout/formattingContexts/inline/InlineLineBoxBuilder.cpp:53
> > +            contentLogicalRight = std::min(contentLogicalRight, lineContent.lineLogicalWidth);
> 
> min(right, width) looks weird but I suppose they are in different coordinate
> spaces.
Yeah good point, I may rename width to lineLogicalRight to avoid confusion.

[alan]

Created attachment 460540 [details]
Patch

[EWS]

Committed 251954@main (f1adc9c4985a): <https://commits.webkit.org/251954@main>

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

[alan]

(In reply to nayara from comment #0)
> Created attachment 460515 [details]
> sample of bug
> 
> Safari 15.4 has a problem with negative margins, it was not present in 15.3.
> Here's the code:
> 
> <style>.c1 {width:113px;height:158px;text-align:center} .pi {margin:0
> -100%;} </style> <div class="c1"><img class="pi"
> src="https://i.ibb.co/7R0NTRt/photo.jpg"></div>
> 
> As you can see, image is cut in half in Safari 15.4
Thank you for filing this issue!