Title: [284961] trunk
Revision
284961
Author
[email protected]
Date
2021-10-27 15:06:51 -0700 (Wed, 27 Oct 2021)

Log Message

Add discrete animation support between PathOperations
https://bugs.webkit.org/show_bug.cgi?id=232366

Patch by Kiet Ho <[email protected]> on 2021-10-27
Reviewed by Simon Fraser.

LayoutTests/imported/w3c:

Updated relevant test expectations.

* web-platform-tests/css/css-masking/animations/clip-path-composition-expected.txt:
* web-platform-tests/css/css-masking/animations/clip-path-interpolation-001-expected.txt:
* web-platform-tests/css/css-masking/animations/clip-path-interpolation-002-expected.txt:

Source/WebCore:

Updated the code responsible for blending two PathOperations to account for discrete animation.
Implemented PropertyWrapperClipPath::canInterpolate, used to determine if a CSS transition is possible
(if animation between two PathOperations is discrete, then canInterpolate() is false, and no transitions
are created).

Tests: imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-composition.html
       imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-interpolation-001.html
       imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-interpolation-002.html

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

Modified Paths

Diff

Modified: trunk/LayoutTests/imported/w3c/ChangeLog (284960 => 284961)


--- trunk/LayoutTests/imported/w3c/ChangeLog	2021-10-27 21:43:30 UTC (rev 284960)
+++ trunk/LayoutTests/imported/w3c/ChangeLog	2021-10-27 22:06:51 UTC (rev 284961)
@@ -1,3 +1,16 @@
+2021-10-27  Kiet Ho  <[email protected]>
+
+        Add discrete animation support between PathOperations
+        https://bugs.webkit.org/show_bug.cgi?id=232366
+
+        Reviewed by Simon Fraser.
+
+        Updated relevant test expectations.
+
+        * web-platform-tests/css/css-masking/animations/clip-path-composition-expected.txt:
+        * web-platform-tests/css/css-masking/animations/clip-path-interpolation-001-expected.txt:
+        * web-platform-tests/css/css-masking/animations/clip-path-interpolation-002-expected.txt:
+
 2021-10-27  Chris Dumez  <[email protected]>
 
         autofocus IDL attribute should be exposed on all HTML or SVG elements

Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-composition-expected.txt (284960 => 284961)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-composition-expected.txt	2021-10-27 21:43:30 UTC (rev 284960)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-composition-expected.txt	2021-10-27 22:06:51 UTC (rev 284961)
@@ -11,9 +11,9 @@
 FAIL Compositing: property <clip-path> 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 ( 30 % + 20px ) at 110px 110 % ) "
 PASS Compositing: property <clip-path> 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 <clip-path> 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 ( 75 % - 25px ) at 200px 200 % ) "
-FAIL Compositing: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 ( - 12 % + 26px ) ) "
 FAIL Compositing: property <clip-path> 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 ( calc ( 0 % + 20px ) ) "
@@ -59,8 +59,8 @@
 FAIL Compositing: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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-masking/animations/clip-path-interpolation-001-expected.txt (284960 => 284961)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-interpolation-001-expected.txt	2021-10-27 21:43:30 UTC (rev 284960)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-interpolation-001-expected.txt	2021-10-27 22:06:51 UTC (rev 284961)
@@ -37,16 +37,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> 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 <clip-path> from [initial] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
 PASS CSS Transitions with transition: all: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
-FAIL CSS Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial]
+PASS CSS Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial]
+PASS CSS Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial]
 PASS CSS Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
-FAIL Web Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial]
+PASS Web Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial]
+PASS Web Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial]
 PASS Web Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
 PASS Web Animations: property <clip-path> from [initial] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS Web Animations: property <clip-path> 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 <clip-path> 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 <clip-path> from [unset] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
 PASS CSS Transitions with transition: all: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
-FAIL CSS Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset]
+PASS CSS Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset]
+PASS CSS Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset]
 PASS CSS Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
 PASS CSS Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
-FAIL Web Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset]
+PASS Web Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset]
+PASS Web Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset]
 PASS Web Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
 PASS Web Animations: property <clip-path> from [unset] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
 PASS Web Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (1.5) should be [ellipse(100% 100% at 0% 0%)]
-FAIL CSS Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none]
+PASS CSS Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none]
+PASS CSS Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none]
 PASS CSS Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.5) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (1.5) should be [ellipse(100% 100% at 0% 0%)]
