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
<rdar://problem/96060962>
Created attachment 460517 [details] Test reduction
it only fails when the negative margin is resolved to > border box width
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.
Created attachment 460526 [details] Patch
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.
(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.
Created attachment 460540 [details] Patch
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].
(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!