Bug 126809 - WebKit incorrectly resolves percent values for vertical padding against container *width* (instead of height), on flex items
Summary: WebKit incorrectly resolves percent values for vertical padding against conta...
Status: RESOLVED DUPLICATE of bug 113519
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2014-01-10 23:36 PST by Daniel Holbert
Modified: 2014-01-17 15:45 PST (History)
0 users

See Also:

testcase 1 (489 bytes, text/html)
2014-01-10 23:36 PST, Daniel Holbert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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 ***