-FAIL Web Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none]
+PASS Web Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none]
+PASS Web Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none]
 PASS Web Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.5) should be [ellipse(100% 100% at 0% 0%)]
 PASS Web Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]
 PASS Web Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]
@@ -281,16 +281,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [url("/clip-source")] 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 <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Transitions with transition: all: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (1.5) should be [ellipse(100% 100% at 0% 0%)]
-FAIL CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [url(http://localhost:8800/.../clip-source)] assert_equals: expected "url ( http : / / localhost : 8800 / ... / clip - source ) " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
-FAIL CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0) should be [url(http://localhost:8800/.../clip-source)] assert_equals: expected "url ( http : / / localhost : 8800 / ... / clip - source ) " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
-FAIL CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [url(http://localhost:8800/.../clip-source)] assert_equals: expected "url ( http : / / localhost : 8800 / ... / clip - source ) " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
+PASS CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [url(http://localhost:8800/.../clip-source)]
+PASS CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0) should be [url(http://localhost:8800/.../clip-source)]
+PASS CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [url(http://localhost:8800/.../clip-source)]
 PASS CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0.5) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]
 PASS CSS Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (1.5) should be [ellipse(100% 100% at 0% 0%)]
-FAIL Web Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [url(http://localhost:8800/.../clip-source)] assert_equals: expected "url ( http : / / localhost : 8800 / ... / clip - source ) " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
-FAIL Web Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0) should be [url(http://localhost:8800/.../clip-source)] assert_equals: expected "url ( http : / / localhost : 8800 / ... / clip - source ) " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
-FAIL Web Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [url(http://localhost:8800/.../clip-source)] assert_equals: expected "url ( http : / / localhost : 8800 / ... / clip - source ) " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
+PASS Web Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [url(http://localhost:8800/.../clip-source)]
+PASS Web Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0) should be [url(http://localhost:8800/.../clip-source)]
+PASS Web Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [url(http://localhost:8800/.../clip-source)]
 PASS Web Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0.5) should be [ellipse(100% 100% at 0% 0%)]
 PASS Web Animations: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]
 PASS Web Animations: property <clip-path> from [url("/clip-source")] 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/css/css-masking/animations/clip-path-interpolation-002-expected.txt (284960 => 284961)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-interpolation-002-expected.txt	2021-10-27 21:43:30 UTC (rev 284960)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-interpolation-002-expected.txt	2021-10-27 22:06:51 UTC (rev 284961)
@@ -37,16 +37,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [initial] to [inset(20px)] at (0.6) should be [inset(20px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [initial] to [inset(20px)] at (1) should be [inset(20px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [initial] to [inset(20px)] at (1.5) should be [inset(20px)]
-FAIL CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (-0.3) should be [initial] assert_equals: expected "none " but got "inset ( 20px ) "
-FAIL CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (0) should be [initial] assert_equals: expected "none " but got "inset ( 20px ) "
-FAIL CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (0.3) should be [initial] assert_equals: expected "none " but got "inset ( 20px ) "
+PASS CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (-0.3) should be [initial]
+PASS CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (0) should be [initial]
+PASS CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (0.3) should be [initial]
 PASS CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (0.5) should be [inset(20px)]
 PASS CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (0.6) should be [inset(20px)]
 PASS CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (1) should be [inset(20px)]
 PASS CSS Animations: property <clip-path> from [initial] to [inset(20px)] at (1.5) should be [inset(20px)]
-FAIL Web Animations: property <clip-path> from [initial] to [inset(20px)] at (-0.3) should be [initial] assert_equals: expected "none " but got "inset ( 20px ) "
-FAIL Web Animations: property <clip-path> from [initial] to [inset(20px)] at (0) should be [initial] assert_equals: expected "none " but got "inset ( 20px ) "
-FAIL Web Animations: property <clip-path> from [initial] to [inset(20px)] at (0.3) should be [initial] assert_equals: expected "none " but got "inset ( 20px ) "
+PASS Web Animations: property <clip-path> from [initial] to [inset(20px)] at (-0.3) should be [initial]
+PASS Web Animations: property <clip-path> from [initial] to [inset(20px)] at (0) should be [initial]
+PASS Web Animations: property <clip-path> from [initial] to [inset(20px)] at (0.3) should be [initial]
 PASS Web Animations: property <clip-path> from [initial] to [inset(20px)] at (0.5) should be [inset(20px)]
 PASS Web Animations: property <clip-path> from [initial] to [inset(20px)] at (0.6) should be [inset(20px)]
 PASS Web Animations: property <clip-path> from [initial] to [inset(20px)] at (1) should be [inset(20px)]
@@ -89,16 +89,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [unset] to [inset(20px)] at (0.6) should be [inset(20px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [unset] to [inset(20px)] at (1) should be [inset(20px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [unset] to [inset(20px)] at (1.5) should be [inset(20px)]
-FAIL CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (-0.3) should be [unset] assert_equals: expected "none " but got "inset ( 20px ) "
-FAIL CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (0) should be [unset] assert_equals: expected "none " but got "inset ( 20px ) "
-FAIL CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (0.3) should be [unset] assert_equals: expected "none " but got "inset ( 20px ) "
+PASS CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (-0.3) should be [unset]
+PASS CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (0) should be [unset]
+PASS CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (0.3) should be [unset]
 PASS CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (0.5) should be [inset(20px)]
 PASS CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (0.6) should be [inset(20px)]
 PASS CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (1) should be [inset(20px)]
 PASS CSS Animations: property <clip-path> from [unset] to [inset(20px)] at (1.5) should be [inset(20px)]
-FAIL Web Animations: property <clip-path> from [unset] to [inset(20px)] at (-0.3) should be [unset] assert_equals: expected "none " but got "inset ( 20px ) "
-FAIL Web Animations: property <clip-path> from [unset] to [inset(20px)] at (0) should be [unset] assert_equals: expected "none " but got "inset ( 20px ) "
-FAIL Web Animations: property <clip-path> from [unset] to [inset(20px)] at (0.3) should be [unset] assert_equals: expected "none " but got "inset ( 20px ) "
+PASS Web Animations: property <clip-path> from [unset] to [inset(20px)] at (-0.3) should be [unset]
+PASS Web Animations: property <clip-path> from [unset] to [inset(20px)] at (0) should be [unset]
+PASS Web Animations: property <clip-path> from [unset] to [inset(20px)] at (0.3) should be [unset]
 PASS Web Animations: property <clip-path> from [unset] to [inset(20px)] at (0.5) should be [inset(20px)]
 PASS Web Animations: property <clip-path> from [unset] to [inset(20px)] at (0.6) should be [inset(20px)]
 PASS Web Animations: property <clip-path> from [unset] to [inset(20px)] at (1) should be [inset(20px)]
@@ -117,16 +117,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0.6) should be [circle(3px at 1px 2px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (1) should be [circle(3px at 1px 2px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (1.5) should be [circle(3px at 1px 2px)]
-FAIL CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (-0.3) should be [none] assert_equals: expected "none " but got "circle ( 3px at 1px 2px ) "
-FAIL CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0) should be [none] assert_equals: expected "none " but got "circle ( 3px at 1px 2px ) "
-FAIL CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0.3) should be [none] assert_equals: expected "none " but got "circle ( 3px at 1px 2px ) "
+PASS CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (-0.3) should be [none]
+PASS CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0) should be [none]
+PASS CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0.3) should be [none]
 PASS CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0.5) should be [circle(3px at 1px 2px)]
 PASS CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0.6) should be [circle(3px at 1px 2px)]
 PASS CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (1) should be [circle(3px at 1px 2px)]
 PASS CSS Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (1.5) should be [circle(3px at 1px 2px)]
-FAIL Web Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (-0.3) should be [none] assert_equals: expected "none " but got "circle ( 3px at 1px 2px ) "
-FAIL Web Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0) should be [none] assert_equals: expected "none " but got "circle ( 3px at 1px 2px ) "
-FAIL Web Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0.3) should be [none] assert_equals: expected "none " but got "circle ( 3px at 1px 2px ) "
+PASS Web Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (-0.3) should be [none]
+PASS Web Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0) should be [none]
+PASS Web Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0.3) should be [none]
 PASS Web Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0.5) should be [circle(3px at 1px 2px)]
 PASS Web Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (0.6) should be [circle(3px at 1px 2px)]
 PASS Web Animations: property <clip-path> from [none] to [circle(3px at 1px 2px)] at (1) should be [circle(3px at 1px 2px)]
@@ -169,16 +169,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0.6) should be [circle(farthest-side at 50px center)]
 PASS CSS Transitions with transition: all: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (1) should be [circle(farthest-side at 50px center)]
 PASS CSS Transitions with transition: all: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (1.5) should be [circle(farthest-side at 50px center)]
-FAIL CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (-0.3) 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 % ) "
-FAIL CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0) 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 % ) "
-FAIL CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0.3) 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 CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (-0.3) should be [circle(farthest-side at 25px 75%)]
+PASS CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0) should be [circle(farthest-side at 25px 75%)]
+PASS CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0.3) should be [circle(farthest-side at 25px 75%)]
 PASS CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0.5) should be [circle(farthest-side at 50px center)]
 PASS CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0.6) should be [circle(farthest-side at 50px center)]
 PASS CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (1) should be [circle(farthest-side at 50px center)]
 PASS CSS Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (1.5) should be [circle(farthest-side at 50px center)]
-FAIL Web Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (-0.3) 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 % ) "
-FAIL Web Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0) 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 % ) "
-FAIL Web Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0.3) 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 Web Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (-0.3) should be [circle(farthest-side at 25px 75%)]
+PASS Web Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0) should be [circle(farthest-side at 25px 75%)]
+PASS Web Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0.3) should be [circle(farthest-side at 25px 75%)]
 PASS Web Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0.5) should be [circle(farthest-side at 50px center)]
 PASS Web Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (0.6) should be [circle(farthest-side at 50px center)]
 PASS Web Animations: property <clip-path> from [circle(farthest-side at 25px 75%)] to [circle(farthest-side at 50px center)] at (1) should be [circle(farthest-side at 50px center)]
