126809 2014-01-10 23:36:02 -0800 WebKit incorrectly resolves percent values for vertical padding against container *width* (instead of height), on flex items 2014-01-17 15:45:58 -0800 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) All All RESOLVED DUPLICATE 113519 P2 Normal --- 1 dholbert webkit-unassigned oldest_to_newest 966765 0 220923 dholbert 2014-01-10 23:36:02 -0800 Created attachment 220923 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) 969293 1 dholbert 2014-01-17 15:45:58 -0800 Looks like this is a duplicate of bug 113519. *** This bug has been marked as a duplicate of bug 113519 *** 220923 2014-01-10 23:36:02 -0800 2014-01-10 23:36:02 -0800 testcase 1 webkittest.html text/html 489 dholbert PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8c3R5bGU+CiAgICAuY29udGFpbmVyIHsK ICAgICAgZGlzcGxheTogZmxleDsKICAgICAgd2lkdGg6IDEwMHB4OwogICAgICBoZWlnaHQ6IDIw MHB4OwogICAgICBib3JkZXI6IDFweCBzb2xpZCBncmF5OwogICAgICBiYWNrZ3JvdW5kOiByZWQ7 CiAgICB9CgogICAgLmNoaWxkIHsKICAgICAgLyogVGhpcyBzaG91bGQgYXBwbHkgdG8gX2hlaWdo dF8gb2YgY29udGFpbmluZyBibG9jazogKi8KICAgICAgcGFkZGluZy1ib3R0b206IDEwMCU7CiAg ICAgIGhlaWdodDogMHB4OwogICAgICBmbGV4OiAxOwogICAgICBiYWNrZ3JvdW5kOiBsaW1lOwog ICAgfQoKPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KICBUZXN0IGZhaWxzIGlmIGFueSByZWQgaXMg dmlzaWJsZS4KICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgPGRpdiBjbGFzcz0iY2hpbGQi PjwvZGl2PgogIDwvZGl2Pgo8L2JvZHk+CjwvaHRtbD4K