[Webkit-unassigned] [Bug 209756] New: [css-grid] If a grid template track has repeat(auto-fit, ...) as well as grid template area defined, the grid area is rendered in the wrong location

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=209756

            Bug ID: 209756
           Summary: [css-grid] If a grid template track has
                    repeat(auto-fit, ...) as well as grid template area
                    defined, the grid area is rendered in the wrong
                    location
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: clopez at igalia.com
                CC: jfernandez at igalia.com, obrufau at igalia.com,
                    rego at igalia.com

This bug was previously reported for Chrome at https://crbug.com/966090 (which its now fixed), but WebKit still has the same issue.

Steps to reproduce the problem?
Below there are 3 different test cases to reproduce the problem:

First:

https://test-e79a2b-96b10b0680625d539b0895ae800.webflow.io/

You can see here I defined grid-template-columns and grid-template-rows to `repeat(auto-fit, minmax(200px, auto))`, and grid-template-areas to ". Area". I placed the Heading text inside of the Area, and would expect it to appear in the second column, first row. But it does not. In Firefox, and Chrome it does.

Second:

https://codepen.io/anon/pen/zQpajp?editors=1100
Same details as above, but with this codepen you can adjust values as needed

Third:

1. Add a div element
2. Add a few block elements, with some content e.g. an H1
3. Make the div a `display: grid`
4. Give the div a `repeat(auto-fit, minmax(100px, auto))` (or any other valid value for auto-fit) on both `grid-template-columns` and `grid-template-rows`
5. Define a valid `grid-template-areas`
6. Place one of the grid child elements inside of the area

What is the expected behavior?
The grid template areas should be rendered where it is defined in the track listing, eg

- If a grid template areas was `. . content content .`, then the area should start from column line 4, end on line 6, and row line 1, end on line 2.

What went wrong?
It looks like the area is being moved at the very end of the track. See the examples in the repro steps above. Firefox and Chrome does what is expected.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200330/e7bc0282/attachment.htm>