Bug 158258 – [css-sizing] Item borders are missing with 'min-width:-webkit-fill-available' and zero available width

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Javier Fernandez]

Created attachment 280229 [details]
Test case to rerproduce the issue

Steps to reproduce the problem:
1. load the attached testcase

What is the expected behavior?
The grid items should have "1px solid black" borders (same as the flex items have below the <hr>).
There should be no red areas.

What went wrong?
The grid items do not render any border.

[Javier Fernandez]

The issue is clearly reproducible using regular block, so it's unrelated to grid nor flex. 

It seems Firefox renders like the flexbox case is doing in the attached example, so borders are visible.

Attached a simplified case to reproduce the issue using block, flex and grid layout models.

[Javier Fernandez]

Created attachment 280230 [details]
Simplified case to reproduce the issue.

[Javier Fernandez]

The "fill-available" size is defined in the following spec document:

http://www.w3.org/TR/css-sizing-3/#fill-available-sizing"

[Javier Fernandez]

The "fill-available" size is defined in the following spec document:

http://www.w3.org/TR/css-sizing-3/#fill-available-sizing"

[Javier Fernandez]

Created attachment 280232 [details]
Patch

[Dave Hyatt]

Comment on attachment 280232 [details]
Patch

This doesn't seem quite right to me. Does fillAvailableMeasure normally include the border and padding? Shouldn't we just be doing box-sizing adjustments to make this happen correctly rather than hardcoding a max like this?

[Javier Fernandez]

(In reply to comment #6)
> Comment on attachment 280232 [details]
> Patch
> 
> This doesn't seem quite right to me. Does fillAvailableMeasure normally
> include the border and padding? Shouldn't we just be doing box-sizing
> adjustments to make this happen correctly rather than hardcoding a max like
> this?

fillAvailableMeasure should not include box's border and paddings, normally. However, when used for MinSize we need to prevent negative values for the content sizes. Note that fillAvailableMeasure is also used for 'auto', which for the case of MinSize is resolved as zero (plus box-sizing adjustments in that case).

I guess we may follow a similar approach, so applying box-sizing adjustments when ever available space is zero.

[Javier Fernandez]

(In reply to comment #7)
> (In reply to comment #6)
> > Comment on attachment 280232 [details]
> > Patch
> > 
> > This doesn't seem quite right to me. Does fillAvailableMeasure normally
> > include the border and padding? Shouldn't we just be doing box-sizing
> > adjustments to make this happen correctly rather than hardcoding a max like
> > this?
> 
> fillAvailableMeasure should not include box's border and paddings, normally.
                       should include

[Javier Fernandez]

As far as I know, fill-available is not affected by the box-sizing property; If I'm not wrong, like 'auto' for the inline-size. It should behave like 100% and box-sizing: border-box. 

From my understanding of the css-sizing spec, fill-available should include always border and padding, so we can guarantee that box's inner size is always a positive value.

[WebKit Commit Bot]

Comment on attachment 280232 [details]
Patch

Clearing flags on attachment: 280232

Committed r202103: <http://trac.webkit.org/changeset/202103>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.