@@ -197,16 +197,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.6) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1.5) should be [circle(farthest-side at 30px 40px)]
-FAIL CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (-0.3) should be [circle(closest-side at 10px 20px)] assert_equals: expected "circle ( at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
-FAIL CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0) should be [circle(closest-side at 10px 20px)] assert_equals: expected "circle ( at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
-FAIL CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.3) should be [circle(closest-side at 10px 20px)] assert_equals: expected "circle ( at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
+PASS CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (-0.3) should be [circle(closest-side at 10px 20px)]
+PASS CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0) should be [circle(closest-side at 10px 20px)]
+PASS CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.3) should be [circle(closest-side at 10px 20px)]
 PASS CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.5) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.6) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1.5) should be [circle(farthest-side at 30px 40px)]
-FAIL Web Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (-0.3) should be [circle(closest-side at 10px 20px)] assert_equals: expected "circle ( at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
-FAIL Web Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0) should be [circle(closest-side at 10px 20px)] assert_equals: expected "circle ( at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
-FAIL Web Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.3) should be [circle(closest-side at 10px 20px)] assert_equals: expected "circle ( at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
+PASS Web Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (-0.3) should be [circle(closest-side at 10px 20px)]
+PASS Web Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0) should be [circle(closest-side at 10px 20px)]
+PASS Web Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.3) should be [circle(closest-side at 10px 20px)]
 PASS Web Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.5) should be [circle(farthest-side at 30px 40px)]
 PASS Web Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.6) should be [circle(farthest-side at 30px 40px)]
 PASS Web Animations: property <clip-path> from [circle(closest-side at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1) should be [circle(farthest-side at 30px 40px)]
@@ -225,16 +225,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.6) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1.5) should be [circle(farthest-side at 30px 40px)]
-FAIL CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (-0.3) should be [circle(50px at 10px 20px)] assert_equals: expected "circle ( 50px at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
-FAIL CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0) should be [circle(50px at 10px 20px)] assert_equals: expected "circle ( 50px at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
-FAIL CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.3) should be [circle(50px at 10px 20px)] assert_equals: expected "circle ( 50px at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
+PASS CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (-0.3) should be [circle(50px at 10px 20px)]
+PASS CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0) should be [circle(50px at 10px 20px)]
+PASS CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.3) should be [circle(50px at 10px 20px)]
 PASS CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.5) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.6) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1) should be [circle(farthest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1.5) should be [circle(farthest-side at 30px 40px)]
-FAIL Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (-0.3) should be [circle(50px at 10px 20px)] assert_equals: expected "circle ( 50px at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
-FAIL Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0) should be [circle(50px at 10px 20px)] assert_equals: expected "circle ( 50px at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
-FAIL Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.3) should be [circle(50px at 10px 20px)] assert_equals: expected "circle ( 50px at 10px 20px ) " but got "circle ( farthest - side at 30px 40px ) "
+PASS Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (-0.3) should be [circle(50px at 10px 20px)]
+PASS Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0) should be [circle(50px at 10px 20px)]
+PASS Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.3) should be [circle(50px at 10px 20px)]
 PASS Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.5) should be [circle(farthest-side at 30px 40px)]
 PASS Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (0.6) should be [circle(farthest-side at 30px 40px)]
 PASS Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1) should be [circle(farthest-side at 30px 40px)]
