Bug 158258 - [css-sizing] Item borders are missing with 'min-width:-webkit-fill-available' and zero available width
Summary: [css-sizing] Item borders are missing with 'min-width:-webkit-fill-available'...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Javier Fernandez
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-06-01 05:32 PDT by Javier Fernandez
Modified: 2016-06-15 13:48 PDT (History)
10 users (show)

See Also:


Attachments
Test case to rerproduce the issue (1.36 KB, text/html)
2016-06-01 05:32 PDT, Javier Fernandez
no flags Details
Simplified case to reproduce the issue. (520 bytes, text/html)
2016-06-01 05:36 PDT, Javier Fernandez
no flags Details
Patch (5.21 KB, patch)
2016-06-01 06:50 PDT, Javier Fernandez
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Javier Fernandez 2016-06-01 05:32:20 PDT
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.
Comment 1 Javier Fernandez 2016-06-01 05:35:12 PDT
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.
Comment 2 Javier Fernandez 2016-06-01 05:36:03 PDT
Created attachment 280230 [details]
Simplified case to reproduce the issue.
Comment 3 Javier Fernandez 2016-06-01 05:37:01 PDT
The "fill-available" size is defined in the following spec document:

http://www.w3.org/TR/css-sizing-3/#fill-available-sizing"
Comment 4 Javier Fernandez 2016-06-01 05:37:26 PDT
The "fill-available" size is defined in the following spec document:

http://www.w3.org/TR/css-sizing-3/#fill-available-sizing"
Comment 5 Javier Fernandez 2016-06-01 06:50:30 PDT
Created attachment 280232 [details]
Patch
Comment 6 Dave Hyatt 2016-06-01 09:33:50 PDT
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?
Comment 7 Javier Fernandez 2016-06-01 10:54:06 PDT
(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.
Comment 8 Javier Fernandez 2016-06-01 11:44:30 PDT
(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
Comment 9 Javier Fernandez 2016-06-02 08:53:41 PDT
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.
Comment 10 WebKit Commit Bot 2016-06-15 13:48:45 PDT
Comment on attachment 280232 [details]
Patch

Clearing flags on attachment: 280232

Committed r202103: <http://trac.webkit.org/changeset/202103>
Comment 11 WebKit Commit Bot 2016-06-15 13:48:49 PDT
All reviewed patches have been landed.  Closing bug.