Source/WebCore/ChangeLog

 12021-03-26 Tim Nguyen <ntim@apple.com>
 2
 3 Make the object-position CSS property animatable.
 4 https://bugs.webkit.org/show_bug.cgi?id=223568
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Test: imported/w3c/web-platform-tests/css/css-images/object-position-interpolation.html
 9
 10 * animation/CSSPropertyAnimation.cpp:
 11 (WebCore::blendFunc):
 12 (WebCore::canInterpolateLengthPoints):
 13 (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
 14
1152021-03-25 Antoine Quint <graouts@webkit.org>
216
317 Fix interpolation of the caret-color CSS property

Source/WebCore/animation/CSSPropertyAnimation.cpp

4848#include "FontTaggedSettings.h"
4949#include "GapLength.h"
5050#include "IdentityTransformOperation.h"
 51#include "LengthPoint.h"
5152#include "Logging.h"
5253#include "Matrix3DTransformOperation.h"
5354#include "MatrixTransformOperation.h"

@@static inline LengthSize blendFunc(const CSSPropertyBlendingClient* client, cons
113114 blendFunc(client, from.height, to.height, progress, ValueRangeNonNegative) };
114115}
115116
 117static inline LengthPoint blendFunc(const CSSPropertyBlendingClient*, const LengthPoint& from, const LengthPoint& to, double progress)
 118{
 119 return blend(from, to, progress);
 120}
 121
