1343926 - css ::first-line pseudo element ignores position properties

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Richard]

Attachment: Screenshot from 2017-03-02 16:38:11.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20170201175806

Steps to reproduce:

h1 {
	font-size: 24pt; font-weight: normal;
	margin: 12pt 0 12pt 0;
	position: relative;
}

h1::after {
	border-color: #ccc; border-style: solid; border-width: 1pt 0 0 0;
	content: '';
	display: block;
	position: absolute;
	top: 14pt;
	width: 100%;
	z-index: 0;
}

h1::before {
	background-color: #f00;
	content: '> ';
	position: relative;
	z-index: 1;
}

h1::first-line {
	background-color: #f00;
	position: relative;
	top: 40pt;
	z-index: 1;
}


Actual results:

The horizontal line created in ::after element is correctly covered by the background-color of the ::before element but is not covered by the background-color of the ::first-line element.


Expected results:

The horizontal line created in ::after element should be covered by the background-color of the ::first-line element.

Values for position including "relative", "absolute" and "fixed" are ignored. Subsequently properties like top, left, right, bottom, z-index are also ignored.

The spec (https://www.w3.org/TR/css3-selectors/#first-line) mentions that the element has restrictions but does not specifically rule out visual formatting properties.

I admit that this is an obscure issue and is not terribly important. However, I do find it odd that ::first-line is treated differently than ::before and ::after since they are all sub elements.

Comment 1

[Cameron McCormack (:heycam)]

Thanks for the bug report, Richard.  The spec does say "UAs may apply other properties as well", but supporting position would be quite difficult for ::first-line.  The difference between it and ::before/::after is that ::first-line can span parts of elements, whereas ::before and ::after conceptually contain all of their contents generated with the contents property.  That means that with ::first-line, there is not always a single CSS box that can have positioning effects applied to it (which is important when for example |position: absolute| is specified, which would need to blockify the element).

For the z-index issue, you could always specify |z-index: -1| for the h1::after, which will cause it to be rendered under the h1 itself.