1579017 - [Inactive CSS] The order property should be supported valid for grids

Status: VERIFIED FIXED

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

Description

[zavecz.krisztina]

Attachment: devtools-grid-item-order-2.png

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

Steps to reproduce:

I have a standard div container with grid display property. It contains 2 children (grid items). I set "order" on grid items (because I want to change their appearance order relative to DOM structure. It works, but...

Actual results:

...Firefox DevTools informs me that order has no effect on this element, because order is only supported for flex or inline-flex containers. But this is not true, as practically, it works. Even MDN says that grid containers are supported: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Expected results:

DevTools should not grey out this rule, as the feature is implemented in the browser (order property is supported both for flex- and grid containers).

Comment 1

[Daniel Bodea [:danibodea]]

I do not know whether this is valid or not, but I will set this bug's component as (DevTools) Inspector and hope it will be addressed by a developer. In case it is incorrect, please set a more appropriate component.

Furthermore, Krisztina, can you provide a link that reproduces this issue so that other versions and operating systems can be verified?

Thank you for your contribution!

Comment 2

[zavecz.krisztina]

Dear Daniel,

Thank you for moving the issue to the right place. :) (sorry I missed that there is also a setting for component).
Here is a publicly available link with reproduction of the issue:
https://codepen.io/zkriszti/pen/QWLQzVP

Comment 3

[Daniel Bodea [:danibodea]]

This issue occurs on all platforms and main versions. Thanks, Krisztina.

Comment 4

[Sebastian Zartner [:sebo]]

To give some steps to reproduce the issue:

1. Open the Codepen of comment 2
2. Inspect the "COL-1 CONTENT" element
3. Check the order property in the Rules panel

=> It is marked as inactive while it actually applies to the grid item.

Comment 5

[Micah [:mtigley] (she/her)]

According to https://www.w3.org/TR/css-grid-1/#order-property, 'order' does indeed affect grid items.

Comment 6

[Micah [:mtigley] (she/her)]

Another thing to keep in mind is that order affects the auto-placement of grid items. Grid items that are explicitly placed using grid-column, grid-row, grid-area, absolute positioning, etc. should still show the warning.

Comment 8

[Sebastian Zartner [:sebo]]

(In reply to Micah Tigley [:mtigley] from comment #6)

Grid items that are explicitly placed using grid-column, grid-row, grid-area, absolute positioning, etc. should still show the warning.

That's not correct regarding grid-column, grid-row, and grid-area. order also affects the painting order, so for overlapping grid items order has some influence on their display.
At the same time, order is obviously also influenced by z-index.

Sebastian

Comment 9

[Sebastian Zartner [:sebo]]

Attachment: Bug 1579017 - Corrected inactive CSS rule for order property, making it valid for grid items. r=jdescottes

Comment 10

[Sebastian Zartner [:sebo]]

The attached patch fixes the bug related to the message that order is inactive on grid items. I've created a separate bug for the z-index case mentioned in comment 8 because that's an enhancement.

Sebastian

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1f3a9cec2fbe
Corrected inactive CSS rule for order property, making it valid for grid items. r=jdescottes

Comment 12

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/1f3a9cec2fbe

Comment 13

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/1f3a9cec2fbe

Comment 14

[Cristian Fogel [:cfogel]]

Verified with 86.0a1 (2021-01-19).

Comment 15

[Sebastian Zartner [:sebo]]

Maybe not worth documenting this change alone but maybe together with the change in bug 1551569 for the release notes of 86.

Sebastian