874227 - API for returning all possible pseudo-elements for an element

Status: NEW

(Core :: CSS Parsing and Computation, enhancement)

Description

[Sebastian Zartner [:sebo]]

There should be an API, that allows to retrieve all available pseudo-elements for a given element.

E.g. ::-moz-progress-bar does obviously just apply to the <progress> element. Though there is no way to get this information via the element.

This will be especially important when Shadow DOM is implemented, which allows to define custom pseudo-elements[1].

There's a related issue for Firebug[2], which gave me that idea.

Sebastian

[1] http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#custom-pseudo-elements
[2] http://code.google.com/p/fbug/issues/detail?id=6451

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Boris, how hard it would be to have this?

Honza

Comment 2

[Boris Zbarsky [:bzbarsky]]

Well, it's not clear what's being asked for.  ::-moz-progress-bar doesn't "apply" to a <progress> element.  It's a descendant of it.  Similar for ::before, ::after, ::first-line, ::first-letter.

Worse yet, for a lot of those things whether it's available or not .. depends.  For example, sometimes ::before does something for an <img> and sometimes not.

So again, what's actually being asked for?

Comment 3

[Sebastian Zartner [:sebo]]

The problem we're trying to solve in discussed in the Firebug issue tracker.[1]

There's no way to get to know that the definition of "::-moz-progress-bar" as it's done in the user agent CSS[2] (and other pseudo-element selectors) actually relates to a descendant of <progress> (and no other elements).

We need to know this in order to decide whether to display rules with pseudo-element selectors for an element selected inside Firebug or not.

[1] http://code.google.com/p/fbug/issues/detail?id=6451
[2] resource://gre-resources/forms.css

Comment 4

[Boris Zbarsky [:bzbarsky]]

OK, so ::-moz-progress-bar is pretty straightforward.  What about ::before?

Comment 5

[Sebastian Zartner [:sebo]]

> What about ::before?
Should also be returned by the API, if its a descendent of the given element.

Sebastian

Comment 6

[Boris Zbarsky [:bzbarsky]]

Please do read comment 2?

Comment 7

[Sebastian Zartner [:sebo]]

Attachment: Display of pseudo-elements and related styles in Opera Dragonfly

Comment 8

[Boris Zbarsky [:bzbarsky]]

That doesn't answer my question.  For example, Opera supports ::before on all elements...

Also, there are two possible dimensions of "available".  For ::before, say, there's "_can_ it exist for an element" and then there's "_does_ it exist for an element".  The latter only being true if there are actual style rules for it.

Comment 9

[Sebastian Zartner [:sebo]]

> That doesn't answer my question.
You didn't wait for my comment. :-)

> Please do read comment 2?
I did and I tried to explain myself as good as I can.

> So again, what's actually being asked for?
So here's another try to explain what we need. See the screenshot I just attached.
We want to be able to display pseudo-elements plus all related styles the way they are shown in Dragonfly.

> The latter only being true if there are actual style rules for it.
That would already be enough.

Sebastian

Comment 10

[Sebastian Zartner [:sebo]]

> We want to be able to display pseudo-elements
I.e. pseudo-elements defined inside a page's CSS.

Sebastian

Comment 11

[Boris Zbarsky [:bzbarsky]]

> That would already be enough.

OK, that's pretty simple to do.  If someone wants to, see nsStyleSet::ProbePseudoElementStyle.

> I.e. pseudo-elements defined inside a page's CSS.

Note that nothing stops a page from doing "div::-moz-progress-bar" and then it having style rules....

Comment 12

[Sebastian Zartner [:sebo]]

>> I.e. pseudo-elements defined inside a page's CSS.
> Note that nothing stops a page from doing "div::-moz-progress-bar" and then it 
> having style rules....
As long as I can get to know via that API that these rules don't have any influence on the <div>s' layout it should be fine.

Sebastian

Comment 13

[Boris Zbarsky [:bzbarsky]]

Er... that's different from comment 10!  Doing that is a lot more complicated.  Again, as a simple example, sometimes ::before affects the layout of <img> and sometimes it does not.

Comment 14

[Sebastian Zartner [:sebo]]

> Er... that's different from comment 10!
Comment 10 just clarified comment 9. And comment 9 refered to the Dragonfly screenshot, which displays pseudo-elements related to an element and the styles related to them.

We do not want to show inexistent pseudo-elements (even when the CSS defines rules for them). E.g. a <div> can't have a "-moz-progress-bar" pseudo-element as descendant, right?
Exactly that's the problem we are facing. See comment 3 and the links I provided there.

Sebastian

Comment 15

[Sebastian Zartner [:sebo]]

> We want to be able to display pseudo-elements plus all related styles
FWIW we have another issue covering that.[1]

Sebastian

[1] http://code.google.com/p/fbug/issues/detail?id=5798

Comment 16

[Sebastian Zartner [:sebo]]

Ah, and also another one.[1]

Sebastian

[1] http://code.google.com/p/fbug/issues/detail?id=5785

Comment 17

[Boris Zbarsky [:bzbarsky]]

OK, so what do you want to do for img::before, exactly?

Comment 18

[Sebastian Zartner [:sebo]]

> For example, sometimes ::before does something for an <img> and sometimes not.
Please give a concrete example for this.

Sebastian

Comment 19

[Boris Zbarsky [:bzbarsky]]

data:text/html,<!DOCTYPE html><style>img::after { content: attr(id); }</style><img id="one"><img id="two" src="http://mozorg.cdn.mozilla.net/media/img/home/firefox.png?2013-06">

(::before is a bit more complicated, because the UA sheet has a !important rule for ::before on images like id="one" above.)

Comment 20

[Sebastian Zartner [:sebo]]

The "after" pseudo-element is not a descendant of of #two, then it should also not be returned by the API.

Btw. Firefox works differently here in comparison to the other main browsers. None of them displays the id "one" as text. Having a glance at the current CSS Values and Units CR spec[1] I don't see any special casing of specific elements.
And it's also not clear to me why these two cases are handled differently. One would either expect to see both IDs or none (like in the other browsers).

Sebastian

[1] http://dev.w3.org/csswg/css-values/#attr

Comment 21

[Boris Zbarsky [:bzbarsky]]

> None of them displays the id "one" as text.

The HTML spec requires them to, fwiw, as far as I can tell.  Though maybe only if the alt text is nonempty....

> I don't see any special casing of specific elements.

You're looking at the wrong spec.  The right spec is http://www.w3.org/TR/CSS2/generate.html and http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#images-0 where it talks about when <img> is and is not a replaced element.  Non-replaced elements have ::before and ::after applying to them.  Replaced elements the behavior is undefined in CSS; in practice UAs mostly don't apply them.

Comment 22

[Sebastian Zartner [:sebo]]

> The right spec is http://www.w3.org/TR/CSS2/generate.html and 
> http://www.whatwg.org/specs/web-apps/current-work/multipage
> /rendering.html#images-0
Thanks for clarifying.

Anyway, Firebug needs to know exactly when pseudo-elements apply and when not to be able to handle cases as you describe in comment 19.

Sebastian