[css-pseudo] ::first-line and line-height
Categories
(Core :: Layout: Block and Inline, defect)
Tracking
()
People
(Reporter: mozilla-apprentice, Unassigned)
References
Details
A resolution was made for csswg-drafts/#2282.
[css-pseudo] ::first-line and line-height
- RESOLVED: Align with chromium behavior for ::first-line and line-height
|
||
Comment 1•3 years ago
•
|
||
Testcase from the github issue
<!DOCTYPE html>
<style>
p { border: solid; width: 10em; font-size: 24px; line-height: 36px; }
p:first-line { background: orange; font-weight: bold; line-height: 12px; font-size: 12px; }
</style>
<p class='container'>This is a test paragraph so let's make more text.
EXPECTED RESULTS is that the line-height:12px should establish the actual height of that first line (e.g. the orange-background chunk should be snapped up to be flush with the black border).
ACTUAL RESULTS is that we have the orange-background chunk vertically-centered in the 36px-tall-line that the block gives ot it.
|
|
||
Comment 2•3 years ago
•
|
||
Here's an "anti-reference-case" where I've wrapped the first line of text (the first line on my system / with my fonts at least) in a span, and I've given the span the same styling as in the original testcase. On my system, the original testcase renders like this, but the CSSWG resolution says it should not.
Essentially, I think we render ::first-line as if it were an inline-level element that just-so-happens to fill the block's entire first line. line-height on an inline element doesn't actually control the height of the line that it's participating in; but in this special case for ::first-line, the CSSWG now resolved that it should.
Description
•