Closed Bug 1579017 Opened 2 years ago Closed 4 months ago

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

Categories

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

70 Branch
Desktop
All
defect

Tracking

(firefox69 wontfix, firefox70 wontfix, firefox71 wontfix, firefox72 wontfix, firefox73 wontfix, firefox74 wontfix, firefox86 verified)

VERIFIED FIXED
86 Branch
Tracking Status
firefox69 --- wontfix
firefox70 --- wontfix
firefox71 --- wontfix
firefox72 --- wontfix
firefox73 --- wontfix
firefox74 --- wontfix
firefox86 --- verified

People

(Reporter: zavecz.krisztina, Assigned: sebo)

References

(Blocks 1 open bug)

Details

(Keywords: dev-doc-needed, Whiteboard: [dt-q])

Attachments

(2 files)

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).

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!

Component: Untriaged → Inspector
Flags: needinfo?(zavecz.krisztina)
Product: Firefox → DevTools

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

Flags: needinfo?(zavecz.krisztina)

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

Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Unspecified → All
Hardware: Unspecified → Desktop
Blocks: 1540753
Priority: -- → P3
Summary: DevTools info for grid order support is not up-to-date → [Inactive CSS] The order property should be supported valid for grids

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.

Has STR: --- → yes
Component: Inspector → Inspector: Rules
Whiteboard: [dt-q]

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

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.

Duplicate of this bug: 1653508

(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

Assignee: nobody → sebastianzartner
Status: NEW → ASSIGNED
See Also: → 1685891

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

Attachment #9196237 - Attachment description: Bug 1579017 - Corrected inactive CSS rule for order property, making it valid for grid items. r=mtigley → Bug 1579017 - Corrected inactive CSS rule for order property, making it valid for grid items. r=jdescottes
Pushed by apavel@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1f3a9cec2fbe
Corrected inactive CSS rule for order property, making it valid for grid items. r=jdescottes
Status: ASSIGNED → RESOLVED
Closed: 4 months ago
Resolution: --- → FIXED
Target Milestone: --- → 86 Branch

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

Status: RESOLVED → VERIFIED

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

Sebastian

Keywords: dev-doc-needed
You need to log in before you can comment on or make changes to this bug.