[webkit-changes] [275015] trunk

Thu, 25 Mar 2021 05:22:31 -0700

Title: [275015] trunk
Revision
275015
Author
[email protected]
Date
2021-03-25 05:22:22 -0700 (Thu, 25 Mar 2021)

Log Message

Improve interpolation of the shape-outside CSS property
https://bugs.webkit.org/show_bug.cgi?id=223738

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

Add another 29 PASS results for shape-outside interpolation.

* web-platform-tests/css/css-shapes/animation/shape-outside-composition-expected.txt:
* web-platform-tests/css/css-shapes/animation/shape-outside-interpolation-expected.txt:
* web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt:

Source/WebCore:

While we had logic to deal with cases where ShapeValue objects could not be interpolated, we did not make
use of it in the animation wrapper. We now move this logic from the blendFunc() to the canInterpolate()
override method on the wrapper to correctly interpolate only when possible.

* animation/CSSPropertyAnimation.cpp:
(WebCore::blendFunc):

Modified Paths

Diff

Modified: trunk/LayoutTests/imported/w3c/ChangeLog (275014 => 275015)


--- trunk/LayoutTests/imported/w3c/ChangeLog	2021-03-25 12:10:54 UTC (rev 275014)
+++ trunk/LayoutTests/imported/w3c/ChangeLog	2021-03-25 12:22:22 UTC (rev 275015)
@@ -1,3 +1,16 @@
+2021-03-25  Antoine Quint  <[email protected]>
+
+        Improve interpolation of the shape-outside CSS property
+        https://bugs.webkit.org/show_bug.cgi?id=223738
+
+        Reviewed by Antti Koivisto.
+
+        Add another 29 PASS results for shape-outside interpolation.
+
+        * web-platform-tests/css/css-shapes/animation/shape-outside-composition-expected.txt:
+        * web-platform-tests/css/css-shapes/animation/shape-outside-interpolation-expected.txt:
+        * web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt:
+
 2021-03-24  Antoine Quint  <[email protected]>
 
         Fix interpolation of the border-spacing property

Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/animation/shape-outside-composition-expected.txt (275014 => 275015)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/animation/shape-outside-composition-expected.txt	2021-03-25 12:10:54 UTC (rev 275014)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/animation/shape-outside-composition-expected.txt	2021-03-25 12:22:22 UTC (rev 275015)
@@ -11,9 +11,9 @@
 FAIL Compositing: property <shape-outside> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (0.6) should be [circle(calc(60px + 30%) at 118px 118%)] assert_equals: expected "circle ( calc ( 30 % + 60px ) at 118px 118 % ) " but got "circle ( calc ( ( 50px * 0.4 ) + ( 50 % * 0.6 ) ) at 110px 110 % ) "
 PASS Compositing: property <shape-outside> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (1) should be [circle(50% at 150px 150%)]
 FAIL Compositing: property <shape-outside> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (1.5) should be [circle(calc(-75px + 75%) at 190px 190%)] assert_equals: expected "circle ( calc ( 75 % - 75px ) at 190px 190 % ) " but got "circle ( calc ( ( 50px * - 0.5 ) + ( 50 % * 1.5 ) ) at 200px 200 % ) "
-FAIL Compositing: property <shape-outside> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.25) should be [circle(farthest-side at 25px 75%)] assert_equals: expected "circle ( farthest - side at 25px 75 % ) " but got "circle ( farthest - side at 50px 50 % ) "
+PASS Compositing: property <shape-outside> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.25) should be [circle(farthest-side at 25px 75%)]
 PASS Compositing: property <shape-outside> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.75) should be [circle(farthest-side at 50px 50%)]
-FAIL Compositing: property <shape-outside> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.25) should be [circle(100px at 20px 40px)] assert_equals: expected "circle ( 100px at 20px 40px ) " but got "circle ( farthest - side at 30px 40px ) "
+FAIL Compositing: property <shape-outside> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.25) should be [circle(100px at 20px 40px)] assert_equals: expected "circle ( 100px at 20px 40px ) " but got "circle ( 50px at 10px 20px ) "
 PASS Compositing: property <shape-outside> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.75) should be [circle(farthest-side at 30px 40px)]
 FAIL Compositing: property <shape-outside> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (-0.3) should be [ellipse(20px 20px at 20px 20px)] assert_equals: expected "ellipse ( 20px 20px at 20px 20px ) " but got "ellipse ( 10px 0px at - 10px - 20px ) "
 FAIL Compositing: property <shape-outside> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (0) should be [ellipse(50px 50px at 50px 50px)] assert_equals: expected "ellipse ( 50px 50px at 50px 50px ) " but got "ellipse ( 40px 30px at 20px 10px ) "