@@ -277,16 +277,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.6) should be [ellipse(closest-side farthest-side at 50px center)]
 PASS CSS Transitions with transition: all: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (1) should be [ellipse(closest-side farthest-side at 50px center)]
 PASS CSS Transitions with transition: all: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (1.5) should be [ellipse(closest-side farthest-side at 50px center)]
-FAIL CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (-0.3) should be [ellipse(closest-side farthest-side at 25px 75%)] assert_equals: expected "ellipse ( closest - side farthest - side at 25px 75 % ) " but got "ellipse ( closest - side farthest - side at 50px 50 % ) "
-FAIL CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0) should be [ellipse(closest-side farthest-side at 25px 75%)] assert_equals: expected "ellipse ( closest - side farthest - side at 25px 75 % ) " but got "ellipse ( closest - side farthest - side at 50px 50 % ) "
-FAIL CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.3) should be [ellipse(closest-side farthest-side at 25px 75%)] assert_equals: expected "ellipse ( closest - side farthest - side at 25px 75 % ) " but got "ellipse ( closest - side farthest - side at 50px 50 % ) "
+PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (-0.3) should be [ellipse(closest-side farthest-side at 25px 75%)]
+PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0) should be [ellipse(closest-side farthest-side at 25px 75%)]
+PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.3) should be [ellipse(closest-side farthest-side at 25px 75%)]
 PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.5) should be [ellipse(closest-side farthest-side at 50px center)]
 PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.6) should be [ellipse(closest-side farthest-side at 50px center)]
 PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (1) should be [ellipse(closest-side farthest-side at 50px center)]
 PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (1.5) should be [ellipse(closest-side farthest-side at 50px center)]
