1790882 - -webkit-line-clamp is failing to ellipsize at https://www.toasttab.com/ (and in general, if there's a specified height on the `-webkit-box`)

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot of "expected results" (from before the regression): ellipsis is present

STR:

1. Visit https://www.toasttab.com/redwood-grill/v3/
2. Click through the "order for pickup" modal (e.g. just leave defaults & choose "Start Order")
3. Scroll down to look at the menu items, e.g. in the "Fried Chicken" section at the top.

ACTUAL RESULTS:
Missing ellipsis at the end of the too-long-to-fit item descriptions.

EXPECTED RESULTS:
There should be an ellipsis.

I'll try to get a reduced testcase. On the actual site, the element in question has this rule which is supposed to do the line-clamp ellipsizing:

.MenuItems-module__description___2VQmU {
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  height: 37px;
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;

I confirmed this is a regression from bug 1786147, using mozregression.

Chrome (and Firefox from before bug 1786147) give EXPECTED RESULTS.

See attached screenshot showing "expected results" from before the regression (including an ellipsis). I'll attach a separate screenshot showing the current regressed behavior (no ellipsis).

(Notice that in both cases, the tops of the characters on the next line are visible; that's potentially a separate bug, though it is an unfortunate reality that line-clamp doesn't really prevent that.)

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

:emilio, since you are the author of the regressor, bug 1786147, could you take a look? Also, could you set the severity field?

For more information, please visit auto_nag documentation.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of "actual results" (after the regression): no ellipsis

Comment 3

[Daniel Holbert [:dholbert]]

[Tracking Requested - why for this release]: recently-introduced user-visible regression which could pose a webcompat issue if other sites are similarly affected.

(Tentatively setting Severity S2 for the same reason.)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Looks like the key thing here is the presence of a specified height.

This testcase (which has a specified height) reproduces the issue (no ellipsis) in current Firefox Nightly, vs. it shows an ellipsis in Nightly from before the regression and in Chrome.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1790882 - Call ApplyLineClamp even with a definite computed block-size. r=dholbert

The previous implementation of line-clamp was relying on the flex
measuring reflow.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/522bb7ebb011
Call ApplyLineClamp even with a definite computed block-size. r=dholbert

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/35913 for changes under testing/web-platform/tests

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 9

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/522bb7ebb011