New issue
Advanced search Search tips

Issue 842704 link

Starred by 3 users
Status: Available
Owner: ----
Cc:
emilio@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

<details> ::before/::after pseudo boxes are not placed correctly

Project Member Reported by mpalmg...@mozilla.com, May 14 2018 
Chrome Version: 67.0.3393.4 (Official Build) dev (64-bit)
OS: Linux

What steps will reproduce the problem?
(1)load the attached testcase
(2)
(3)

What is the expected result?
You should see "details::before DETAILS details::after" on a single line below "SUMMARY".  (See Firefox Nightly for correct results.)

What happens instead?
It's rendered as:
details::before
SUMMARY
DETAILS
details::after

The relevant spec says:
https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
"The details element is expected to render as a block box. The element's shadow tree is expected to take the element's first summary element child, if any, and place it in a first block box container, and then take the element's remaining descendants, if any, and place them in a second block box container."

The "take the element's remaining descendants" includes the ::before/::after pseudos so they should go inside the "second block box container".
details-pseudos.html
426 bytes View Download

Comment 1 by emilio@chromium.org, May 14 2018 

I think that's a spec bug, specially if you spec <details> in terms of Shadow DOM. Firefox doesn't implement <details> using Shadow DOM (because it lacked Shadow DOM support when it was implemented), but pretty sure that if we switch we'd get Chromium's behavior.

When HTML spec talks about descendants I'm pretty sure it doesn't want to account for generated content.

Comment 2 by emilio@chromium.org, May 14 2018

Cc: emilio@chromium.org

Comment 3 by mpalmg...@mozilla.com, May 14 2018 

I think the CSS Pseudo-Elements spec is pretty clear on how it should be rendered:
https://drafts.csswg.org/css-pseudo-4/#generated-content
"When their computed content value is not none, these pseudo-elements generate boxes as if they were immediate children of their originating element"
...
"::before
    Represents a styleable child pseudo-element immediately before
    the originating element’s actual content. "

So the attached testcase should render exactly the same as:

<details>details::before
<summary>SUMMARY</summary>
DETAILS details::after
</details>

(which Chrome actually renders correctly)

Comment 4 by e...@chromium.org, May 14 2018

Status: Available (was: Untriaged)
Similar to 842713.
►

Sign in to add a comment