For flex items, percent paddings should resolve against their respective dimension

Source/core/rendering/RenderBoxModelObject.cpp

Index: Source/core/rendering/RenderBoxModelObject.cpp
diff --git a/Source/core/rendering/RenderBoxModelObject.cpp b/Source/core/rendering/RenderBoxModelObject.cpp
index 4137a965a92118d896305488b3af7c227c1b900b..f732cee23f09199fb093ad8b8839953c5d81fc30 100644
--- a/Source/core/rendering/RenderBoxModelObject.cpp
+++ b/Source/core/rendering/RenderBoxModelObject.cpp
@@ -310,11 +310,15 @@ int RenderBoxModelObject::pixelSnappedOffsetHeight() const
     return snapSizeToPixel(offsetHeight(), offsetTop());
 }
 
-LayoutUnit RenderBoxModelObject::computedCSSPadding(const Length& padding) const
+LayoutUnit RenderBoxModelObject::computedCSSPadding(const Length& padding, PaddingType type) const
 {
     LayoutUnit w = 0;
-    if (padding.isPercent())
-        w = containingBlockLogicalWidthForContent();
+    if (padding.isPercent()) {
+        if (containingBlock()->isFlexibleBox() && (type == TopPadding || type == BottomPadding || type == BeforePadding || type == AfterPadding))
+            w = containingBlockLogicalHeightForContent();
+        else
+            w = containingBlockLogicalWidthForContent();
+    }
     return minimumValueForLength(padding, w);
 }
 
@@ -2507,6 +2511,36 @@ LayoutUnit RenderBoxModelObject::containingBlockLogicalWidthForContent() const
     return containingBlock()->availableLogicalWidth();
 }
 
+LayoutUnit RenderBoxModelObject::containingBlockLogicalHeightForContent() const
+{
+    if (containingBlock()->style()->logicalHeight().isAuto())
+        return 0;
+
+    if (containingBlock()->style()->logicalHeight().isPercent())
+        return containingBlock()->computePercentLogicalHeight();
+
+    return containingBlock()->logicalHeight() - containingBlock()->borderAndPaddingLogicalHeight();
+}
+
+LayoutUnit RenderBoxModelObject::computePercentLogicalHeight() const

[tony, 2014/07/14 16:34:38]

I'm not sure this function is correct.  For example, see
RenderBox::computePercentageLogicalHeight which is much more complicated and has
lots of quirks for certain elements like tables.  This might not be the right
design.  Maybe Ojan has some insight in the right way to resolve percent heights
while we're still laying out a child.

[harpreet.sk, 2014/07/15 16:31:01]

I tried to go through the implementation of mozilla (although only some part of
it i understand) and by testing various scenario in mozilla i found that it only
resolves the percentage padding in the cases in which height is finite (ie
height do not depend on layout of content ie cases of fixed height or calculated
height). In other cases like percent height which is not resolvable or intrinsic
height (min-content, max-content etc) or auto height it simply makes the
padding-top and bottom as 0. I tried to incorporate most of the test cases which
are added in mozilla too and all work fine.  

+{
+    float percentHeightFactor = style()->logicalHeight().value() / 100;
+    RenderBlock* cb = containingBlock();
+    while (cb) {
+        if (cb->style()->logicalHeight().isAuto())

[tony, 2014/07/14 16:34:38]

This should probably be !isSpecified().

Please add some test cases with other values for height like a calculated value
or min-content or fit-content.

[harpreet.sk, 2014/07/15 16:31:01]

Done.

+            return 0;
+        if (cb->style()->logicalHeight().isFixed())
+            break;
+        percentHeightFactor *= cb->style()->logicalHeight().value() / 100;

[tony, 2014/07/14 16:34:38]

I think you want to verify that b->style()->logicalHeight().isPercent().

[harpreet.sk, 2014/07/15 16:31:00]

Modifeid the solution to include check for all types of height.

+        cb = cb->containingBlock();
+    }
+
+    if (cb)
+        return percentHeightFactor * cb->style()->logicalHeight().value();
+
+    return 0;
+}
+
 RenderBoxModelObject* RenderBoxModelObject::continuation() const
 {
     if (!continuationMap)