1489139 - :active state gets confused when reframing pseudo-elements.

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, defect)

Description

[contactfmb]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:63.0) Gecko/20100101 Firefox/63.0
Build ID: 20180830123124

Steps to reproduce:

When styling radio button active and checked states 2 rules, with the same specificity, at different points in the cascade, conflicted when content:"" had a space between the quotes.  In this case the inputs are hidden and a ::before psuedo element is used as  fake checkbox.  Clicking on the fake check boxes causes the browser to become confused about active states. See codepen. 

https://codepen.io/mupt/pen/VGzqbL


Actual results:

Multiple radio buttons received active styling. 

https://codepen.io/mupt/pen/VGzqbL


Expected results:

A single radio button should be checked and none should be active. 

https://codepen.io/mupt/pen/VGzqbL

Comment 1

[Kanchan Kumari QA]

I see similar behavior on Chrome too. I am placing this under Core:CSS Parsing and Computation so someone with more insight can help you here. Thanks!

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Reduced test-case based on reporter's

I don't see the similar behavior on Chrome, this does seem to be a bug.

It's not a style invalidation bug though. It's the DOM code getting confused about the active state and leaving that state around.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9008150 [details]
Reduced test-case based on reporter's

The reframe caused by content: "" seems necessary, which is wonderful.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

This seems like a longstanding :active related issue. It reproduces at least as far as FF 40. You can verify it's the active state getting messed up running something like this on the console:

  Array.from(document.querySelectorAll('input')).map(i => i.matches(":active"))

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Not related at all to SVG backgrounds or what not.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Actually the label state gets messed up as well, I _think_ we're leaving the native anonymous content as the last thing in the chain, and reframing it gets rid of it too early.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Attachment: More reduced

Yeah, not related to input / label at all.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

I knew this sounded familiar :)

This is basically bug 1461299, but for generated content.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Ensure unbound generated content doesn't remain in the active chain.

Need to write a test, but this is the equivalent of bug 1461299 but for ::before
/ ::after nodes. This unifies the two code paths.

Also, remove the NativeAnonymousContentRemoved bit about <svg:use> since it's no
longer NAC.

Comment 10

[Olli Pettay [:smaug][[e-mail]]]

Comment on attachment 9008166 [details]
Ensure unbound generated content doesn't remain in the active chain.

Olli Pettay [:smaug] has approved the revision.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/b28cb41dd456
Ensure unbound generated content doesn't remain in the active chain. r=smaug

Comment 12

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/b28cb41dd456