-FAIL Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (-0.3) should be [ellipse(closest-side farthest-side at 25px 75%)] assert_equals: expected "ellipse ( closest - side farthest - side at 25px 75 % ) " but got "ellipse ( closest - side farthest - side at 50px 50 % ) "
-FAIL Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0) should be [ellipse(closest-side farthest-side at 25px 75%)] assert_equals: expected "ellipse ( closest - side farthest - side at 25px 75 % ) " but got "ellipse ( closest - side farthest - side at 50px 50 % ) "
-FAIL Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.3) should be [ellipse(closest-side farthest-side at 25px 75%)] assert_equals: expected "ellipse ( closest - side farthest - side at 25px 75 % ) " but got "ellipse ( closest - side farthest - side at 50px 50 % ) "
+PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (-0.3) should be [ellipse(closest-side farthest-side at 25px 75%)]
+PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0) should be [ellipse(closest-side farthest-side at 25px 75%)]
+PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.3) should be [ellipse(closest-side farthest-side at 25px 75%)]
 PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.5) should be [ellipse(closest-side farthest-side at 50px center)]
 PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.6) should be [ellipse(closest-side farthest-side at 50px center)]
 PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (1) should be [ellipse(closest-side farthest-side at 50px center)]
@@ -305,16 +305,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0.6) should be [ellipse(farthest-side closest-side at 30px 40px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (1) should be [ellipse(farthest-side closest-side at 30px 40px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (1.5) should be [ellipse(farthest-side closest-side at 30px 40px)]
-FAIL CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (-0.3) should be [ellipse(closest-side farthest-side at 10px 20px)] assert_equals: expected "ellipse ( closest - side farthest - side at 10px 20px ) " but got "ellipse ( farthest - side closest - side at 30px 40px ) "
-FAIL CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0) should be [ellipse(closest-side farthest-side at 10px 20px)] assert_equals: expected "ellipse ( closest - side farthest - side at 10px 20px ) " but got "ellipse ( farthest - side closest - side at 30px 40px ) "
-FAIL CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0.3) should be [ellipse(closest-side farthest-side at 10px 20px)] assert_equals: expected "ellipse ( closest - side farthest - side at 10px 20px ) " but got "ellipse ( farthest - side closest - side at 30px 40px ) "
+PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (-0.3) should be [ellipse(closest-side farthest-side at 10px 20px)]
+PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0) should be [ellipse(closest-side farthest-side at 10px 20px)]
+PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0.3) should be [ellipse(closest-side farthest-side at 10px 20px)]
 PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0.5) should be [ellipse(farthest-side closest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0.6) should be [ellipse(farthest-side closest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (1) should be [ellipse(farthest-side closest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (1.5) should be [ellipse(farthest-side closest-side at 30px 40px)]
-FAIL Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (-0.3) should be [ellipse(closest-side farthest-side at 10px 20px)] assert_equals: expected "ellipse ( closest - side farthest - side at 10px 20px ) " but got "ellipse ( farthest - side closest - side at 30px 40px ) "
-FAIL Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0) should be [ellipse(closest-side farthest-side at 10px 20px)] assert_equals: expected "ellipse ( closest - side farthest - side at 10px 20px ) " but got "ellipse ( farthest - side closest - side at 30px 40px ) "
-FAIL Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0.3) should be [ellipse(closest-side farthest-side at 10px 20px)] assert_equals: expected "ellipse ( closest - side farthest - side at 10px 20px ) " but got "ellipse ( farthest - side closest - side at 30px 40px ) "
+PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (-0.3) should be [ellipse(closest-side farthest-side at 10px 20px)]
+PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0) should be [ellipse(closest-side farthest-side at 10px 20px)]
+PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0.3) should be [ellipse(closest-side farthest-side at 10px 20px)]
 PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0.5) should be [ellipse(farthest-side closest-side at 30px 40px)]
 PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (0.6) should be [ellipse(farthest-side closest-side at 30px 40px)]
 PASS Web Animations: property <clip-path> from [ellipse(closest-side farthest-side at 10px 20px)] to [ellipse(farthest-side closest-side at 30px 40px)] at (1) should be [ellipse(farthest-side closest-side at 30px 40px)]
