Open Bug 1305951 Opened 8 years ago Updated 2 years ago

::first-line pseudo-element doesn't work across a display:contents element

Categories

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

Product:
Core
Component:
CSS Parsing and Computation
Type:
defect

Tracking

()

Tracking Flags:
Tracking Status
firefox52 --- wontfix

People

(Reporter: zcorpan, Unassigned)

References

(Blocks 1 open bug)

Details

Test in https://github.com/w3c/csswg-test/pull/1129

<!doctype html>
<style>
    #contents { display: contents }
    #contents::first-line { background-color: red }
    #container::first-line { color: green }
</style>
<p>You should see the word PASS in green and no red below.</p>
<div id="container">
    <div id="contents">PASS</div>
</div>

The text is black, should be green.
Priority: -- → P3
FWIW, I see black text in white background on Firefox (Nightly and Aurora), and black text in red background on Chrome (Release and Canary).
Component: Layout → CSS Parsing and Computation
Xidorn: FWIW (not sure if you'll agree) this seems like a frame construction issue (we don't generate a first-line frame at all, but we do generate a green first-line if you add text before the display: contents node).

So IMO it doesn't belong to the CSS Parsing and Computation module.
Oh, hmm, yeah I think you're right. I forget why I did that change...

(In reply to Jeremy Chen [:jeremychen] UTC+8 from comment #1)
> FWIW, I see black text in white background on Firefox (Nightly and Aurora),
> and black text in red background on Chrome (Release and Canary).

IIRC, Chrome doesn't support display: contents.
Component: CSS Parsing and Computation → Layout
Wait... no, it indeed looks like a bug in style system.

If you add some text before and after #contents, you would find both of them are colored green, while the PASS keeps being black, which means that we do generate a first-line frame which wraps #contents, but the text inside #contents doesn't have the correct style.

A clearer test would be:
<!doctype html>
<style>
    #container { color: red; }
    #container::first-line { color: green; }
    #contents { display: contents; color: inherit; }
    #contents::first-line { background-color: red }
</style>
<p>You should see the word PASS in green and no red below.</p>
<div id="container">
  <div id="contents">PASS</div>
</div>

As you can see from this testcase, #contents inherits color from #container, rather than #container::first-line.

(But it could still be a bug inside nsCSSFrameConstructor, though, because the generation of style context is driven by nsCSSFrameConstructor.)
Component: Layout → CSS Parsing and Computation
Actually I believe it is an issue in RestyleManager::ReparentStyleContext, which doesn't handle the reparenting of #contents correctly. "display: contents" creates a somehow weird struct on the style context that, the style context doesn't have any corresponding frame, but it may have children.

That says, if ReparentStyleContext doesn't correctly recognize this pattern, and go further up the tree to create style context under the new parent, this could happen.
Mass wontfix for bugs affecting firefox 52.
status-firefox52: affected → wontfix
Blocks: css-pseudo-4
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.