Convert animation and renderer code to know about BorderImageLength

Source/core/frame/animation/CSSPropertyAnimation.cpp

Index: Source/core/frame/animation/CSSPropertyAnimation.cpp
diff --git a/Source/core/frame/animation/CSSPropertyAnimation.cpp b/Source/core/frame/animation/CSSPropertyAnimation.cpp
index 4479e657ef0e3de32f0c946b5c9fe427e32a6ff7..ddd16a5e1f8b8fa6bf886b5f8a34e52381e9469a 100644
--- a/Source/core/frame/animation/CSSPropertyAnimation.cpp
+++ b/Source/core/frame/animation/CSSPropertyAnimation.cpp
@@ -71,10 +71,29 @@ static inline Length blendFunc(const AnimationBase*, const Length& from, const L
     return to.blend(from, progress, ValueRangeAll);
 }
 
+static inline LengthOrNumber blendFunc(const AnimationBase* anim, const LengthOrNumber& from, const LengthOrNumber& to, double progress)
+{
+    if (from.isNumber() && to.isNumber())
+        return LengthOrNumber(blendFunc(anim, from.number(), to.number(), progress));
+
+    if (from.isLength() && to.isLength())
+        return LengthOrNumber(blendFunc(anim, from.length(), to.length(), progress));
+
+    return to;

[Julien - ping for review, 2013/11/02 00:00:03]

I don't think this is totally correct. In this case, we can still interpolate
from a Length to a number or vice-versa: Lengths being treated as real numbers
for the purpose of interpolation
(http://dev.w3.org/csswg/css-transitions/#animatable-types).

It's probably gross but Length::blend handles the interpolation correctly so you
would just have to consider a number as Fixed Length and that should give you
the right result (but it will need to be converted back to a number or else we
lose some information).

[shans, 2013/11/03 23:59:42]

If we're interpolating from a length to a number, then we're doing something
like:
line-height: 50px;
to
line-height: 4;
(which means 4x font-size)

We could convert the 4 to a pixel value (say 40px if font-size is 10px), then
interpolate, and this would work; but how do we represent the result in the
computed style? Furthermore, how do we inherit the result correctly?

In particular, if we're at 50% then this should be a value which is half-way
between 50px and four times whatever the current font-size is (i.e. a value that
is responsive to changes in font-size). We could use a calc expression in the
computed style for this (calc(25px + 200%)), but this is an unreachable value
(there are no specified styles that one could use to generate this computed
style), and will have a different effect if used as a specified style.

I think the current behaviour is probably the best we can do right now.

[davve, 2013/11/04 15:02:28]

But no worse than the current code though? (see LengthBox variant of blendFunc)
for the current type check. If not worse than current, can we handle this in a
separate bug/issue?

[Julien - ping for review, 2013/11/04 18:15:54]

Fine point. Agreed to punt this to a separate issue, especially considering that
the testing is blocked on a bug!

@shans, I think your proposal would work... that is assuming you don't also
animate 'border-width'.

+}
+
+static inline LengthOrNumberBox blendFunc(const AnimationBase* anim, const LengthOrNumberBox& from, const LengthOrNumberBox& to, double progress)
+{
+    return LengthOrNumberBox(blendFunc(anim, from.top(), to.top(), progress),
+        blendFunc(anim, from.right(), to.right(), progress),
+        blendFunc(anim, from.bottom(), to.bottom(), progress),
+        blendFunc(anim, from.left(), to.left(), progress));
+}
+
 static inline LengthSize blendFunc(const AnimationBase* anim, const LengthSize& from, const LengthSize& to, double progress)
 {
     return LengthSize(blendFunc(anim, from.width(), to.width(), progress),
-                      blendFunc(anim, from.height(), to.height(), progress));
+        blendFunc(anim, from.height(), to.height(), progress));
 }
 
 static inline LengthPoint blendFunc(const AnimationBase* anim, const LengthPoint& from, const LengthPoint& to, double progress)
@@ -85,7 +104,7 @@ static inline LengthPoint blendFunc(const AnimationBase* anim, const LengthPoint
 static inline IntSize blendFunc(const AnimationBase* anim, const IntSize& from, const IntSize& to, double progress)
 {
     return IntSize(blendFunc(anim, from.width(), to.width(), progress),
-                   blendFunc(anim, from.height(), to.height(), progress));
+        blendFunc(anim, from.height(), to.height(), progress));
 }
 
 static inline TransformOperations blendFunc(const AnimationBase* anim, const TransformOperations& from, const TransformOperations& to, double progress)
@@ -964,8 +983,8 @@ void CSSPropertyAnimation::ensurePropertyMap()
 
     gPropertyWrappers->append(new StyleImagePropertyWrapper(CSSPropertyBorderImageSource, &RenderStyle::borderImageSource, &RenderStyle::setBorderImageSource));
     gPropertyWrappers->append(new PropertyWrapper<LengthBox>(CSSPropertyBorderImageSlice, &RenderStyle::borderImageSlices, &RenderStyle::setBorderImageSlices));
-    gPropertyWrappers->append(new PropertyWrapper<LengthBox>(CSSPropertyBorderImageWidth, &RenderStyle::borderImageWidth, &RenderStyle::setBorderImageWidth));
-    gPropertyWrappers->append(new PropertyWrapper<LengthBox>(CSSPropertyBorderImageOutset, &RenderStyle::borderImageOutset, &RenderStyle::setBorderImageOutset));
+    gPropertyWrappers->append(new PropertyWrapper<LengthOrNumberBox>(CSSPropertyBorderImageWidth, &RenderStyle::borderImageWidth, &RenderStyle::setBorderImageWidth));
+    gPropertyWrappers->append(new PropertyWrapper<LengthOrNumberBox>(CSSPropertyBorderImageOutset, &RenderStyle::borderImageOutset, &RenderStyle::setBorderImageOutset));
 
     gPropertyWrappers->append(new StyleImagePropertyWrapper(CSSPropertyWebkitMaskBoxImageSource, &RenderStyle::maskBoxImageSource, &RenderStyle::setMaskBoxImageSource));
     gPropertyWrappers->append(new PropertyWrapper<const NinePieceImage&>(CSSPropertyWebkitMaskBoxImage, &RenderStyle::maskBoxImage, &RenderStyle::setMaskBoxImage));