Closed Bug 1489139 Opened Last year Closed Last year
:active state gets confused when reframing pseudo-elements
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
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
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.
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.
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 email@example.com: https://hg.mozilla.org/integration/mozilla-inbound/rev/b28cb41dd456 Ensure unbound generated content doesn't remain in the active chain. r=smaug
You need to log in before you can comment on or make changes to this bug.