[Webkit-unassigned] [Bug 243310] New: Incorrect column-width with inline-size: {fit, max}-content and column-fill: auto

[bugzilla-daemon at webkit.org]

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

            Bug ID: 243310
           Summary: Incorrect column-width with inline-size: {fit,
                    max}-content and column-fill: auto
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: nimajneb0905 at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

In CSS multi-column layout, WebKit renders columns with a wrong column-width if column-fill is auto and the element's inline-size is either fit-content or max-content.
If inline-size is fit-content, the width of the columns becomes a fraction of the viewport's width, which should not happen.
If inline-size is max-content, the width of the columns becomes slightly more than specified in the column-width property, which also should not happen.

Steps to reproduce:
 - visit this URL: https://benjaminaster.com/bugs/column-width/
 - click "fit-content" or "max-content" to get to the respective page

Result:
The red box should align with a column's width, but doesn't.


The red box is positioned absolutely and has dimensions of 50 x 5 rem. You can view the source code of the page in DevTools or by viewing the page source. The CSS of the body element looks like this: 
```css
body {
        margin: 0;
        block-size: 100vh;

        column-width: 50rem;
        inline-size: fit-content; /* or max-content, depending on the demo page */
        column-gap: 0;
        column-fill: auto;
}
```

Other browsers:
 - Gecko (Firefox): renders everything correctly (see screenshots)
 - Blink (Chromium): has pretty much the same bug (see screenshots)

Here are two screenshots for fit-content and max-content. Chrome is at the top, Firefox in the middle, and Epiphany (WebKit) at the bottom:
- fit-content: https://user-images.githubusercontent.com/63414473/181626656-a833027d-e489-4251-a187-fdf377bf8324.png
- max-content: https://user-images.githubusercontent.com/63414473/181626671-955d9913-6d33-4578-9d05-28a66f86759a.png
(bugs.webkit.org won't let me upload more than one image attachment, so I use GitHub image links instead)

Tested in Epiphany nightly 43~alpha, which roughly equivalates Safari 16.0.

-- 
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/20220728/540b6a4e/attachment.htm>