2042986 - Implement parsing of `line-clamp` as a longhand

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[David Shin[:dshin]]

... For phase 1 implementation, it will be a longhand.
Parsing this should be gated behind a pref.

Comment 1

[Katherine Ye [:kyoety]]

Attachment: Bug 2042986 - Add line-clamp longhand property and pref. r=alaskanemily,dshin

Comment 2

[Katherine Ye [:kyoety]]

Attachment: Bug 2042986 - Add pref-gated parsing for line-clamp longhand. r=dshin,alaskanemily

Extend existing line-clamp value to store max-lines, block-ellipsis, and
legacy behavior.

Enable line-clamp parsing for WPTs with updated expectations and
regenerate CSS use-counter metrics.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/dc7f1346c1e9
https://hg.mozilla.org/integration/autoland/rev/1e46f2442987
Add pref-gated parsing for line-clamp longhand. r=dshin,firefox-style-system-reviewers,layout-reviewers,emilio

Comment 4

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

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

Comment 5

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/1e46f2442987

Comment 6

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

Upstream PR merged by moz-wptsync-bot

Comment 7

[Dave Letorey]

This should have been named:

Implement parsing of line-clamp as a shorthand

right?
As it is a shorthand for:

• max-lines
• block-ellipsis
• legacy behavior

Comment 8

[Dave Letorey]

(In reply to Dave Letorey from comment #7)

This should have been named:

Implement parsing of line-clamp as a shorthand

right?
As it is a shorthand for:

• max-lines
• block-ellipsis
• legacy behavior

My bad, I should have read the description

Comment 9

[Dave Letorey]

I have been doing some testing in the following browsers:

• Firefox Nightly 155 - layout.css.line-clamp.enabled - true
• Chrome Canary 153 - Experimental Web Platform features enabled
• Safari Technical Preview Release 245

All these browsers support:

.selector {
  line-clamp: 2; /* <integer> only */
}

Only Chrome Canary supports no-ellipsis value:

.selector {
  line-clamp: 2 no-ellipsis; /* <integer> and no-ellipsis */
}

Only Safari TP supports "custom string":

.selector {
  line-clamp: 2 "… custom string"; /* <integer> and "custom string" */
}

Both Chrome & Safari respect the @supports but Firefox Nightly does not:

@supports not (line-clamp: 2 no-ellipsis) {
  .card:has(.no-ellipsis) .supported {
    display: block;
  }
}
@supports not (line-clamp: 2 "string") {
  .card:has(.string) .supported {
    display: block;
  }
}

Comment 10

[David Shin[:dshin]]

Ah, ellipsis-related values are tracked in Bug 2043000.

That said, overall, the feature isn't yet ready for general testing (Hence being behind the pref). @supports is hooked up to the parsing machinery, and we can't really guarantee its correctness for behind-the-pref features. Still, thanks for the interest & testing it out.

When we do reach a point more suitable for general testing, we will be flipping the pref on for Nightly. That will be a blocking bug for Bug 1540681.

Comment 11

[Dave Letorey]

Related Pull Requests

• Content PR
• BCD PR
• Firefox Release PR