Bug 242057 - REGRESSION(r287922): Incorrect inline-level box placement with negative horizontal margin when text-align has non-initial value.
Summary: REGRESSION(r287922): Incorrect inline-level box placement with negative horiz...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-06-28 01:27 PDT by nayara
Modified: 2022-06-29 10:50 PDT (History)
5 users (show)

See Also:


Attachments
sample of bug (168 bytes, text/html)
2022-06-28 01:27 PDT, nayara
no flags Details
Test reduction (266 bytes, text/html)
2022-06-28 08:03 PDT, zalan
no flags Details
Patch (5.16 KB, patch)
2022-06-28 20:32 PDT, zalan
no flags Details | Formatted Diff | Diff
Patch (5.19 KB, patch)
2022-06-29 08:15 PDT, zalan
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description nayara 2022-06-28 01:27:43 PDT
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
Comment 1 Radar WebKit Bug Importer 2022-06-28 07:52:51 PDT
<rdar://problem/96060962>
Comment 2 zalan 2022-06-28 08:03:38 PDT
Created attachment 460517 [details]
Test reduction
Comment 3 zalan 2022-06-28 10:43:19 PDT
it only fails when the negative margin is resolved to > border box width
Comment 4 zalan 2022-06-28 11:50:45 PDT
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.
Comment 5 zalan 2022-06-28 20:32:48 PDT
Created attachment 460526 [details]
Patch
Comment 6 Antti Koivisto 2022-06-29 06:44:24 PDT
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.
Comment 7 zalan 2022-06-29 06:47:38 PDT
(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.
Comment 8 zalan 2022-06-29 08:15:51 PDT
Created attachment 460540 [details]
Patch
Comment 9 EWS 2022-06-29 10:45:43 PDT
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].
Comment 10 zalan 2022-06-29 10:50:08 PDT
(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!