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

Source/core/rendering/RenderBoxModelObject.cpp

 /*
  * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
  *           (C) 1999 Antti Koivisto (koivisto@kde.org)
  *           (C) 2005 Allan Sandfeld Jensen (kde@carewolf.com)
  *           (C) 2005, 2006 Samuel Weinig (sam.weinig@gmail.com)
  * Copyright (C) 2005, 2006, 2007, 2008, 2009 Apple Inc. All rights reserved.
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU Library General Public
@@ skipping 292 matching lines @@
 int RenderBoxModelObject::pixelSnappedOffsetWidth() const
 {
     return snapSizeToPixel(offsetWidth(), offsetLeft());
 }
 
 int RenderBoxModelObject::pixelSnappedOffsetHeight() const
 {
     return snapSizeToPixel(offsetHeight(), offsetTop());
 }
 
-LayoutUnit RenderBoxModelObject::computedCSSPadding(const Length& padding) const
+LayoutUnit RenderBoxModelObject::computedCSSPadding(const Length& padding, bool isTopOrBottomOrAfterOrBeforePadding) const
 {
     LayoutUnit w = 0;
     if (padding.isPercent())
-        w = containingBlockLogicalWidthForContent();
+        w = (containingBlock()->isFlexibleBox() && isTopOrBottomOrAfterOrBeforePadding)?containingBlockLogicalHeightForContent():containingBlockLogicalWidthForContent();

[tony, 2014/07/10 17:10:06]

There should be spaces around the ? and :.

[harpreet.sk, 2014/07/14 08:38:07]

Done.

     return minimumValueForLength(padding, w);
 }
 
 RoundedRect RenderBoxModelObject::getBackgroundRoundedRect(const LayoutRect& borderRect, InlineFlowBox* box, LayoutUnit inlineBoxWidth, LayoutUnit inlineBoxHeight,
     bool includeLogicalLeftEdge, bool includeLogicalRightEdge) const
 {
     RoundedRect border = style()->getRoundedBorderFor(borderRect, includeLogicalLeftEdge, includeLogicalRightEdge);
     if (box && (box->nextLineBox() || box->prevLineBox())) {
         RoundedRect segmentBorder = style()->getRoundedBorderFor(LayoutRect(0, 0, inlineBoxWidth, inlineBoxHeight), includeLogicalLeftEdge, includeLogicalRightEdge);
         border.setRadii(segmentBorder.radii());
@@ skipping 2172 matching lines @@
             context->drawInnerShadow(border, shadowColor, flooredIntSize(shadowOffset), shadowBlur, shadowSpread, clippedEdges);
         }
     }
 }
 
 LayoutUnit RenderBoxModelObject::containingBlockLogicalWidthForContent() const
 {
     return containingBlock()->availableLogicalWidth();
 }
 
+LayoutUnit RenderBoxModelObject::containingBlockLogicalHeightForContent() const
+{
+    return containingBlock()->logicalHeight() - containingBlock()->borderAndPaddingLogicalHeight();

[tony, 2014/07/10 17:10:06]

Does this always work?  We might not have computed the height yet for the
containing block, but I guess in that case we should ignore the percentage
height (since it can't be resolved).

[harpreet.sk, 2014/07/14 08:38:07]

This will not work always. Uploaded new solution. 

+}
+
 RenderBoxModelObject* RenderBoxModelObject::continuation() const
 {
     if (!continuationMap)
         return 0;
     return continuationMap->get(this);
 }
 
 void RenderBoxModelObject::setContinuation(RenderBoxModelObject* continuation)
 {
     if (continuation) {
@@ skipping 210 matching lines @@
     ASSERT(!beforeChild || toBoxModelObject == beforeChild->parent());
     for (RenderObject* child = startChild; child && child != endChild; ) {
         // Save our next sibling as moveChildTo will clear it.
         RenderObject* nextSibling = child->nextSibling();
         moveChildTo(toBoxModelObject, child, beforeChild, fullRemoveInsert);
         child = nextSibling;
     }
 }
 
 } // namespace WebCore