@@ -333,16 +333,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0.6) should be [ellipse(150px farthest-side at 30px 40px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (1) should be [ellipse(150px farthest-side at 30px 40px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (1.5) should be [ellipse(150px farthest-side at 30px 40px)]
-FAIL CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (-0.3) should be [ellipse(50px closest-side at 10px 20px)] assert_equals: expected "ellipse ( 50px closest - side at 10px 20px ) " but got "ellipse ( 150px farthest - side at 30px 40px ) "
-FAIL CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0) should be [ellipse(50px closest-side at 10px 20px)] assert_equals: expected "ellipse ( 50px closest - side at 10px 20px ) " but got "ellipse ( 150px farthest - side at 30px 40px ) "
-FAIL CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0.3) should be [ellipse(50px closest-side at 10px 20px)] assert_equals: expected "ellipse ( 50px closest - side at 10px 20px ) " but got "ellipse ( 150px farthest - side at 30px 40px ) "
+PASS CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (-0.3) should be [ellipse(50px closest-side at 10px 20px)]
+PASS CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0) should be [ellipse(50px closest-side at 10px 20px)]
+PASS CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0.3) should be [ellipse(50px closest-side at 10px 20px)]
 PASS CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0.5) should be [ellipse(150px farthest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0.6) should be [ellipse(150px farthest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (1) should be [ellipse(150px farthest-side at 30px 40px)]
 PASS CSS Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (1.5) should be [ellipse(150px farthest-side at 30px 40px)]
-FAIL Web Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (-0.3) should be [ellipse(50px closest-side at 10px 20px)] assert_equals: expected "ellipse ( 50px closest - side at 10px 20px ) " but got "ellipse ( 150px farthest - side at 30px 40px ) "
-FAIL Web Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0) should be [ellipse(50px closest-side at 10px 20px)] assert_equals: expected "ellipse ( 50px closest - side at 10px 20px ) " but got "ellipse ( 150px farthest - side at 30px 40px ) "
-FAIL Web Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0.3) should be [ellipse(50px closest-side at 10px 20px)] assert_equals: expected "ellipse ( 50px closest - side at 10px 20px ) " but got "ellipse ( 150px farthest - side at 30px 40px ) "
+PASS Web Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (-0.3) should be [ellipse(50px closest-side at 10px 20px)]
+PASS Web Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0) should be [ellipse(50px closest-side at 10px 20px)]
+PASS Web Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0.3) should be [ellipse(50px closest-side at 10px 20px)]
 PASS Web Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0.5) should be [ellipse(150px farthest-side at 30px 40px)]
 PASS Web Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (0.6) should be [ellipse(150px farthest-side at 30px 40px)]
 PASS Web Animations: property <clip-path> from [ellipse(50px closest-side at 10px 20px)] to [ellipse(150px farthest-side at 30px 40px)] at (1) should be [ellipse(150px farthest-side at 30px 40px)]
