Bug 242057

Summary:

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

Product:

WebKit

Reporter:

nayara

Component:

Layout and Rendering

Assignee:

zalan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
sample of bug	none
Test reduction	none
Patch	none
Patch	none

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!