Closed Bug 1489139 Opened Last year Closed Last year

:active state gets confused when reframing pseudo-elements.

Categories

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

63 Branch
defect
Not set

Tracking

()

RESOLVED FIXED
mozilla64
Tracking Status
firefox64 --- fixed

People

(Reporter: contactfmb, Assigned: emilio)

References

Details

(Keywords: regressionwindow-wanted)

Attachments

(2 files, 1 obsolete file)

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
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!
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Attached file Reduced test-case based on reporter's (obsolete) —
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 on attachment 9008150 [details]
Reduced test-case based on reporter's

The reframe caused by content: "" seems necessary, which is wonderful.
Attachment #9008150 - Attachment mime type: text/plain → text/html
Status: UNCONFIRMED → NEW
Component: CSS Parsing and Computation → DOM: Core & HTML
Ever confirmed: true
Flags: needinfo?(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"))
Not related at all to SVG backgrounds or what not.
Summary: Unexpected side effect with content: " ", psuedo elements, and svg backgrounds regarding radio buttons/active and checked states. → Input :active state gets confused when reframing pseudo-elements.
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.
Summary: Input :active state gets confused when reframing pseudo-elements. → :active state gets confused when reframing pseudo-elements.
Attached file More reduced
Yeah, not related to input / label at all.
Attachment #9008150 - Attachment is obsolete: true
Attachment #9008154 - Attachment mime type: text/plain → text/html
I knew this sounded familiar :)

This is basically bug 1461299, but for generated content.
Flags: needinfo?(emilio)
See Also: → 1461299
Assignee: nobody → emilio
Status: NEW → ASSIGNED
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 on attachment 9008166 [details]
Ensure unbound generated content doesn't remain in the active chain.

Olli Pettay [:smaug] has approved the revision.
Attachment #9008166 - Flags: review+
Pushed by emilio@crisal.io:
https://hg.mozilla.org/integration/mozilla-inbound/rev/b28cb41dd456
Ensure unbound generated content doesn't remain in the active chain. r=smaug
https://hg.mozilla.org/mozilla-central/rev/b28cb41dd456
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → mozilla64
You need to log in before you can comment on or make changes to this bug.