@@ -481,16 +481,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0.6) should be [polygon(nonzero, 110px 120px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (1) should be [polygon(nonzero, 110px 120px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (1.5) should be [polygon(nonzero, 110px 120px)]
-FAIL CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (-0.3) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
-FAIL CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
-FAIL CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0.3) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
+PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (-0.3) should be [polygon(evenodd, 10px 20px)]
+PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0) should be [polygon(evenodd, 10px 20px)]
+PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0.3) should be [polygon(evenodd, 10px 20px)]
 PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0.5) should be [polygon(nonzero, 110px 120px)]
 PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0.6) should be [polygon(nonzero, 110px 120px)]
 PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (1) should be [polygon(nonzero, 110px 120px)]
 PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (1.5) should be [polygon(nonzero, 110px 120px)]
-FAIL Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (-0.3) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
-FAIL Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
-FAIL Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0.3) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
+PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (-0.3) should be [polygon(evenodd, 10px 20px)]
+PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0) should be [polygon(evenodd, 10px 20px)]
+PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0.3) should be [polygon(evenodd, 10px 20px)]
 PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0.5) should be [polygon(nonzero, 110px 120px)]
 PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (0.6) should be [polygon(nonzero, 110px 120px)]
 PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(nonzero, 110px 120px)] at (1) should be [polygon(nonzero, 110px 120px)]
@@ -509,16 +509,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0.6) should be [polygon(110px 120px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (1) should be [polygon(110px 120px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (1.5) should be [polygon(110px 120px)]
-FAIL CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (-0.3) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
-FAIL CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
-FAIL CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0.3) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
+PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (-0.3) should be [polygon(evenodd, 10px 20px)]
+PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0) should be [polygon(evenodd, 10px 20px)]
+PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0.3) should be [polygon(evenodd, 10px 20px)]
 PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0.5) should be [polygon(110px 120px)]
 PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0.6) should be [polygon(110px 120px)]
 PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (1) should be [polygon(110px 120px)]
 PASS CSS Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (1.5) should be [polygon(110px 120px)]
-FAIL Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (-0.3) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
-FAIL Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
-FAIL Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0.3) should be [polygon(evenodd, 10px 20px)] assert_equals: expected "polygon ( evenodd , 10px 20px ) " but got "polygon ( 110px 120px ) "
+PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (-0.3) should be [polygon(evenodd, 10px 20px)]
+PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0) should be [polygon(evenodd, 10px 20px)]
+PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0.3) should be [polygon(evenodd, 10px 20px)]
 PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0.5) should be [polygon(110px 120px)]
 PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (0.6) should be [polygon(110px 120px)]
 PASS Web Animations: property <clip-path> from [polygon(evenodd, 10px 20px)] to [polygon(110px 120px)] at (1) should be [polygon(110px 120px)]
@@ -537,16 +537,16 @@
 PASS CSS Transitions with transition: all: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0.6) should be [polygon(110px 120px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (1) should be [polygon(110px 120px)]
 PASS CSS Transitions with transition: all: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (1.5) should be [polygon(110px 120px)]
-FAIL CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (-0.3) should be [polygon(10px 20px, 30px 40px)] assert_equals: expected "polygon ( 10px 20px , 30px 40px ) " but got "polygon ( 110px 120px ) "
-FAIL CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0) should be [polygon(10px 20px, 30px 40px)] assert_equals: expected "polygon ( 10px 20px , 30px 40px ) " but got "polygon ( 110px 120px ) "
-FAIL CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0.3) should be [polygon(10px 20px, 30px 40px)] assert_equals: expected "polygon ( 10px 20px , 30px 40px ) " but got "polygon ( 110px 120px ) "
+PASS CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (-0.3) should be [polygon(10px 20px, 30px 40px)]
+PASS CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0) should be [polygon(10px 20px, 30px 40px)]
+PASS CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0.3) should be [polygon(10px 20px, 30px 40px)]
 PASS CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0.5) should be [polygon(110px 120px)]
 PASS CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0.6) should be [polygon(110px 120px)]
 PASS CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (1) should be [polygon(110px 120px)]
 PASS CSS Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (1.5) should be [polygon(110px 120px)]
