1699811 - Wrong CSS warnings for pseudo elements viewed in RuleView's "pseudo-elements" panel

Status: NEW

(DevTools :: Inspector: Rules, defect, P3)

Description

[Anton]

Attachment: scr.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0

Steps to reproduce:

explore styles in inspector, see attached screenshot

Actual results:

property "vertical-align" mark as "unusable" for tags with "display: inline-block;", but it's not true - if you change "vertical-align" in inspector, then it's change in browser too.

Expected results:

vertical-align allow to "inline", "table-cell" and "inline-block"

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Inspector' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Julian Descottes [:jdescottes]]

Thanks for the report!

Can you share a test page to reproduce the problem?

Despite the suggestion in the tooltip, this warning is not supposed to show up for inline-block elements. This was fixed in Bug 1554723.

For instance on data:text/html,<style>.one {display:inline-flex} .two {display:inline-block;vertical-align:sub;}</style><div class="one">one</div><div class="two">two</div> I don't get the warning for the display: inline-block element.

Comment 3

[Anton]

(In reply to Julian Descottes [:jdescottes] from comment #2)

Thanks for the report!

Can you share a test page to reproduce the problem?

Despite the suggestion in the tooltip, this warning is not supposed to show up for inline-block elements. This was fixed in Bug 1554723.

For instance on data:text/html,<style>.one {display:inline-flex} .two {display:inline-block;vertical-align:sub;}</style><div class="one">one</div><div class="two">two</div> I don't get the warning for the display: inline-block element.

I use Firefox developer version 87.0b9 with enabled option "Enable source map" (dev tools)

You can check it in Bootstrap 5 dropdown carret(.nav-link.dropdown-toggle::after) https://getbootstrap.com/docs/5.0/components/navbar/#scrolling

Comment 4

[Anton]

Attachment: additional screen

display that's problem in Bootstrap5

Comment 5

[Anton]

it's happened when I'm enable option "enable debug tools browser chrome ..." (addition parameters - penultimate option)

Comment 6

[Anton]

And in adaptive mode too

Comment 7

[Julian Descottes [:jdescottes]]

Oh I see, it's when you select the parent element, but look at the rules of its pseudo element. I think it's because we always consider the style of the selected element to decide to show this warning.

If you select the ::after pseudo element in the markup view, the Rule view will not show the warning.

Thanks for the added information!

Comment 8

[Julian Descottes [:jdescottes]]

Attachment: bug1699811_test_case.html

STRs:

• open this page
• select the div
• check the "pseudo elements" section in the rule view

ER: No warning should be displayed for using vertical align on the pseudo element.
AR: A warning is displayed.

Comment 9

[Anton]

(In reply to Julian Descottes [:jdescottes] from comment #7)

If you select the ::after pseudo element in the markup view, the Rule view will not show the warning.

check additional screen, I'm explore .dropdown-toggle::after

Comment 10

[Julian Descottes [:jdescottes]]

(In reply to Anton from comment #9)

(In reply to Julian Descottes [:jdescottes] from comment #7)

If you select the ::after pseudo element in the markup view, the Rule view will not show the warning.

check additional screen, I'm explore .dropdown-toggle::after

Not exactly, in this screenshot the "selected element" is the <a> tag (notice the blue background). If you really click on ::after in the tree (so that the blue background is really on the ::after element), you will not see the warning.

Comment 11

[Anton]

never mind, my mistake - now i'm understand you

Comment 12

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (with grid and 'grid-column' styling which is only applicable for grid items)

I just ran into this as well, with the grid-column property. Here's a testcase to demonstrate.

STR with this testcase:

1. In DevTools inspector, select the first grid (<div class="grid parent-of-pseudo"></div>), and look at the rules view.

2. Now expand the second grid and select its child <div class="parent-of-pseudo"> and look at the rules view.

ACTUAL RESULTS:
In step 1, the Rules View shows a warning for the grid-column declaration.
In step 2, the Rules View shows no warning for the grid-column declaration.
This is the opposite of what should happen.

EXPECTED RESULTS:
In step 1, the Rules View should not show a warning for the grid-column declaration.
In step 2, the Rules View should show a warning for the grid-column declaration.

In both cases, if you use the inspector to focus the (innermost) ::before pseudo-element itself, then we do provide the correct result (we correctly show or don't-show a warning in the rules panel). There is only an issue when you're focusing the parent (the element that matches the ::before CSS selector); we warn depending on whether the declaration is applicable to the parent, which doesn't make sense in this case.