1747934 - ::marker does not support CSS property line-height

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Rob Schlüter]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0

Steps to reproduce:

Set the line-height property on a list marker using this:

li::marker {
    content: '*';
    line-height: 30px;
}

Actual results:

The vertical position of the marker stays the same whatever value line-height has. The value for line-height does not matter, 50px or 2 also have no effect.

The result is that the character is positioned too high, above the center of the first line of the list item content.

Expected results:

The vertical position should change depending on the value for line-height.

That is based on this MDN description, which states that ::marker supports All font properties, which explicitly lists line-height as one of the properties.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case

Comment 3

[Emilio Cobos Álvarez (:emilio)]

MDN is not the spec. The marker spec mentions only the css-fonts spec, but line-height doesn't live in the fonts spec, it lives here. The marker spec really says:

Inheritable properties that apply to text can be set on the ::marker pseudo-element: these will inherit to and take effect on its text contents.

Which is quite hand-wavy IMO :/

Anyways, this is probably not problematic to support. Should be a matter of special-casing line-height here, so a one-liner, and adding a test if there isn't one.

At the very least there's testing/web-platform/tests/css/css-pseudo/marker-line-height.html.ini and css/css-pseudo/parsing/marker-supported-properties.html that should have new passes.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

There are other properties tested there which should be straight-forward to support too.

Comment 5

[Rob Schlüter]

MDN is not the spec.

Perhaps change the text on MDN?

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1747934 - Apply line-height to ::marker. r=#layout-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fdb8148fec20
Apply line-height to ::marker. r=layout-reviewers,jfkthame

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c0f50e1142c9
set some line-height/font marker test steps as passing. CLOSED TREE

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/97ee782e42e8
Make marker-line-height pass reliably in all platforms.

Comment 10

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

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

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/cc33400f0ff8
Make marker-line-height pass reliably in all platforms.

Comment 12

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/fdb8148fec20
https://hg.mozilla.org/mozilla-central/rev/c0f50e1142c9
https://hg.mozilla.org/mozilla-central/rev/cc33400f0ff8

Comment 13

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

Upstream PR merged by moz-wptsync-bot

Comment 14

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/97ee782e42e8