Bug 290727

Summary: content shifted downward with text-box-trim and vertical-align:bottom
Product: WebKit Reporter: xworld21
Component: Layout and RenderingAssignee: alan <zalan>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, fantasai.bugs, karlcow, koivisto, simon.fraser, vitor.roriz, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 18   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=98597
Attachments:
Description Flags
Example with different values of vertical-align.
none
Screenshot of Safari 18.2
none
Screenshot of Chrome 134
none
rendering in safari, firefox, chrome
none
[fast-cq]Patch none

xworld21
Reported 2025-03-30 11:12:23 PDT
Created attachment 474761 [details] Example with different values of vertical-align. WebKit exhibits a strange behaviour when an inline block has `vertical-align:bottom` inside a container with `text-box-trim:edge`. The inline block seems to be attached to the top of the line and it overflows downward. Using `vertical-align:text-bottom` behaves more like I would expect. I am attaching a simple example and screenshots of Chrome and Safari for comparison.
Attachments
Example with different values of vertical-align. (379 bytes, text/html)
2025-03-30 11:12 PDT, xworld21
no flags
Screenshot of Safari 18.2 (15.76 KB, image/png)
2025-03-30 11:12 PDT, xworld21
no flags
Screenshot of Chrome 134 (13.13 KB, image/png)
2025-03-30 11:13 PDT, xworld21
no flags
rendering in safari, firefox, chrome (1.01 MB, image/png)
2025-03-31 22:24 PDT, Karl Dubost
no flags
[fast-cq]Patch (9.33 KB, patch)
2025-04-04 12:38 PDT, alan
no flags
xworld21
Comment 1 2025-03-30 11:12:51 PDT
Created attachment 474762 [details] Screenshot of Safari 18.2
xworld21
Comment 2 2025-03-30 11:13:19 PDT
Created attachment 474763 [details] Screenshot of Chrome 134
Karl Dubost
Comment 3 2025-03-31 22:24:10 PDT
Created attachment 474786 [details] rendering in safari, firefox, chrome tested on Safari Technology Preview 125/18.4 20622.1.6 Firefox Nightly 138.0a1 13825.3.11 Google Chrome Canary 136.0.7102.0 7102.0 All browsers have different behaviors here for the way the boxes are drawn. but both Firefox and Chrome align with the block bottom.
Radar WebKit Bug Importer
Comment 4 2025-04-04 10:42:52 PDT
alan
Comment 5 2025-04-04 12:38:05 PDT
Created attachment 474832 [details] [fast-cq]Patch
EWS
Comment 6 2025-04-04 17:05:45 PDT
Committed 293283@main (35a3dec2b907): <https://commits.webkit.org/293283@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 474832 [details].
Note You need to log in before you can comment on or make changes to this bug.