Grid alignment issue with auto tracks

[akesson]

taffy version

0.4.0

Platform

Rust

What you did

https://github.com/akesson/taffy-issue

What went wrong

[nicoburns]

I am able to reproduce this as a generated test with the following HTML snippet:

<div id="test-root" 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>

If I am understanding correctly, then the blue (top left) and green (top right) nodes place correctly when the yellow (bottom) node is not present, but when the yellow node is added to the grid then the green node is incorrectly places 10px to the right of where it should be.

I haven't had a chance to dig into this in detail yet, but I strongly suspect that this is because the yellow node is causing the 1 grid column to be sized 10px too large. The yellow node is 20px larger than the first column, which if shared evenly across the two columns would make the first column 10px larger. This shouldn't happen because the second column (which it also spans) already has enough space for the extra width, but I suspect that there is bug causing it to happen anyway.

[nicoburns]

In investigating this further, I've noticed that your reproduction doesn't match your graphic. In your graphic the top-right node has a span of 1, whereas in the reproduction is has a span of 2. With a span of 1, Taffy matches Chrome's layout. With a span of 2 it doesn't, but I think this is undefined in the spec (it depends on which order you process nodes in, which isn't specified). We might still want to change this to match Chrome/Firefox, but I'm somewhat reluctant to make that change until I have more datapoints on what other browsers are implementing. My best guess at the moment is "grid order" (so depending on grid-auto-flow), but that's speculative.

[nicoburns]

I've opened w3c/csswg-drafts#10095 to discuss this