@@ -27,7 +27,7 @@
 FAIL Compositing: property <shape-outside> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (0.6) should be [ellipse(46px 42px at 38px 34px)] assert_equals: expected "ellipse ( 46px 42px at 38px 34px ) " but got "ellipse ( 40px 30px at 20px 10px ) "
 FAIL Compositing: property <shape-outside> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (1) should be [ellipse(50px 50px at 50px 50px)] assert_equals: expected "ellipse ( 50px 50px at 50px 50px ) " but got "ellipse ( 40px 30px at 20px 10px ) "
 FAIL Compositing: property <shape-outside> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (1.5) should be [ellipse(55px 60px at 65px 70px)] assert_equals: expected "ellipse ( 55px 60px at 65px 70px ) " but got "ellipse ( 40px 30px at 20px 10px ) "
-FAIL Compositing: property <shape-outside> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.25) should be [ellipse(at 50% 50%)] assert_equals: expected "ellipse ( at 50 % 50 % ) " but got "ellipse ( closest - side farthest - side at 50 % 50 % ) "
+PASS Compositing: property <shape-outside> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.25) should be [ellipse(at 50% 50%)]
 PASS Compositing: property <shape-outside> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.75) should be [ellipse(closest-side farthest-side at 50% 50%)]
 FAIL Compositing: property <shape-outside> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (-0.3) should be [inset(calc(46px + -12%))] assert_equals: expected "inset ( calc ( - 12 % + 46px ) ) " but got "inset ( calc ( ( 20px * 1.3 ) + ( 40 % * - 0.3 ) ) ) "
 FAIL Compositing: property <shape-outside> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (0) should be [inset(calc(40px + 0%))] assert_equals: expected "inset ( calc ( 0 % + 40px ) ) " but got "inset ( 20px ) "
@@ -59,8 +59,8 @@
 FAIL Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (0.6) should be [polygon(evenodd, 80px 100px)] assert_equals: expected "polygon ( evenodd , 80px 100px ) " but got "polygon ( evenodd , 70px 80px ) "
 FAIL Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (1) should be [polygon(evenodd, 120px 140px)] assert_equals: expected "polygon ( evenodd , 120px 140px ) " but got "polygon ( evenodd , 110px 120px ) "
 FAIL Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (1.5) should be [polygon(evenodd, 170px 190px)] assert_equals: expected "polygon ( evenodd , 170px 190px ) " but got "polygon ( evenodd , 160px 170px ) "
-FAIL Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.25) should be [polygon(evenodd, 20px 40px)] assert_equals: expected "polygon ( evenodd , 20px 40px ) " but got "polygon ( 30px 40px ) "
+FAIL Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.25) should be [polygon(evenodd, 20px 40px)] assert_equals: expected "polygon ( evenodd , 20px 40px ) " but got "polygon ( evenodd , 10px 20px ) "
 PASS Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.75) should be [polygon(30px 40px)]
-FAIL Compositing: property <shape-outside> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.25) should be [polygon(20px 40px, 60px 80px)] assert_equals: expected "polygon ( 20px 40px , 60px 80px ) " but got "polygon ( 30px 40px ) "
+FAIL Compositing: property <shape-outside> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.25) should be [polygon(20px 40px, 60px 80px)] assert_equals: expected "polygon ( 20px 40px , 60px 80px ) " but got "polygon ( 10px 20px , 30px 40px ) "
 PASS Compositing: property <shape-outside> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.75) should be [polygon(30px 40px)]

Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/animation/shape-outside-interpolation-expected.txt (275014 => 275015)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/animation/shape-outside-interpolation-expected.txt	2021-03-25 12:10:54 UTC (rev 275014)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/animation/shape-outside-interpolation-expected.txt	2021-03-25 12:22:22 UTC (rev 275015)
@@ -37,16 +37,16 @@
 PASS CSS Transitions with transition: all: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS CSS Transitions with transition: all: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
 PASS CSS Transitions with transition: all: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
-FAIL CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
-FAIL CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
-FAIL CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
+PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial]
+PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial]
+PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial]
 PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
-FAIL Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
-FAIL Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
-FAIL Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
+PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial]
+PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial]
+PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial]
 PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
 PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
@@ -89,16 +89,16 @@
 PASS CSS Transitions with transition: all: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS CSS Transitions with transition: all: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
 PASS CSS Transitions with transition: all: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
-FAIL CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
-FAIL CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
-FAIL CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
+PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset]
+PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset]
+PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset]
 PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
-FAIL Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
-FAIL Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
-FAIL Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
+PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset]
+PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset]
+PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset]
 PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
 PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
