1630963 - Width property marked as inactive CSS in pseudo-element for table row

Status: NEW

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

Description

[Massimiliano Caniparoli]

Attachment: rules.png

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

Steps to reproduce:

I created a table, and wanted to style its rows.
I added the following rules:
table.rowSelector tr:hover::before {
content: url('edit.svg');
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 1.8rem; /* this is the rule we are talking about */
background-color: #66e4ee;
padding: 0.2rem;
border-radius: 0px 6px 6px 0px;
}

Actual results:

Anything worked as expected, and the tr::before got the right style.
The rules inspector showed me an "info tip" (I don't remember its technical name, I'll attach a screenshot - I'm sorry, it's in Italian) saying that the (grayed out) width rule wouldn't have been applied, since "it's a table-row".
The problem is that the style is being applied, since it's a ::before in position:absolute.

Expected results:

If the rule is grayed out the style shouldn't be applied, and the inverse: if the style is applied, the rule shouldn't be grayed out.
I'm not sure that my rule should work as it is, but I'm confident enough, hence the problem must be in the tip :)

Comment 1

[Firefox Bug Husbandry Bot]

Resetting severity to default of --.

Comment 2

[Razvan Caliman [:rcaliman]]

Thanks for filing the issue!

It happens specific circumstances: the element is a table row, it has a CSS rule for a pseudo-element and inspecting the <tr> element, not the pseudo-element directly in the Elements pane.

Steps to reproduce

• Run the following in the address bar of a new tab:

data:text/html,<style>tr::before{ content:"x"; width:50vw; position:absolute; outline: 1px solid red;}</style><table><tr>

• Open DevTools > Inspector
• In the Elements pane, inspect the <tr> element
• In the Rules pane, expand and observe the Pseudo-elements section
• Select the ::before pseudo-element in the Elements pane
• Select the <tr> element in the Elements pane

Expected results
The width property of the matching CSS rule should not be marked as inactive when selecting either of the <tr> or its ::before pseudo-element.

Actual results
The width property is marked as inactive when selecting the <tr> element and listing its matching CSS rulee for the ::before pseudo-element.

Comment 3

[Razvan Caliman [:rcaliman]]

Attachment: pseudo-element-table-row.mp4

Comment 4

[Massimiliano Caniparoli]

Thank you.
I'd like to point out that this is a special circumstance: a ::before on a <tr> may bring to unexpected behavior, infact just after submitting this issue I noticed that the table was resized (and a virtual column had been added), though the ::before was in position:absolute. It is probably somehow treated as table cell anyway.

Comment 5

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

The severity field is not set for this bug.
:gl, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 6

[Massimiliano Caniparoli]

I'd like to report an analogous circumstance, with no tables, but the ::before of a label:
It still says "try adding display:inline-block", but it's already set

Comment 7

[Massimiliano Caniparoli]

Attachment: Right panel says that label::before's height and width won't work, but they do. IT suggests to add display:inline-block as it did the previous image, but it's already present

Comment 8

[Massimiliano Caniparoli]

I just noticed the same for the before/after of a span (which is inline by default): it says the rules won't be applied, even though they are