Bug 126809

Summary: WebKit incorrectly resolves percent values for vertical padding against container *width* (instead of height), on flex items
Product: WebKit Reporter: Daniel Holbert <dholbert>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal    
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
testcase 1 none

Description Daniel Holbert 2014-01-10 23:36:02 PST
Created attachment 220923 [details]
testcase 1

STR: Load attached testcase.

EXPECTED RESULTS:
No red should be visible. (The flex item should resolve its "padding-bottom: 100%" against the container's height, and end up with 200px of padding, covering up all of the red.)

ACTUAL RESULTS:
Red is ivsible. Specifically, the top 100px of the container is lime, and the bottom 100px is red.

This indicates that the flex item is resolving its "padding-bottom: 100%" against the container's width (not height), which is incorrect for a flex item.

Spec reference:
http://dev.w3.org/csswg/css-flexbox/#item-margins
This was resolved by the CSSWG here:
http://lists.w3.org/Archives/Public/www-style/2013Mar/0688.html

Note that for a block, it'd be correct to resolve percentage vertical-padding values against the containing block's width.  But in a flexbox, it's supposed to resolve against the size of the respective dimension (the height in this case), per spec link above.

I tested this with (webkit-based) Midori 0.4.3.  Google Chrome (blink) development versions have the same problem -- see http://code.google.com/p/chromium/issues/detail?id=333533 . Firefox does not have this problem. (I tested both Firefox version 26 and current Nightly)
Comment 1 Daniel Holbert 2014-01-17 15:45:58 PST
Looks like this is a duplicate of bug 113519.

*** This bug has been marked as a duplicate of bug 113519 ***