-FAIL Web Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (-0.3) should be [polygon(10px 20px, 30px 40px)] assert_equals: expected "polygon ( 10px 20px , 30px 40px ) " but got "polygon ( 110px 120px ) "
-FAIL Web Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0) should be [polygon(10px 20px, 30px 40px)] assert_equals: expected "polygon ( 10px 20px , 30px 40px ) " but got "polygon ( 110px 120px ) "
-FAIL Web Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0.3) should be [polygon(10px 20px, 30px 40px)] assert_equals: expected "polygon ( 10px 20px , 30px 40px ) " but got "polygon ( 110px 120px ) "
+PASS Web Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (-0.3) should be [polygon(10px 20px, 30px 40px)]
+PASS Web Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0) should be [polygon(10px 20px, 30px 40px)]
+PASS Web Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0.3) should be [polygon(10px 20px, 30px 40px)]
 PASS Web Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0.5) should be [polygon(110px 120px)]
 PASS Web Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (0.6) should be [polygon(110px 120px)]
 PASS Web Animations: property <clip-path> from [polygon(10px 20px, 30px 40px)] to [polygon(110px 120px)] at (1) should be [polygon(110px 120px)]

Modified: trunk/Source/WebCore/ChangeLog (284960 => 284961)


--- trunk/Source/WebCore/ChangeLog	2021-10-27 21:43:30 UTC (rev 284960)
+++ trunk/Source/WebCore/ChangeLog	2021-10-27 22:06:51 UTC (rev 284961)
@@ -1,3 +1,22 @@
+2021-10-27  Kiet Ho  <[email protected]>
+
+        Add discrete animation support between PathOperations
+        https://bugs.webkit.org/show_bug.cgi?id=232366
+
+        Reviewed by Simon Fraser.
+
+        Updated the code responsible for blending two PathOperations to account for discrete animation.
+        Implemented PropertyWrapperClipPath::canInterpolate, used to determine if a CSS transition is possible
+        (if animation between two PathOperations is discrete, then canInterpolate() is false, and no transitions
+        are created).
+
+        Tests: imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-composition.html
+               imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-interpolation-001.html
+               imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-interpolation-002.html
+
+        * animation/CSSPropertyAnimation.cpp:
+        (WebCore::blendFunc):
+
 2021-10-27  Chris Dumez  <[email protected]>
 
         autofocus IDL attribute should be exposed on all HTML or SVG elements

Modified: trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp (284960 => 284961)


--- trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp	2021-10-27 21:43:30 UTC (rev 284960)
+++ trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp	2021-10-27 22:06:51 UTC (rev 284961)
@@ -273,20 +273,16 @@
 
 static inline RefPtr<PathOperation> blendFunc(PathOperation* from, PathOperation* to, const CSSPropertyBlendingContext& context)
 {
-    if (!from || !to)
-        return to;
+    if (is<ShapePathOperation>(from) && is<ShapePathOperation>(to)) {
+        auto& fromShape = downcast<ShapePathOperation>(*from).basicShape();
+        auto& toShape = downcast<ShapePathOperation>(*to).basicShape();
 
-    // Other clip-path operations than BasicShapes can not be animated.
-    if (from->type() != PathOperation::Shape || to->type() != PathOperation::Shape)
-        return to;
+        if (fromShape.canBlend(toShape))
+            return ShapePathOperation::create(toShape.blend(fromShape, context));
+    }
 
-    const BasicShape& fromShape = downcast<ShapePathOperation>(*from).basicShape();
-    const BasicShape& toShape = downcast<ShapePathOperation>(*to).basicShape();
-
-    if (!fromShape.canBlend(toShape))
-        return to;
-
-    return ShapePathOperation::create(toShape.blend(fromShape, context));
+    // fall back to discrete animation.
+    return context.progress < 0.5 ? from : to;
 }
 
 static inline RefPtr<ShapeValue> blendFunc(ShapeValue* from, ShapeValue* to, const CSSPropertyBlendingContext& context)
@@ -1028,6 +1024,21 @@
     }
 
 private:
+    bool canInterpolate(const RenderStyle& from, const RenderStyle& to, CompositeOperation) const override
+    {
+        auto fromPath = value(from);
+        auto toPath = value(to);
+
+        if (is<ShapePathOperation>(fromPath) && is<ShapePathOperation>(toPath)) {
+            auto& fromShape = downcast<ShapePathOperation>(*fromPath).basicShape();
+            auto& toShape = downcast<ShapePathOperation>(*toPath).basicShape();
+
+            return fromShape.canBlend(toShape);
+        }
+
+        return false;
+    }
+
     bool equals(const RenderStyle& a, const RenderStyle& b) const final
     {
         // If the style pointers are the same, don't bother doing the test.
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to