Convert animation and renderer code to know about BorderImageLength

Source/core/frame/animation/CSSPropertyAnimation.cpp

 /*
  * Copyright (C) 2007, 2008, 2009 Apple Inc. All rights reserved.
  * Copyright (C) 2012 Adobe Systems Incorporated. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 53 matching lines @@
 static inline Color blendFunc(const AnimationBase*, const Color& from, const Color& to, double progress)
 {
     return blend(from, to, progress);
 }
 
 static inline Length blendFunc(const AnimationBase*, const Length& from, const Length& to, double progress)
 {
     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)
 {
     return LengthPoint(blendFunc(anim, from.x(), to.x(), progress), blendFunc(anim, from.y(), to.y(), progress));
 }
 
 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)
 {
     if (anim->isTransformFunctionListValid())
         return to.blendByMatchingOperations(from, progress);
     return to.blendByUsingMatrixInterpolation(from, progress);
 }
 
 static inline PassRefPtr<ClipPathOperation> blendFunc(const AnimationBase*, ClipPathOperation* from, ClipPathOperation* to, double progress)
@@ skipping 858 matching lines @@
     gPropertyWrappers->append(new PropertyWrapperVisitedAffectedColor(CSSPropertyColor, &RenderStyle::color, &RenderStyle::setColor, &RenderStyle::visitedLinkColor, &RenderStyle::setVisitedLinkColor));
 
     gPropertyWrappers->append(new PropertyWrapperVisitedAffectedColor(CSSPropertyBackgroundColor, &RenderStyle::backgroundColor, &RenderStyle::setBackgroundColor, &RenderStyle::visitedLinkBackgroundColor, &RenderStyle::setVisitedLinkBackgroundColor));
 
     gPropertyWrappers->append(new FillLayersPropertyWrapper(CSSPropertyBackgroundImage, &RenderStyle::backgroundLayers, &RenderStyle::accessBackgroundLayers));
     gPropertyWrappers->append(new StyleImagePropertyWrapper(CSSPropertyListStyleImage, &RenderStyle::listStyleImage, &RenderStyle::setListStyleImage));
     gPropertyWrappers->append(new StyleImagePropertyWrapper(CSSPropertyWebkitMaskImage, &RenderStyle::maskImage, &RenderStyle::setMaskImage));
 
     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));
 
     gPropertyWrappers->append(new FillLayersPropertyWrapper(CSSPropertyBackgroundPositionX, &RenderStyle::backgroundLayers, &RenderStyle::accessBackgroundLayers));
     gPropertyWrappers->append(new FillLayersPropertyWrapper(CSSPropertyBackgroundPositionY, &RenderStyle::backgroundLayers, &RenderStyle::accessBackgroundLayers));
     gPropertyWrappers->append(new FillLayersPropertyWrapper(CSSPropertyBackgroundSize, &RenderStyle::backgroundLayers, &RenderStyle::accessBackgroundLayers));
     gPropertyWrappers->append(new FillLayersPropertyWrapper(CSSPropertyWebkitBackgroundSize, &RenderStyle::backgroundLayers, &RenderStyle::accessBackgroundLayers));
 
     gPropertyWrappers->append(new FillLayersPropertyWrapper(CSSPropertyWebkitMaskPositionX, &RenderStyle::maskLayers, &RenderStyle::accessMaskLayers));
@@ skipping 156 matching lines @@
 }
 
 int CSSPropertyAnimation::getNumProperties()
 {
     ensurePropertyMap();
 
     return gPropertyWrappers->size();
 }
 
 }