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>
Severity: Normal    
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
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.

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.)

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:
This was resolved by the CSSWG here:

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 ***