@@ -189,16 +189,16 @@
 PASS CSS Transitions with transition: all: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.6) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
 PASS CSS Transitions with transition: all: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (1) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
 PASS CSS Transitions with transition: all: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (1.5) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
-FAIL CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (-0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
-FAIL CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
-FAIL CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
+PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (-0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
+PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
+PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
 PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.5) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
 PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.6) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
 PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (1) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
 PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (1.5) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
-FAIL Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (-0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
-FAIL Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
-FAIL Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
+PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (-0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
+PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
+PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
 PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.5) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
 PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.6) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
 PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (1) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
@@ -241,16 +241,16 @@
 PASS CSS Transitions with transition: all: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Transitions with transition: all: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Transitions with transition: all: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (1.5) should be [ellipse(100% 100% at 0% 0%)]
-FAIL CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
-FAIL CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
-FAIL CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
+PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none]
+PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none]
+PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none]
 PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.5) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (1.5) should be [ellipse(100% 100% at 0% 0%)]
-FAIL Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
-FAIL Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
-FAIL Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
+PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none]
+PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none]
+PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none]
 PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.5) should be [ellipse(100% 100% at 0% 0%)]
 PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]
 PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]

Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt (275014 => 275015)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt	2021-03-25 12:10:54 UTC (rev 275014)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt	2021-03-25 12:22:22 UTC (rev 275015)
@@ -113,9 +113,9 @@
 PASS resize uses discrete animation when animating between "both" and "horizontal" with effect easing
 PASS resize uses discrete animation when animating between "both" and "horizontal" with keyframe easing
 PASS shape-outside (type: discrete) has testInterpolation function
-FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with linear easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
-FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with effect easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
-FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with keyframe easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
+PASS shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with linear easing
+PASS shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with effect easing
+PASS shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with keyframe easing
 PASS stop-color (type: color) has testInterpolation function
 PASS stop-color supports animating as color of rgb()
 PASS stop-color supports animating as color of #RGB

Modified: trunk/Source/WebCore/ChangeLog (275014 => 275015)


--- trunk/Source/WebCore/ChangeLog	2021-03-25 12:10:54 UTC (rev 275014)
+++ trunk/Source/WebCore/ChangeLog	2021-03-25 12:22:22 UTC (rev 275015)
@@ -1,3 +1,17 @@
+2021-03-25  Antoine Quint  <[email protected]>
+
+        Improve interpolation of the shape-outside CSS property
+        https://bugs.webkit.org/show_bug.cgi?id=223738
+
+        Reviewed by Antti Koivisto.
+
+        While we had logic to deal with cases where ShapeValue objects could not be interpolated, we did not make
+        use of it in the animation wrapper. We now move this logic from the blendFunc() to the canInterpolate()
+        override method on the wrapper to correctly interpolate only when possible.
+
+        * animation/CSSPropertyAnimation.cpp:
+        (WebCore::blendFunc):
+
 2021-03-25  Tim Horton  <[email protected]>
 
         All Books quirks are flakily not applied in modern WebKit

Modified: trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp (275014 => 275015)


--- trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp	2021-03-25 12:10:54 UTC (rev 275014)
+++ trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp	2021-03-25 12:22:22 UTC (rev 275015)
@@ -273,21 +273,15 @@
 
 static inline RefPtr<ShapeValue> blendFunc(const CSSPropertyBlendingClient*, ShapeValue* from, ShapeValue* to, double progress)
 {
-    if (!from || !to)
-        return to;
+    if (!progress)
+        return from;
 
-    if (from->type() != ShapeValue::Type::Shape || to->type() != ShapeValue::Type::Shape)
+    if (progress == 1.0)
         return to;
 
-    if (from->cssBox() != to->cssBox())
-        return to;
-
+    ASSERT(from && to);
     const BasicShape& fromShape = *from->shape();
     const BasicShape& toShape = *to->shape();
-
-    if (!fromShape.canBlend(toShape))
-        return to;
-
     return ShapeValue::create(toShape.blend(fromShape, progress), to->cssBox());
 }
 
@@ -925,6 +919,23 @@
             return false;
         return *shapeA == *shapeB;
     }
+
+    bool canInterpolate(const RenderStyle* from, const RenderStyle* to) const final
+    {
+        auto* fromShape = value(from);
+        auto* toShape = value(to);
+
+        if (!fromShape || !toShape)
+            return false;
+
+        if (fromShape->type() != ShapeValue::Type::Shape || toShape->type() != ShapeValue::Type::Shape)
+            return false;
+
+        if (fromShape->cssBox() != toShape->cssBox())
+            return false;
+
+        return fromShape->shape()->canBlend(*toShape->shape());
+    }
 };
 
 class StyleImagePropertyWrapper final : public RefCountedPropertyWrapper<StyleImage> {

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to