New issue
Advanced search Search tips

Issue 615248 link

Starred by 2 users

Issue metadata

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

Blocking:
issue 79180



Sign in to add a comment

[css-grid] support for <percentage> value in grid-row-gap/grid-column-gap

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

Issue description

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

Example URL:

Steps to reproduce the problem:
1. load a page that uses grid-[row|column]-gap: <percentage>

For example:
https://hg.mozilla.org/mozilla-central/raw-file/1e79a41fdac1/layout/reftests/css-grid/grid-column-gap-004.html
https://hg.mozilla.org/mozilla-central/raw-file/1e79a41fdac1/layout/reftests/css-grid/grid-row-gap-005.html

I don't know if you intend to support <percentage> for these properties,
it's in the at-risk section of the CSS Grid spec currently.
But, FYI, we do support it in Firefox Nightly now.
https://nightly.mozilla.org/

What is the expected behavior?
A gap between the (grey) items in the relevant axis.

What went wrong?
Missing grid gaps.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? No 

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:
 
Cc: ranjitkan@chromium.org
Labels: Needs-Feedback
Could you please confirm what exactly the issue is, Attached are 2 screenshots one from chrome and one from FF. Is the Firefox behavior intended one..?

Can you please confirm the same.

Thanks.!
Chrome.png
77.7 KB View Download
FireFox.png
57.7 KB View Download
You MUST enable Grid support in Chrome.
You MUST use Firefox *Nightly* that you get from here:
https://nightly.mozilla.org/

After you do that, you can compare with the reference pages (which shows
the expected rendering) here:
https://hg.mozilla.org/mozilla-central/raw-file/1e79a41fdac1/layout/reftests/css-grid/grid-column-gap-004-ref.html
https://hg.mozilla.org/mozilla-central/raw-file/1e79a41fdac1/layout/reftests/css-grid/grid-row-gap-005-ref.html

Project Member

Comment 3 by sheriffbot@chromium.org, May 28 2016

Labels: -Needs-Feedback Needs-Review
Owner: ranjitkan@chromium.org
Thank you for providing more feedback. Adding requester "ranjitkan@chromium.org" for another review and adding "Needs-Review" label for tracking.

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

Comment 4 by r...@igalia.com, May 30 2016

Blocking: 79180
Cc: -ranjitkan@chromium.org svil...@igalia.com jfernan...@igalia.com r...@igalia.com
Components: Blink>Layout>Grid
Labels: -OS-Linux -Needs-Review OS-All
Owner: ----
Status: Available (was: Unconfirmed)
@mpalmgren thanks for reporting this, I saw you already implemented it on Firefox,
we didn't find time to take a look to this yet.

Next time you report an issue, it'd be nice if you assign the issue
to Grid Layout component (so we got automatically notified).
Thanks for reporting!
> Next time you report an issue, it'd be nice if you assign the issue
> to Grid Layout component (so we got automatically notified).

I'd be happy to, but the form I get when I click "New issue" doesn't
give me that option.
Owner: jfernan...@igalia.com
Status: Assigned (was: Available)
I'll work on this issue for a while; let's see how far I go with this.
Owner: svil...@igalia.com
Re-assigned to @villar.

Comment 9 by svil...@igalia.com, Jul 29 2016

This is on hold as it might be removed from the specs (see https://github.com/w3c/csswg-drafts/issues/345#issuecomment-235963034)
Project Member

Comment 10 by bugdroid1@chromium.org, Sep 8 2016

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

commit 78579c71b9013a88936d31b6ac4ce4b18b0ac339
Author: rego <rego@igalia.com>
Date: Thu Sep 08 20:37:01 2016

[css-grid] Allow percentage values for column and row gutters

The grid-column-gap and grid-row-gap allow now percentage as one of the
possible values. This patch adds the required support for both parsing
and layout logic.

This is based on a patch by Javier Fernández http://crrev.com/2057113002/.
However it uses a different approach to compute the percentage gaps
based on the sizing operation.
During intrinsic size phase the percentage gaps are considered 0px.
Also for indefinite heights the percentage row gaps are 0px too.

BUG= 615248 
TEST=fast/css-grid-layout/grid-gutters-as-percentage.html

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

[add] https://crrev.com/78579c71b9013a88936d31b6ac4ce4b18b0ac339/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage.html
[modify] https://crrev.com/78579c71b9013a88936d31b6ac4ce4b18b0ac339/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt
[modify] https://crrev.com/78579c71b9013a88936d31b6ac4ce4b18b0ac339/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
[modify] https://crrev.com/78579c71b9013a88936d31b6ac4ce4b18b0ac339/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
[modify] https://crrev.com/78579c71b9013a88936d31b6ac4ce4b18b0ac339/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
[modify] https://crrev.com/78579c71b9013a88936d31b6ac4ce4b18b0ac339/third_party/WebKit/Source/core/layout/LayoutGrid.h

Comment 11 by r...@igalia.com, Sep 9 2016

Owner: r...@igalia.com
Status: Fixed (was: Assigned)
Project Member

Comment 12 by bugdroid1@chromium.org, Sep 9 2016

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

commit b72a2612ebdee71a9114d184d970a5844c6e7c38
Author: rego <rego@igalia.com>
Date: Fri Sep 09 12:59:58 2016

[css-grid] Avoid computing available space if gap is not a percentage

This patch modifies LayoutGrid::gridGapForDirection() because
we only need to calculate the available space if the grid gap
is a percentage. Otherwise we can skip this operation.

BUG= 615248 

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

[modify] https://crrev.com/b72a2612ebdee71a9114d184d970a5844c6e7c38/third_party/WebKit/Source/core/layout/LayoutGrid.cpp

Sign in to add a comment