Allow number-percentage calc() in border-image-slice

third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp

Index: third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
diff --git a/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp b/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
index 3fa99f4ec52abc06744c8b7125e39c43e51f80c6..86725131a857af90e1edd0983e6a8cd825edf4e8 100644
--- a/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
+++ b/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
@@ -250,6 +250,12 @@ static CSSValue* valueForPositionOffset(const ComputedStyle& style, CSSPropertyI
     return zoomAdjustedPixelValueForLength(offset, style);
 }
 
+static CSSPrimitiveValue* numberPercentSlice(const Length& calcSliceLength)
+{
+    PixelsAndPercent pap = calcSliceLength.getPixelsAndPercent();
+    return CSSPrimitiveValue::create(CSSCalcValue::create(CSSCalcValue::createExpressionNode(pap.pixels, pap.percent, true)));
+}
+
 static CSSBorderImageSliceValue* valueForNinePieceImageSlice(const NinePieceImage& image)
 {
     // Create the slices.
@@ -259,7 +265,9 @@ static CSSBorderImageSliceValue* valueForNinePieceImageSlice(const NinePieceImag
     CSSPrimitiveValue* left = nullptr;
 
     // TODO(alancutter): Make this code aware of calc lengths.
-    if (image.imageSlices().top().hasPercent())
+    if (image.imageSlices().top().isCalculated()) {
+        top = numberPercentSlice(image.imageSlices().top());
+    } else if (image.imageSlices().top().hasPercent())
         top = cssValuePool().createValue(image.imageSlices().top().value(), CSSPrimitiveValue::UnitType::Percentage);
     else
         top = cssValuePool().createValue(image.imageSlices().top().value(), CSSPrimitiveValue::UnitType::Number);
@@ -270,7 +278,9 @@ static CSSBorderImageSliceValue* valueForNinePieceImageSlice(const NinePieceImag
         bottom = top;
         left = top;
     } else {
-        if (image.imageSlices().right().hasPercent())
+        if (image.imageSlices().right().isCalculated())
+            right = numberPercentSlice(image.imageSlices().right());
+        else if (image.imageSlices().right().hasPercent())
             right = cssValuePool().createValue(image.imageSlices().right().value(), CSSPrimitiveValue::UnitType::Percentage);
         else
             right = cssValuePool().createValue(image.imageSlices().right().value(), CSSPrimitiveValue::UnitType::Number);
@@ -279,7 +289,9 @@ static CSSBorderImageSliceValue* valueForNinePieceImageSlice(const NinePieceImag
             bottom = top;
             left = right;
         } else {
-            if (image.imageSlices().bottom().hasPercent())
+            if (image.imageSlices().bottom().isCalculated())
+                bottom = numberPercentSlice(image.imageSlices().right());
+            else if (image.imageSlices().bottom().hasPercent())
                 bottom = cssValuePool().createValue(image.imageSlices().bottom().value(), CSSPrimitiveValue::UnitType::Percentage);
             else
                 bottom = cssValuePool().createValue(image.imageSlices().bottom().value(), CSSPrimitiveValue::UnitType::Number);
@@ -287,7 +299,9 @@ static CSSBorderImageSliceValue* valueForNinePieceImageSlice(const NinePieceImag
             if (image.imageSlices().left() == image.imageSlices().right()) {
                 left = right;
             } else {
-                if (image.imageSlices().left().hasPercent())
+                if (image.imageSlices().left().isCalculated())
+                    left = numberPercentSlice(image.imageSlices().right());
+                else if (image.imageSlices().left().hasPercent())
                     left = cssValuePool().createValue(image.imageSlices().left().value(), CSSPrimitiveValue::UnitType::Percentage);
                 else
                     left = cssValuePool().createValue(image.imageSlices().left().value(), CSSPrimitiveValue::UnitType::Number);