New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 613354 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Jun 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Compat

Blocking:
issue 79180



Sign in to add a comment

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

Project Member Reported by mpalmg...@mozilla.com, May 19 2016

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0

Example URL:

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.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 52.0.2716.0 (Official Build) dev (64-bit)  Channel: n/a
OS Version: 
Flash Version: 

The testcase renders correctly in Firefox Nightly.
 
grid-min-width-fill-chrome-bug.html
1.4 KB View Download
Labels: M-52 OS-Mac OS-Windows
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on Windows 7, Ubuntu 14.04 and Mac OS 10.11.4 using chrome latest canary M52-52.0.2741.0.

This is a non-regression issue seen from past M35-35.0.1849.0, Hence marking it as untriaged.

Thanks!
 Issue 613289  has been merged into this issue.

Comment 3 by r...@igalia.com, May 25 2016

Blocking: 79180
Cc: svil...@igalia.com jfernan...@igalia.com r...@igalia.com
Components: Blink>Layout>Grid
Labels: -OS-Linux -OS-Windows -OS-Mac OS-All
Status: Available (was: Untriaged)

Comment 4 by suherv...@gmail.com, May 26 2016

Indonesia
Pada tanggal 25 Mei 2016 22.17, "rego@igalia.com via Monorail" <
monorail@chromium.org> menulis:

Comment 5 by r...@igalia.com, May 26 2016

Cc: cbiesin...@chromium.org
I'm not sure if this is a grid issue or a generic layout issue, as I can reproduce the same thing in a regular block.
However, it seems to be working fine on flexbox.

See the attached example and the screenshot comparing Chrome and Firefox output.
The border on Chrome is only visible on flexbox, but not on regular blocks neither grid.
You can check it life at: http://jsbin.com/toredoc/1/edit?html,css,output

@cbiesinger do you remember if flexbox does anything special regarding this? Thanks.
bug-613354.html
518 bytes View Download
bug-613354-chrome-vs-firefox.png
85.1 KB View Download
Hmm this is strange. Flexbox has some special handling for min-width (https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp&q=layoutflex&sq=package:chromium&l=1073) but I really am not sure how that would lead to this difference in behavior; would require some debugging.
Owner: jfernan...@igalia.com
Status: Assigned (was: Available)
Cc: e...@chromium.org r...@opera.com
Components: -Blink>Layout>Grid Blink>Layout
Summary: [css-sizing] Item borders are missing with 'min-width:-webkit-fill-available' and zero available width (was: [css-grid] Grid item borders are missing with 'justify-self:stretch' + 'min-width:-webkit-fill-available' and zero available width)
Updated the bug description, since it's totally unrelated to stretch and it happens also for regular blocks. 
Project Member

Comment 9 by sheriffbot@chromium.org, Jun 1 2016

Labels: -M-52 M-53 MovedFrom-52
Moving this nonessential bug to the next milestone.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Project Member

Comment 10 by bugdroid1@chromium.org, Jun 14 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f7b659ec21315a34e7bb462283d3f007c16a3b7c

commit f7b659ec21315a34e7bb462283d3f007c16a3b7c
Author: jfernandez <jfernandez@igalia.com>
Date: Tue Jun 14 10:23:42 2016

[css-sizing] Adding border and padding to fill-available width

The "fill-available" size is defined as the containing block's size less
the box's border and padding size. However, when used for
min-width we should ensure we don't get negative values as
result of logical width computation.

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

This patch ensure fill-available value computed value will be always
greater than box's border and padding width.

BUG= 613354 , 616059 

Review-Url: https://codereview.chromium.org/2022033003
Cr-Commit-Position: refs/heads/master@{#399677}

[add] https://crrev.com/f7b659ec21315a34e7bb462283d3f007c16a3b7c/third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/fill-available-with-zero-width-expected.html
[add] https://crrev.com/f7b659ec21315a34e7bb462283d3f007c16a3b7c/third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/fill-available-with-zero-width.html
[modify] https://crrev.com/f7b659ec21315a34e7bb462283d3f007c16a3b7c/third_party/WebKit/Source/core/layout/LayoutBox.cpp

Status: Fixed (was: Assigned)
this issue should be FIXED now.
Project Member

Comment 12 by bugdroid1@chromium.org, Jun 15 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f7b659ec21315a34e7bb462283d3f007c16a3b7c

commit f7b659ec21315a34e7bb462283d3f007c16a3b7c
Author: jfernandez <jfernandez@igalia.com>
Date: Tue Jun 14 10:23:42 2016

[css-sizing] Adding border and padding to fill-available width

The "fill-available" size is defined as the containing block's size less
the box's border and padding size. However, when used for
min-width we should ensure we don't get negative values as
result of logical width computation.

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

This patch ensure fill-available value computed value will be always
greater than box's border and padding width.

BUG= 613354 , 616059 

Review-Url: https://codereview.chromium.org/2022033003
Cr-Commit-Position: refs/heads/master@{#399677}

[add] https://crrev.com/f7b659ec21315a34e7bb462283d3f007c16a3b7c/third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/fill-available-with-zero-width-expected.html
[add] https://crrev.com/f7b659ec21315a34e7bb462283d3f007c16a3b7c/third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/fill-available-with-zero-width.html
[modify] https://crrev.com/f7b659ec21315a34e7bb462283d3f007c16a3b7c/third_party/WebKit/Source/core/layout/LayoutBox.cpp

Sign in to add a comment