116122static inline ShadowStyle blendFunc(const CSSPropertyBlendingClient* client, ShadowStyle from, ShadowStyle to, double progress)
117123{
118124 if (from == to)

@@static bool canInterpolateLengthVariants(const GapLength& from, const GapLength&
759765 return canInterpolateLengths(from.length(), to.length(), isLengthPercentage);
760766}
761767
 768static bool canInterpolateLengthPoints(const LengthPoint& from, const LengthPoint& to)
 769{
 770 bool isLengthPercentage = true;
 771 return canInterpolateLengths(from.x(), to.x(), isLengthPercentage)
 772 && canInterpolateLengths(from.y(), to.y(), isLengthPercentage);
 773}
 774
 775class LengthPointPropertyWrapper final : public PropertyWrapperGetter<LengthPoint> {
 776 WTF_MAKE_FAST_ALLOCATED;
 777public:
 778 LengthPointPropertyWrapper(CSSPropertyID property, LengthPoint (RenderStyle::*getter)() const, void (RenderStyle::*setter)(LengthPoint&&))
 779 : PropertyWrapperGetter<LengthPoint>(property, getter)
 780 , m_setter(setter)
 781 {
 782 }
 783
 784private:
 785 bool canInterpolate(const RenderStyle* from, const RenderStyle* to) const final
 786 {
 787 return canInterpolateLengthPoints(value(from), value(to));
 788 }
 789
 790 void blend(const CSSPropertyBlendingClient* client, RenderStyle* destination, const RenderStyle* from, const RenderStyle* to, double progress) const final
 791 {
 792 (destination->*m_setter)(blendFunc(client, value(from), value(to), progress));
 793 }
 794
 795 void (RenderStyle::*m_setter)(LengthPoint&&);
 796};
 797
762798template <typename T>
763799class LengthVariantPropertyWrapper final : public PropertyWrapperGetter<const T&> {
764800 WTF_MAKE_FAST_ALLOCATED;

@@CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap()
21042140 new FillLayersPropertyWrapper(CSSPropertyWebkitMaskPositionY, &RenderStyle::maskLayers, &RenderStyle::ensureMaskLayers),
21052141 new FillLayersPropertyWrapper(CSSPropertyWebkitMaskSize, &RenderStyle::maskLayers, &RenderStyle::ensureMaskLayers),
21062142
 2143 new LengthPointPropertyWrapper(CSSPropertyObjectPosition, &RenderStyle::objectPosition, &RenderStyle::setObjectPosition),
 2144
21072145 new PropertyWrapper<float>(CSSPropertyFontSize, &RenderStyle::computedFontSize, &RenderStyle::setFontSize),
21082146 new PropertyWrapper<unsigned short>(CSSPropertyColumnRuleWidth, &RenderStyle::columnRuleWidth, &RenderStyle::setColumnRuleWidth),
21092147 new LengthVariantPropertyWrapper<GapLength>(CSSPropertyColumnGap, &RenderStyle::columnGap, &RenderStyle::setColumnGap),

LayoutTests/imported/w3c/ChangeLog

 12021-03-26 Tim Nguyen <ntim.bugs@gmail.com>
 2
 3 Add interpolation for object-position CSS property
 4 https://bugs.webkit.org/show_bug.cgi?id=223568
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 * web-platform-tests/css/css-images/object-position-interpolation.html: Added.
 9
1102021-03-25 Antoine Quint <graouts@webkit.org>
211
312 Fix interpolation of the caret-color CSS property

LayoutTests/imported/w3c/web-platform-tests/css/css-images/object-position-interpolation.html

 1<!DOCTYPE html>
 2<meta charset="UTF-8">
 3<link rel="help" href="https://drafts.csswg.org/css-images-3/#the-object-position">
 4<meta name="test" content="object-position supports animation">
 5
 6<script src="/resources/testharness.js"></script>
 7<script src="/resources/testharnessreport.js"></script>
 8<script src="/css/support/interpolation-testcommon.js"></script>
 9
 10<body></body>
 11
 12<script>
 13 // Default object-position value is 50% 50%
 14 test_interpolation({
 15 property: 'object-position',
 16 from: neutralKeyframe,
 17 to: 'left top',
 18 }, [
 19 { at: -0.25, expect: '62.5% 62.5%' },
 20 { at: 0, expect: '50% 50%' },
 21 { at: 0.25, expect: '37.5% 37.5%' },
 22 { at: 0.5, expect: '25% 25%' },
 23 { at: 0.75, expect: '12.5% 12.5%' },
 24 { at: 1, expect: '0% 0%' },
 25 { at: 1.25, expect: '-12.5% -12.5%' },
 26 ]);
 27
 28 // Animate x axis
 29 test_interpolation({
 30 property: 'object-position',
 31 from: 'initial',
 32 to: 'center top',
 33 }, [
 34 { at: -0.25, expect: '50% 62.5%' },
 35 { at: 0, expect: '50% 50%' },
 36 { at: 0.25, expect: '50% 37.5%' },
 37 { at: 0.5, expect: '50% 25%' },
 38 { at: 0.75, expect: '50% 12.5%' },
 39 { at: 1, expect: '50% 0%' },
 40 { at: 1.25, expect: '50% -12.5%' },
 41 ]);
 42
 43 // Animate y axis
 44 test_interpolation({
 45 property: 'object-position',
 46 from: 'initial',
 47 to: 'left center',
 48 }, [
 49 { at: -0.25, expect: '62.5% 50%' },
 50 { at: 0, expect: '50% 50%' },
 51 { at: 0.25, expect: '37.5% 50%' },
 52 { at: 0.5, expect: '25% 50%' },
 53 { at: 0.75, expect: '12.5% 50%' },
 54 { at: 1, expect: '0% 50%' },
 55 { at: 1.25, expect: '-12.5% 50%' },
 56 ]);
 57
 58 // Pixel values
 59 test_interpolation({
 60 property: 'object-position',
 61 from: '20px 20px',
 62 to: '100px 100px',
 63 }, [
 64 { at: -0.25, expect: '0px 0px' },
 65 { at: 0, expect: '20px 20px' },
 66 { at: 0.25, expect: '40px 40px' },
 67 { at: 0.5, expect: '60px 60px' },
 68 { at: 0.75, expect: '80px 80px' },
 69 { at: 1, expect: '100px 100px' },
 70 { at: 1.25, expect: '120px 120px' },
 71 ]);
 72</script>