Bug 268529

Summary:

REGRESSION: line-clamp doesn't work as expected with inline-block children

Product:

WebKit

Reporter:

Fujii Hironori <fujii.hironori>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

bfulgham, changseok, esprehn+autocc, ews-watchlist, glenn, koivisto, kondapallykalyan, pdr, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
test case	none
[screenshot] STP 184	none
broken line clamp (not a regression)	none
Patch to work around	none

Fujii Hironori

Reported 2024-01-31 20:53:22 PST

Created attachment 469644 [details] test case REGRESSION: line-clamp doesn't work as expected with inline-block children

Attachments
test case (1.19 KB, text/html) 2024-01-31 20:53 PST, Fujii Hironori	no flags	Details
[screenshot] STP 184 (93.06 KB, image/png) 2024-01-31 20:57 PST, Fujii Hironori	no flags	Details
broken line clamp (not a regression) (73.63 KB, image/png) 2024-02-01 07:47 PST, alan	no flags	Details
Patch to work around (1.08 KB, patch) 2024-02-14 22:42 PST, Fujii Hironori	no flags	Details Formatted Diff Diff
View All Add attachment proposed patch, testcase, etc.

Fujii Hironori

Comment 1 2024-01-31 20:57:26 PST

Created attachment 469645 [details] [screenshot] STP 184

Fujii Hironori

Comment 2 2024-01-31 21:04:30 PST Comment hidden (obsolete)

I did bisecting with my WinCairo collection. 256506@main good 256728@main bad

Fujii Hironori

Comment 3 2024-01-31 21:05:14 PST

My coworker did more bisecting. He says that 256989@main is the regression point.

Fujii Hironori

Comment 4 2024-01-31 21:34:48 PST

(In reply to Fujii Hironori from comment #2) > I did bisecting with my WinCairo collection. > > 256506@main good > 256728@main bad My bad. This is my real result. 256728@main good 257047@main bad

alan

Comment 5 2024-02-01 07:47:54 PST

Created attachment 469652 [details] broken line clamp (not a regression) Yeah, it looks like a regression caused by switching over to the new line-clamp implementation, but running line-clamp on inline-block was never really thought through (see screenshot attached, which is a slightly modified version of the test case where the inline text content is nested inside a block container <div>0 1 2 ...)

alan

Comment 6 2024-02-01 07:48:28 PST

(In reply to zalan from comment #5) > Created attachment 469652 [details] > broken line clamp (not a regression) > > Yeah, it looks like a regression caused by switching over to the new > line-clamp implementation, but running line-clamp on inline-block was never > really thought through (see screenshot attached, which is a slightly > modified version of the test case where the inline text content is nested > inside a block container <div>0 1 2 ...) <!DOCTYPE html> <html><head> <style> .paragraph { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; } span.a { background: green; display: inline-block; } </style> </head> <body> <div class="paragraph"><div> 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100</div> <span class=a>xxx</span> <span class=a>xxx</span> </div> </body></html>

Fujii Hironori

Comment 7 2024-02-01 12:13:19 PST

Your test case (comment#6) works as expected with my STP. It shows only the first three lines. It doesn't yield comment#5 screenshot result. Your screenshot looks like overflow:hidden removed. Right?

alan

Comment 8 2024-02-01 15:10:13 PST

(In reply to Fujii Hironori from comment #7) > Your test case (comment#6) works as expected with my STP. It shows only the > first three lines. It doesn't yield comment#5 screenshot result. > Your screenshot looks like overflow:hidden removed. Right? the screenshot shows the rendering when the new line clamp implementation is disabled (essentially what we had before 256989@main)

Fujii Hironori

Comment 9 2024-02-01 16:26:38 PST

Your comment#5 screenshot looks like a correct result. It shows "..." at the bottom of the third line. It is the expected behavior of -webkit-line-clamp:3.

alan

Comment 10 2024-02-01 16:44:58 PST

(In reply to Fujii Hironori from comment #9) > Your comment#5 screenshot looks like a correct result. > It shows "..." at the bottom of the third line. > It is the expected behavior of -webkit-line-clamp:3. You are right, the ellipsis placement is correct, but that's pretty much the only thing that looks ok in there. It is surely not an overall desired rendering where the inline-block box _overlaps_ adjacent content and the block height is off by one line box.

Radar WebKit Bug Importer

Comment 11 2024-02-07 20:54:19 PST

<rdar://problem/122516297>

Fujii Hironori

Comment 12 2024-02-14 22:42:43 PST

Created attachment 469872 [details] Patch to work around

Fujii Hironori

Comment 13 2024-08-27 00:51:14 PDT

works for me.

alan

Comment 14 2024-08-27 05:17:21 PDT

This has progressed with Antti's recent work where we finally run inline-block layout as part of IFC and not before.

Antti Koivisto

Comment 15 2024-08-27 08:54:33 PDT

nice!

Note You need to log in before you can comment on or make changes to this bug.