STR

1. Open https://google.co.uk
2. Right-click and inspect the logo.
3. In the rule view click on the body selector and change it to something like booody.
4. Click somewhere to blur the editor.

A phantom background property appears inside the rule (it doesn't matter what you change the selector to).

@Gabe pbro said that this is your feature so you are best looking at it.

If it helps, it looks to me like we only class a selector as a match when it is a direct match so inherited matches remain dim.

Not sure what produces the phantom background property though.

I think this is expected. The dimmed background represents an unmatched rule. If you changed the selector to img from an unmatched selector, then you will see it doesn't have the dimmed background. I think this should be closed as works as expected, unless there was another issue here that I missed.

(In reply to Gabriel [:gl] (ΦωΦ) from comment #2)

I think this is expected. The dimmed background represents an unmatched rule. If you changed the selector to img from an unmatched selector, then you will see it doesn't have the dimmed background. I think this should be closed as works as expected, unless there was another issue here that I missed.

Noooo, this isn't expected... a completely imaginary declaration is added as soon as the selector becomes invalid.

Watch this video... I have annotated it to make the issue more obvious.

Ya, that's an invisible property. (In reply to Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe] from comment #3)

Created attachment 9066757 [details]
What the heck.webm

(In reply to Gabriel [:gl] (ΦωΦ) from comment #2)

I think this is expected. The dimmed background represents an unmatched rule. If you changed the selector to img from an unmatched selector, then you will see it doesn't have the dimmed background. I think this should be closed as works as expected, unless there was another issue here that I missed.

Noooo, this isn't expected... a completely imaginary declaration is added as soon as the selector becomes invalid.

Watch this video... I have annotated it to make the issue more obvious.

Oh didn't catch that you meant background property and not background-color. In an inherited property, we only show the inherited properties. This is the "invisible" property that we have for declarations. What is happening here is that we are changing the selector so it doesn't match and now it shows all the declarations in the rule. So, no new declaration was actually added, it is just visible now.

A proposal here would be to make the invisible properties visible in a different kind of style. This is something that Chrome has added. I would recommend adding this to the new rules view.