[csswg-drafts] [css-grid] Define item processing order when resolving intrinsic track sizes (#10095)

nicoburns has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Define item processing order when resolving intrinsic track sizes ==
This issue pertains to steps 12.5.3 and 12.5.4 from [css-grid-2] specification (11.5.3 and 11.5.4 in [css-grid-1]):

- https://www.w3.org/TR/css-grid-2/#algo-spanning-items

Step 12.5 imposes some amount of ordering on processing grid items when determining intrinsic track sizes, but some ordering is left undefined. For example, in which order to process items that cross a flexible track. And in which order to to process items that do not cross a flexible track and cross the same number of tracks as each other. The order in which items are processed can / does affect the sizes that the tracks end up (which tracks item sizes are allocated to), so if we wish for css grid to be completely interoperable then the order must be defined.

The following is an example I was recently presented with where my implementation in [Taffy](https://github.com/DioxusLabs/taffy) conflicts with that in Chrome and Firefox (which seem to be interoperable with each other in this case):

```html
<div style="display: grid; width: 320px; height: 640px; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto auto 1fr; justify-content: start; justify-items: start;">
  <div style="background: #59c4f6; width: 100px; height: 50px; grid-row: 1 / span 2; grid-column: 1;"></div>
  <div style="background: #63c466; width: 40px; height: 30px; grid-row: 1 / span 2; grid-column: 2 / span 2;"></div>
  <div style="background: #feb43f; width: 120px; height: 20px; grid-row: 3 / span 1; grid-column: 1 / span 2;"></div>
</div>
```

When resolving column width, Taffy is processing the 3rd item before the 2nd item on the basis that is further to the left in the grid (which causes column widths of [110px, 10px, 200px]). Based on the column sizes it is producing ([100px, 20px, 200px]), Chrome is presumably processing the 2nd item before the 3rd item. Swapping the items in the source code doesn't change this, so it is not source order that Chrome is processing items. I am guessing that it is may be processing items in [grid order](https://www.w3.org/TR/css-grid-2/#grid-order).

As far as I can tell neither implementation violates the spec, but they nevertheless end up with different results. And I am hoping that we can tighten up the spec to prevent this.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10095 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 18 March 2024 10:38:42 UTC