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 Antoine Quint.
 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
 768class LengthPointPropertyWrapper final : public PropertyWrapperGetter<LengthPoint> {
 769 WTF_MAKE_FAST_ALLOCATED;
 770public:
 771 LengthPointPropertyWrapper(CSSPropertyID property, LengthPoint (RenderStyle::*getter)() const, void (RenderStyle::*setter)(LengthPoint&&))
 772 : PropertyWrapperGetter<LengthPoint>(property, getter)
 773 , m_setter(setter)
 774 {
 775 }
 776
 777private:
 778 void blend(const CSSPropertyBlendingClient* client, RenderStyle* destination, const RenderStyle* from, const RenderStyle* to, double progress) const final
 779 {
 780 (destination->*m_setter)(blendFunc(client, value(from), value(to), progress));
 781 }
 782
 783 void (RenderStyle::*m_setter)(LengthPoint&&);
 784};
 785
762786template <typename T>
763787class LengthVariantPropertyWrapper final : public PropertyWrapperGetter<const T&> {
764788 WTF_MAKE_FAST_ALLOCATED;

@@CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap()
21042128 new FillLayersPropertyWrapper(CSSPropertyWebkitMaskPositionY, &RenderStyle::maskLayers, &RenderStyle::ensureMaskLayers),
21052129 new FillLayersPropertyWrapper(CSSPropertyWebkitMaskSize, &RenderStyle::maskLayers, &RenderStyle::ensureMaskLayers),
21062130
 2131 new LengthPointPropertyWrapper(CSSPropertyObjectPosition, &RenderStyle::objectPosition, &RenderStyle::setObjectPosition),
 2132
21072133 new PropertyWrapper<float>(CSSPropertyFontSize, &RenderStyle::computedFontSize, &RenderStyle::setFontSize),
21082134 new PropertyWrapper<unsigned short>(CSSPropertyColumnRuleWidth, &RenderStyle::columnRuleWidth, &RenderStyle::setColumnRuleWidth),
21092135 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 Antoine Quint.
 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-expected.txt

 1
 2PASS CSS Transitions: property <object-position> from neutral to [left top] at (-0.25) should be [62.5% 62.5%]
 3PASS CSS Transitions: property <object-position> from neutral to [left top] at (0) should be [50% 50%]
 4PASS CSS Transitions: property <object-position> from neutral to [left top] at (0.25) should be [37.5% 37.5%]
 5PASS CSS Transitions: property <object-position> from neutral to [left top] at (0.5) should be [25% 25%]
 6PASS CSS Transitions: property <object-position> from neutral to [left top] at (0.75) should be [12.5% 12.5%]
 7PASS CSS Transitions: property <object-position> from neutral to [left top] at (1) should be [0% 0%]
 8PASS CSS Transitions: property <object-position> from neutral to [left top] at (1.25) should be [-12.5% -12.5%]
 9PASS CSS Transitions with transition: all: property <object-position> from neutral to [left top] at (-0.25) should be [62.5% 62.5%]
 10PASS CSS Transitions with transition: all: property <object-position> from neutral to [left top] at (0) should be [50% 50%]
 11PASS CSS Transitions with transition: all: property <object-position> from neutral to [left top] at (0.25) should be [37.5% 37.5%]
 12PASS CSS Transitions with transition: all: property <object-position> from neutral to [left top] at (0.5) should be [25% 25%]
 13PASS CSS Transitions with transition: all: property <object-position> from neutral to [left top] at (0.75) should be [12.5% 12.5%]
 14PASS CSS Transitions with transition: all: property <object-position> from neutral to [left top] at (1) should be [0% 0%]
 15PASS CSS Transitions with transition: all: property <object-position> from neutral to [left top] at (1.25) should be [-12.5% -12.5%]
 16PASS CSS Animations: property <object-position> from neutral to [left top] at (-0.25) should be [62.5% 62.5%]
 17PASS CSS Animations: property <object-position> from neutral to [left top] at (0) should be [50% 50%]
 18PASS CSS Animations: property <object-position> from neutral to [left top] at (0.25) should be [37.5% 37.5%]
 19PASS CSS Animations: property <object-position> from neutral to [left top] at (0.5) should be [25% 25%]
 20PASS CSS Animations: property <object-position> from neutral to [left top] at (0.75) should be [12.5% 12.5%]
 21PASS CSS Animations: property <object-position> from neutral to [left top] at (1) should be [0% 0%]
 22PASS CSS Animations: property <object-position> from neutral to [left top] at (1.25) should be [-12.5% -12.5%]
 23PASS Web Animations: property <object-position> from neutral to [left top] at (-0.25) should be [62.5% 62.5%]
 24PASS Web Animations: property <object-position> from neutral to [left top] at (0) should be [50% 50%]
 25PASS Web Animations: property <object-position> from neutral to [left top] at (0.25) should be [37.5% 37.5%]
 26PASS Web Animations: property <object-position> from neutral to [left top] at (0.5) should be [25% 25%]
 27PASS Web Animations: property <object-position> from neutral to [left top] at (0.75) should be [12.5% 12.5%]
 28PASS Web Animations: property <object-position> from neutral to [left top] at (1) should be [0% 0%]
 29PASS Web Animations: property <object-position> from neutral to [left top] at (1.25) should be [-12.5% -12.5%]
 30PASS CSS Transitions: property <object-position> from [initial] to [center top] at (-0.25) should be [50% 62.5%]
 31PASS CSS Transitions: property <object-position> from [initial] to [center top] at (0) should be [50% 50%]
 32PASS CSS Transitions: property <object-position> from [initial] to [center top] at (0.25) should be [50% 37.5%]
 33PASS CSS Transitions: property <object-position> from [initial] to [center top] at (0.5) should be [50% 25%]
 34PASS CSS Transitions: property <object-position> from [initial] to [center top] at (0.75) should be [50% 12.5%]
 35PASS CSS Transitions: property <object-position> from [initial] to [center top] at (1) should be [50% 0%]
 36PASS CSS Transitions: property <object-position> from [initial] to [center top] at (1.25) should be [50% -12.5%]
 37PASS CSS Transitions with transition: all: property <object-position> from [initial] to [center top] at (-0.25) should be [50% 62.5%]
 38PASS CSS Transitions with transition: all: property <object-position> from [initial] to [center top] at (0) should be [50% 50%]
 39PASS CSS Transitions with transition: all: property <object-position> from [initial] to [center top] at (0.25) should be [50% 37.5%]
 40PASS CSS Transitions with transition: all: property <object-position> from [initial] to [center top] at (0.5) should be [50% 25%]
 41PASS CSS Transitions with transition: all: property <object-position> from [initial] to [center top] at (0.75) should be [50% 12.5%]
 42PASS CSS Transitions with transition: all: property <object-position> from [initial] to [center top] at (1) should be [50% 0%]
 43PASS CSS Transitions with transition: all: property <object-position> from [initial] to [center top] at (1.25) should be [50% -12.5%]
 44PASS CSS Animations: property <object-position> from [initial] to [center top] at (-0.25) should be [50% 62.5%]
 45PASS CSS Animations: property <object-position> from [initial] to [center top] at (0) should be [50% 50%]
 46PASS CSS Animations: property <object-position> from [initial] to [center top] at (0.25) should be [50% 37.5%]
 47PASS CSS Animations: property <object-position> from [initial] to [center top] at (0.5) should be [50% 25%]
 48PASS CSS Animations: property <object-position> from [initial] to [center top] at (0.75) should be [50% 12.5%]
 49PASS CSS Animations: property <object-position> from [initial] to [center top] at (1) should be [50% 0%]
 50PASS CSS Animations: property <object-position> from [initial] to [center top] at (1.25) should be [50% -12.5%]
 51PASS Web Animations: property <object-position> from [initial] to [center top] at (-0.25) should be [50% 62.5%]
 52PASS Web Animations: property <object-position> from [initial] to [center top] at (0) should be [50% 50%]
 53PASS Web Animations: property <object-position> from [initial] to [center top] at (0.25) should be [50% 37.5%]
 54PASS Web Animations: property <object-position> from [initial] to [center top] at (0.5) should be [50% 25%]
 55PASS Web Animations: property <object-position> from [initial] to [center top] at (0.75) should be [50% 12.5%]
 56PASS Web Animations: property <object-position> from [initial] to [center top] at (1) should be [50% 0%]
 57PASS Web Animations: property <object-position> from [initial] to [center top] at (1.25) should be [50% -12.5%]
 58PASS CSS Transitions: property <object-position> from [initial] to [left center] at (-0.25) should be [62.5% 50%]
 59PASS CSS Transitions: property <object-position> from [initial] to [left center] at (0) should be [50% 50%]
 60PASS CSS Transitions: property <object-position> from [initial] to [left center] at (0.25) should be [37.5% 50%]
 61PASS CSS Transitions: property <object-position> from [initial] to [left center] at (0.5) should be [25% 50%]
 62PASS CSS Transitions: property <object-position> from [initial] to [left center] at (0.75) should be [12.5% 50%]
 63PASS CSS Transitions: property <object-position> from [initial] to [left center] at (1) should be [0% 50%]
 64PASS CSS Transitions: property <object-position> from [initial] to [left center] at (1.25) should be [-12.5% 50%]
 65PASS CSS Transitions with transition: all: property <object-position> from [initial] to [left center] at (-0.25) should be [62.5% 50%]
 66PASS CSS Transitions with transition: all: property <object-position> from [initial] to [left center] at (0) should be [50% 50%]
 67PASS CSS Transitions with transition: all: property <object-position> from [initial] to [left center] at (0.25) should be [37.5% 50%]
 68PASS CSS Transitions with transition: all: property <object-position> from [initial] to [left center] at (0.5) should be [25% 50%]
 69PASS CSS Transitions with transition: all: property <object-position> from [initial] to [left center] at (0.75) should be [12.5% 50%]
 70PASS CSS Transitions with transition: all: property <object-position> from [initial] to [left center] at (1) should be [0% 50%]
 71PASS CSS Transitions with transition: all: property <object-position> from [initial] to [left center] at (1.25) should be [-12.5% 50%]
 72PASS CSS Animations: property <object-position> from [initial] to [left center] at (-0.25) should be [62.5% 50%]
 73PASS CSS Animations: property <object-position> from [initial] to [left center] at (0) should be [50% 50%]
 74PASS CSS Animations: property <object-position> from [initial] to [left center] at (0.25) should be [37.5% 50%]
 75PASS CSS Animations: property <object-position> from [initial] to [left center] at (0.5) should be [25% 50%]
 76PASS CSS Animations: property <object-position> from [initial] to [left center] at (0.75) should be [12.5% 50%]
 77PASS CSS Animations: property <object-position> from [initial] to [left center] at (1) should be [0% 50%]
 78PASS CSS Animations: property <object-position> from [initial] to [left center] at (1.25) should be [-12.5% 50%]
 79PASS Web Animations: property <object-position> from [initial] to [left center] at (-0.25) should be [62.5% 50%]
 80PASS Web Animations: property <object-position> from [initial] to [left center] at (0) should be [50% 50%]
 81PASS Web Animations: property <object-position> from [initial] to [left center] at (0.25) should be [37.5% 50%]
 82PASS Web Animations: property <object-position> from [initial] to [left center] at (0.5) should be [25% 50%]
 83PASS Web Animations: property <object-position> from [initial] to [left center] at (0.75) should be [12.5% 50%]
 84PASS Web Animations: property <object-position> from [initial] to [left center] at (1) should be [0% 50%]
 85PASS Web Animations: property <object-position> from [initial] to [left center] at (1.25) should be [-12.5% 50%]
 86PASS CSS Transitions: property <object-position> from [20px 20px] to [100px 100px] at (-0.25) should be [0px 0px]
 87PASS CSS Transitions: property <object-position> from [20px 20px] to [100px 100px] at (0) should be [20px 20px]
 88PASS CSS Transitions: property <object-position> from [20px 20px] to [100px 100px] at (0.25) should be [40px 40px]
 89PASS CSS Transitions: property <object-position> from [20px 20px] to [100px 100px] at (0.5) should be [60px 60px]
 90PASS CSS Transitions: property <object-position> from [20px 20px] to [100px 100px] at (0.75) should be [80px 80px]
 91PASS CSS Transitions: property <object-position> from [20px 20px] to [100px 100px] at (1) should be [100px 100px]
 92PASS CSS Transitions: property <object-position> from [20px 20px] to [100px 100px] at (1.25) should be [120px 120px]
 93PASS CSS Transitions with transition: all: property <object-position> from [20px 20px] to [100px 100px] at (-0.25) should be [0px 0px]
 94PASS CSS Transitions with transition: all: property <object-position> from [20px 20px] to [100px 100px] at (0) should be [20px 20px]
 95PASS CSS Transitions with transition: all: property <object-position> from [20px 20px] to [100px 100px] at (0.25) should be [40px 40px]
 96PASS CSS Transitions with transition: all: property <object-position> from [20px 20px] to [100px 100px] at (0.5) should be [60px 60px]
 97PASS CSS Transitions with transition: all: property <object-position> from [20px 20px] to [100px 100px] at (0.75) should be [80px 80px]
 98PASS CSS Transitions with transition: all: property <object-position> from [20px 20px] to [100px 100px] at (1) should be [100px 100px]
 99PASS CSS Transitions with transition: all: property <object-position> from [20px 20px] to [100px 100px] at (1.25) should be [120px 120px]
 100PASS CSS Animations: property <object-position> from [20px 20px] to [100px 100px] at (-0.25) should be [0px 0px]
 101PASS CSS Animations: property <object-position> from [20px 20px] to [100px 100px] at (0) should be [20px 20px]
 102PASS CSS Animations: property <object-position> from [20px 20px] to [100px 100px] at (0.25) should be [40px 40px]
 103PASS CSS Animations: property <object-position> from [20px 20px] to [100px 100px] at (0.5) should be [60px 60px]
 104PASS CSS Animations: property <object-position> from [20px 20px] to [100px 100px] at (0.75) should be [80px 80px]
 105PASS CSS Animations: property <object-position> from [20px 20px] to [100px 100px] at (1) should be [100px 100px]
 106PASS CSS Animations: property <object-position> from [20px 20px] to [100px 100px] at (1.25) should be [120px 120px]
 107PASS Web Animations: property <object-position> from [20px 20px] to [100px 100px] at (-0.25) should be [0px 0px]
 108PASS Web Animations: property <object-position> from [20px 20px] to [100px 100px] at (0) should be [20px 20px]
 109PASS Web Animations: property <object-position> from [20px 20px] to [100px 100px] at (0.25) should be [40px 40px]
 110PASS Web Animations: property <object-position> from [20px 20px] to [100px 100px] at (0.5) should be [60px 60px]
 111PASS Web Animations: property <object-position> from [20px 20px] to [100px 100px] at (0.75) should be [80px 80px]
 112PASS Web Animations: property <object-position> from [20px 20px] to [100px 100px] at (1) should be [100px 100px]
 113PASS Web Animations: property <object-position> from [20px 20px] to [100px 100px] at (1.25) should be [120px 120px]
 114

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>