Bug 103677

Summary: [CSS Grid Layout] Support percentage paddings and margins on grid items
Product: WebKit Reporter: Julien Chaffraix <jchaffraix>
Component: Layout and RenderingAssignee: Julien Chaffraix <jchaffraix>
Status: RESOLVED FIXED    
Severity: Normal CC: eric, ojan, simon.fraser, tony, webkit.review.bot, xan.lopez
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 60731    
Attachments:
Description Flags
Proposed change: fix more code path to use containingBlockLogicalWidthForContent and fix end margin computation for grid items. none

Description Julien Chaffraix 2012-11-29 15:30:41 PST
Following bug 102968, we should be properly resolving percentage and calc() on width / height but no effort was made to handle padding and margin which also accepts a <percentage>.
Comment 1 Julien Chaffraix 2012-11-29 16:03:02 PST
Created attachment 176841 [details]
Proposed change: fix more code path to use containingBlockLogicalWidthForContent and fix end margin computation for grid items.
Comment 2 Tony Chang 2012-11-29 17:03:16 PST
Comment on attachment 176841 [details]
Proposed change: fix more code path to use containingBlockLogicalWidthForContent and fix end margin computation for grid items.

View in context: https://bugs.webkit.org/attachment.cgi?id=176841&action=review

> Source/WebCore/rendering/RenderBoxModelObject.cpp:465
> +    // Sticky positioned element ignore any override logical width on the containing block (as they don't call
> +    // containingBlockLogicalWidthForContent). It's unclear whether this is totally fine.

Hmm, can we create a test for this?  I guess a sticky div inside a table or a flexbox or a grid should trigger this, right?
Comment 3 Julien Chaffraix 2012-11-29 18:14:34 PST
Comment on attachment 176841 [details]
Proposed change: fix more code path to use containingBlockLogicalWidthForContent and fix end margin computation for grid items.

View in context: https://bugs.webkit.org/attachment.cgi?id=176841&action=review

>> Source/WebCore/rendering/RenderBoxModelObject.cpp:465
>> +    // containingBlockLogicalWidthForContent). It's unclear whether this is totally fine.
> 
> Hmm, can we create a test for this?  I guess a sticky div inside a table or a flexbox or a grid should trigger this, right?

Yes, we should be able to reproduce it with a grid only (the other cases won't work as they don't use the override containing block logic). The grid should be the parent *and* containing block of the sticky element so that we apply the override though.

I should also throw in some positioned elements for good measure.
Comment 4 Julien Chaffraix 2012-11-30 15:42:10 PST
Comment on attachment 176841 [details]
Proposed change: fix more code path to use containingBlockLogicalWidthForContent and fix end margin computation for grid items.

View in context: https://bugs.webkit.org/attachment.cgi?id=176841&action=review

>>> Source/WebCore/rendering/RenderBoxModelObject.cpp:465
>>> +    // containingBlockLogicalWidthForContent). It's unclear whether this is totally fine.
>> 
>> Hmm, can we create a test for this?  I guess a sticky div inside a table or a flexbox or a grid should trigger this, right?
> 
> Yes, we should be able to reproduce it with a grid only (the other cases won't work as they don't use the override containing block logic). The grid should be the parent *and* containing block of the sticky element so that we apply the override though.
> 
> I should also throw in some positioned elements for good measure.

OK, I have spend more time playing with that:
* Our support of positioned element doesn't make sense currently but sadly follows the spec, I proposed a spec change (http://lists.w3.org/Archives/Public/www-style/2012Nov/0546.html). This would be better postponed to a follow-up bug.
* It looks like position: sticky doesn't work inside grid or an inline grid (I couldn't get it to work inside a display: block container either). It's maybe related to bug 100054 but I am not totally sure. Regardless, it seems that we should fix the broader issue of making it work in grid before being able to test this change.
Comment 5 Tony Chang 2012-11-30 15:51:33 PST
Comment on attachment 176841 [details]
Proposed change: fix more code path to use containingBlockLogicalWidthForContent and fix end margin computation for grid items.

OK
Comment 6 Julien Chaffraix 2012-12-03 18:21:30 PST
Comment on attachment 176841 [details]
Proposed change: fix more code path to use containingBlockLogicalWidthForContent and fix end margin computation for grid items.

View in context: https://bugs.webkit.org/attachment.cgi?id=176841&action=review

>>>> Source/WebCore/rendering/RenderBoxModelObject.cpp:465
>>>> +    // containingBlockLogicalWidthForContent). It's unclear whether this is totally fine.
>>> 
>>> Hmm, can we create a test for this?  I guess a sticky div inside a table or a flexbox or a grid should trigger this, right?
>> 
>> Yes, we should be able to reproduce it with a grid only (the other cases won't work as they don't use the override containing block logic). The grid should be the parent *and* containing block of the sticky element so that we apply the override though.
>> 
>> I should also throw in some positioned elements for good measure.
> 
> OK, I have spend more time playing with that:
> * Our support of positioned element doesn't make sense currently but sadly follows the spec, I proposed a spec change (http://lists.w3.org/Archives/Public/www-style/2012Nov/0546.html). This would be better postponed to a follow-up bug.
> * It looks like position: sticky doesn't work inside grid or an inline grid (I couldn't get it to work inside a display: block container either). It's maybe related to bug 100054 but I am not totally sure. Regardless, it seems that we should fix the broader issue of making it work in grid before being able to test this change.

Filed bug 103956 for the first point and bug 103957 for the second.
Comment 7 WebKit Review Bot 2012-12-03 18:25:17 PST
Comment on attachment 176841 [details]
Proposed change: fix more code path to use containingBlockLogicalWidthForContent and fix end margin computation for grid items.

Clearing flags on attachment: 176841

Committed r136465: <http://trac.webkit.org/changeset/136465>
Comment 8 WebKit Review Bot 2012-12-03 18:25:21 PST
All reviewed patches have been landed.  Closing bug.