diff options
Diffstat (limited to 'testing/web-platform/tests/css/motion/animation')
21 files changed, 1923 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/motion/animation/offset-anchor-composition.html b/testing/web-platform/tests/css/motion/animation/offset-anchor-composition.html new file mode 100644 index 0000000000..53210fdf38 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-anchor-composition.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>offset-anchor composition</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property"> +<meta name="assert" content="offset-anchor supports animation."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + width: 200px; + height: 200px; +} +</style> +<body> +<script> +test_composition({ + property: 'offset-anchor', + underlying: '40px 60px', + addFrom: '60px 40px', + addTo: '160px 140px', +}, [ + {at: -0.25, expect: '75px 75px'}, + {at: 0, expect: '100px 100px'}, + {at: 0.25, expect: '125px 125px'}, + {at: 0.5, expect: '150px 150px'}, + {at: 0.75, expect: '175px 175px'}, + {at: 1, expect: '200px 200px'}, + {at: 1.25, expect: '225px 225px'}, +]); + +test_composition({ + property: 'offset-anchor', + underlying: 'top 20% left 40%', + addFrom: 'left 60% top 80%', + addTo: 'right 80% bottom 40%', +}, [ + {at: -0.25, expect: '110% 105%'}, + {at: 0, expect: '100% 100%'}, + {at: 0.25, expect: '90% 95%'}, + {at: 0.5, expect: '80% 90%'}, + {at: 0.75, expect: '70% 85%'}, + {at: 1, expect: '60% 80%'}, + {at: 1.25, expect: '50% 75%'}, +]); + +test_composition({ + property: 'offset-anchor', + underlying: '40px 60px', + replaceFrom: '100px 200px', + addTo: '160px 40px', +}, [ + {at: -0.25, expect: '75px 225px'}, + {at: 0, expect: '100px 200px'}, + {at: 0.25, expect: '125px 175px'}, + {at: 0.5, expect: '150px 150px'}, + {at: 0.75, expect: '175px 125px'}, + {at: 1, expect: '200px 100px'}, + {at: 1.25, expect: '225px 75px'}, +]); + +test_composition({ + property: 'offset-anchor', + underlying: '40px 60px', + addFrom: '60px 140px', + replaceTo: '200px 100px', +}, [ + {at: -0.25, expect: '75px 225px'}, + {at: 0, expect: '100px 200px'}, + {at: 0.25, expect: '125px 175px'}, + {at: 0.5, expect: '150px 150px'}, + {at: 0.75, expect: '175px 125px'}, + {at: 1, expect: '200px 100px'}, + {at: 1.25, expect: '225px 75px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html new file mode 100644 index 0000000000..9c69c0f0be --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-anchor interpolation</title> + <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property"> + <meta name="assert" content="offset-anchor supports <position> animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + <style> + .parent { + offset-anchor: 30px 10px; + } + .target { + offset-anchor: 10px 30px; + } + </style> + </head> + <body> + <script> + test_interpolation({ + property: 'offset-anchor', + from: '220px 240px', + to: '300px 400px', + }, [ + {at: -1, expect: '140px 80px'}, + {at: 0, expect: '220px 240px'}, + {at: 0.125, expect: '230px 260px'}, + {at: 0.875, expect: '290px 380px'}, + {at: 1, expect: '300px 400px'}, + {at: 2, expect: '380px 560px'} + ]); + + test_interpolation({ + property: 'offset-anchor', + from: 'left 480px top 400px', + to: 'right -140% bottom -60%', + }, [ + {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%)'}, + {at: 0, expect: 'left calc(0% + 480px) top calc(0% + 400px)'}, + {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%)'}, + {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px)'}, + {at: 1, expect: 'right -140% bottom -60%'}, + {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px)'} + ]); + + test_interpolation({ + property: 'offset-anchor', + from: 'left top', + to: 'left 8px bottom 20%', + }, [ + {at: -1, expect: 'calc(0% - 8px) -80%'}, + {at: 0, expect: 'left top'}, + {at: 0.125, expect: 'calc(0% + 1px) 10%'}, + {at: 0.875, expect: 'calc(0% + 7px) 70%'}, + {at: 1, expect: 'left calc(0% + 8px) bottom 20%'}, + {at: 2, expect: 'calc(0% + 16px) 160%'} + ]); + + test_no_interpolation({ + property: 'offset-anchor', + from: 'right 10px top 20%', + to: 'auto' + }); + + test_interpolation({ + property: 'offset-anchor', + from: neutralKeyframe, + to: '20px 20px', + }, [ + {at: -0.3, expect: '7px 33px'}, + {at: 0, expect: '10px 30px'}, + {at: 0.3, expect: '13px 27px'}, + {at: 0.6, expect: '16px 24px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '25px 15px'}, + ]); + + test_no_interpolation({ + property: 'offset-anchor', + from: 'initial', + to: '60% 40%', + }); + + test_interpolation({ + property: 'offset-anchor', + from: 'inherit', + to: '20px 20px', + }, [ + {at: -0.3, expect: '33px 7px'}, + {at: 0, expect: '30px 10px'}, + {at: 0.3, expect: '27px 13px'}, + {at: 0.6, expect: '24px 16px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '15px 25px'}, + ]); + + test_no_interpolation({ + property: 'offset-anchor', + from: 'unset', + to: '50% 10px', + }); + + test_interpolation({ + property: 'offset-anchor', + from: '0% 50%', + to: '100% 150%' + }, [ + {at: -0.3, expect: '-30% 20%'}, + {at: 0, expect: '0% 50%'}, + {at: 0.3, expect: '30% 80%'}, + {at: 0.6, expect: '60% 110%'}, + {at: 1, expect: '100% 150%'}, + {at: 1.5, expect: '150% 200%'} + ]); + + test_no_interpolation({ + property: 'offset-anchor', + from: 'auto', + to: '20px 20px', + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/offset-distance-composition.html b/testing/web-platform/tests/css/motion/animation/offset-distance-composition.html new file mode 100644 index 0000000000..4ff6e95b05 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-distance-composition.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>offset-distance composition</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> +<meta name="assert" content="offset-distance supports animation."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'offset-distance', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'offset-distance', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, +]); + +test_composition({ + property: 'offset-distance', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'offset-distance', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/motion/animation/offset-distance-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-distance-interpolation.html new file mode 100644 index 0000000000..bc0c094a8e --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-distance-interpolation.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-distance interpolation</title> + <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> + <meta name="assert" content="offset-distance supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <style> + .parent { + offset-distance: 30px; + } + .target { + width: 10px; + height: 10px; + background-color: black; + offset-path: path("M0 0H 400"); + offset-distance: 10px; + } + .expected { + background-color: green; + } + </style> + <body> + <script> + test_interpolation({ + property: 'offset-distance', + from: '-30px', + to: '50px', + }, [ + {at: -1, expect: '-110px'}, + {at: 0, expect: '-30px'}, + {at: 0.125, expect: '-20px'}, + {at: 0.875, expect: '40px'}, + {at: 1, expect: '50px'}, + {at: 2, expect: '130px'} + ]); + + test_interpolation({ + property: 'offset-distance', + from: '20%', + to: '100%', + }, [ + {at: -1, expect: '-60%'}, + {at: 0, expect: '20%'}, + {at: 0.125, expect: '30%'}, + {at: 0.875, expect: '90%'}, + {at: 1, expect: '100%'}, + {at: 2, expect: '180%'} + ]); + + test_interpolation({ + property: 'offset-distance', + from: 'calc(20% - 30px)', + to: 'calc(50px + 100%)', + }, [ + {at: -1, expect: 'calc(-110px + -60%)'}, + {at: 0, expect: 'calc(20% - 30px)'}, + {at: 0.125, expect: 'calc(-20px + 30%)'}, + {at: 0.875, expect: 'calc(40px + 90%)'}, + {at: 1, expect: 'calc(50px + 100%)'}, + {at: 2, expect: 'calc(130px + 180%)'} + ]); + + test_interpolation({ + property: 'offset-distance', + from: neutralKeyframe, + to: '20px', + }, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, + ]); + + test_interpolation({ + property: 'offset-distance', + from: 'initial', + to: '20px', + }, [ + {at: -0.3, expect: '-6px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, + ]); + + test_interpolation({ + property: 'offset-distance', + from: 'inherit', + to: '20px', + }, [ + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, + ]); + + test_interpolation({ + property: 'offset-distance', + from: 'unset', + to: '20px', + }, [ + {at: -0.3, expect: '-6px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, + ]); + + test_interpolation({ + property: 'offset-distance', + from: '10px', + to: '100%', + }, [ + {at: -0.3, expect: 'calc(13px + -30%)'}, + {at: 0, expect: 'calc(0% + 10px)'}, + {at: 0.3, expect: 'calc(7px + 30%)'}, + {at: 0.6, expect: 'calc(4px + 60%)'}, + {at: 1, expect: '100%'}, + {at: 1.5, expect: 'calc(-5px + 150%)'}, + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/offset-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-interpolation.html new file mode 100644 index 0000000000..2ee011bd77 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-interpolation.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-shorthand"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <body> + <script> + test_interpolation({ + property: 'offset', + from: 'path("M0 200H 700") 500px 800deg', + to: 'path("M0 300H 700 Z") 600px 900deg', + method: 'CSS Transitions', + }, [ + {at: -0.3, expect: 'path("M0 300H 700 Z") 470px 770deg'}, + {at: 0, expect: 'path("M0 300H 700 Z") 500px 800deg'}, + {at: 0.3, expect: 'path("M0 300H 700 Z") 530px 830deg'}, + {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'}, + {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'}, + {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'}, + ]); + + test_interpolation({ + property: 'offset', + from: 'path("M0 0H 200") 500px auto', + to: 'path("M0 0H 300") 600px 0deg', + method: 'CSS Transitions', + }, [ + {at: -0.3, expect: 'path("M0 0H 170") 470px 0deg'}, + {at: 0, expect: 'path("M0 0H 200") 500px 0deg'}, + {at: 0.3, expect: 'path("M0 0H 230") 530px 0deg'}, + {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'}, + {at: 1, expect: 'path("M0 0H 300") 600px 0deg'}, + {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'}, + ]); + + test_interpolation({ + property: 'offset', + from: 'path("M0 200H 700") 500px 800deg', + to: 'path("M0 300H 700 Z") 600px 900deg', + method: 'CSS Animations', + }, [ + {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'}, + {at: 0, expect: 'path("M0 200H 700") 500px 800deg'}, + {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'}, + {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'}, + {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'}, + {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'}, + ]); + + test_interpolation({ + property: 'offset', + from: 'path("M0 0H 200") 500px auto', + to: 'path("M0 0H 300") 600px 0deg', + method: 'CSS Animations', + }, [ + {at: -0.3, expect: 'path("M0 0H 170") 470px'}, + {at: 0, expect: 'path("M0 0H 200") 500px'}, + {at: 0.3, expect: 'path("M0 0H 230") 530px'}, + {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'}, + {at: 1, expect: 'path("M0 0H 300") 600px 0deg'}, + {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'}, + ]); + + test_interpolation({ + property: 'offset', + from: 'path("M0 200H 700") 500px 800deg', + to: 'path("M0 300H 700 Z") 600px 900deg', + method: 'Web Animations', + }, [ + {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'}, + {at: 0, expect: 'path("M0 200H 700") 500px 800deg'}, + {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'}, + {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'}, + {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'}, + {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'}, + ]); + + test_interpolation({ + property: 'offset', + from: 'path("M0 0V 200") 500px auto', + to: 'path("M0 0H 300") 600px 0deg', + method: 'Web Animations', + }, [ + {at: -0.3, expect: 'path("M0 0V 200") 470px'}, + {at: 0, expect: 'path("M0 0V 200") 500px'}, + {at: 0.3, expect: 'path("M0 0V 200") 530px'}, + {at: 0.6, expect: 'path("M0 0H 300") 560px 0deg'}, + {at: 1, expect: 'path("M0 0H 300") 600px 0deg'}, + {at: 1.5, expect: 'path("M0 0H 300") 650px 0deg'}, + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-composition.html b/testing/web-platform/tests/css/motion/animation/offset-path-composition.html new file mode 100644 index 0000000000..eedd363efa --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-path-composition.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>offset-distance composition</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> +<meta name="assert" content="offset-distance supports animation."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +// TODO(ericwilligers) Support additive animation for path strings crbug.com/699308 + +// Ray paths compose. +test_composition({ + property: 'offset-path', + underlying: 'ray(20deg sides)', + addFrom: 'ray(10deg sides)', + addTo: 'ray(20deg sides)', +}, [ + {at: -0.3, expect: 'ray(27deg sides)'}, + {at: 0, expect: 'ray(30deg sides)'}, + {at: 0.3, expect: 'ray(33deg sides)'}, + {at: 0.6, expect: 'ray(36deg sides)'}, + {at: 1, expect: 'ray(40deg sides)'}, + {at: 1.5, expect: 'ray(45deg sides)'}, +]); + +// Ray paths without contain don't compose with underlying contain. +test_composition({ + property: 'offset-path', + underlying: 'ray(20deg closest-corner contain)', + addFrom: 'ray(10deg closest-corner)', + addTo: 'ray(20deg closest-corner)', +}, [ + {at: -0.3, expect: 'ray(7deg closest-corner)'}, + {at: 0, expect: 'ray(10deg closest-corner)'}, + {at: 0.3, expect: 'ray(13deg closest-corner)'}, + {at: 0.6, expect: 'ray(16deg closest-corner)'}, + {at: 1, expect: 'ray(20deg closest-corner)'}, + {at: 1.5, expect: 'ray(25deg closest-corner)'}, +]); + +// Ray paths don't compose when underlying has different size. +test_composition({ + property: 'offset-path', + underlying: 'ray(20deg closest-side)', + addFrom: 'ray(10deg closest-corner)', + addTo: 'ray(20deg closest-corner)', +}, [ + {at: -0.3, expect: 'ray(7deg closest-corner)'}, + {at: 0, expect: 'ray(10deg closest-corner)'}, + {at: 0.3, expect: 'ray(13deg closest-corner)'}, + {at: 0.6, expect: 'ray(16deg closest-corner)'}, + {at: 1, expect: 'ray(20deg closest-corner)'}, + {at: 1.5, expect: 'ray(25deg closest-corner)'}, +]); + +// Ray contain paths compose with underlying contain. +test_composition({ + property: 'offset-path', + underlying: 'ray(20deg farthest-side contain)', + addFrom: 'ray(190deg farthest-side contain)', + addTo: 'ray(20deg farthest-side contain)', +}, [ + {at: -0.3, expect: 'ray(261deg farthest-side contain)'}, + {at: 0, expect: 'ray(210deg farthest-side contain)'}, + {at: 0.3, expect: 'ray(159deg farthest-side contain)'}, + {at: 0.6, expect: 'ray(108deg farthest-side contain)'}, + {at: 1, expect: 'ray(40deg farthest-side contain)'}, + {at: 1.5, expect: 'ray(-45deg farthest-side contain)'}, +]); + +// When we can't interpolate, we can't compose. +test_composition({ + property: 'offset-path', + underlying: 'ray(20deg farthest-corner)', + addFrom: 'ray(190deg farthest-corner contain)', + addTo: 'ray(20deg farthest-corner)', +}, [ + {at: -0.3, expect: 'ray(190deg farthest-corner contain)'}, + {at: 0, expect: 'ray(190deg farthest-corner contain)'}, + {at: 0.3, expect: 'ray(190deg farthest-corner contain)'}, + {at: 0.6, expect: 'ray(40deg farthest-corner)'}, + {at: 1, expect: 'ray(40deg farthest-corner)'}, + {at: 1.5, expect: 'ray(40deg farthest-corner)'}, +]); + +test_composition({ + property: 'offset-path', + underlying: 'ray(20deg sides)', + replaceFrom: 'ray(190deg sides contain)', + addTo: 'ray(20deg sides)', +}, [ + {at: -0.3, expect: 'ray(190deg sides contain)'}, + {at: 0, expect: 'ray(190deg sides contain)'}, + {at: 0.3, expect: 'ray(190deg sides contain)'}, + {at: 0.6, expect: 'ray(40deg sides)'}, + {at: 1, expect: 'ray(40deg sides)'}, + {at: 1.5, expect: 'ray(40deg sides)'}, +]); + +// Ray paths compose with underlying. +test_composition({ + property: 'offset-path', + underlying: 'ray(20deg closest-side)', + addFrom: 'ray(10deg closest-side)', + replaceTo: 'ray(10deg closest-side)', +}, [ + {at: -0.3, expect: 'ray(36deg closest-side)'}, + {at: 0, expect: 'ray(30deg closest-side)'}, + {at: 0.3, expect: 'ray(24deg closest-side)'}, + {at: 0.6, expect: 'ray(18deg closest-side)'}, + {at: 1, expect: 'ray(10deg closest-side)'}, + {at: 1.5, expect: 'ray(0deg closest-side)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-001.html new file mode 100644 index 0000000000..5b90813bb5 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-001.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-distance interpolation</title> + <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> + <meta name="assert" content="offset-distance supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <body> + <script> + 'use strict'; + + // Distinct number of path segments + test_no_interpolation({ + property: 'offset-path', + from: "path('M 0 0 H 1 H 2')", + to: "path('M 0 0 H 3')" + }); + + test_no_interpolation({ + property: 'offset-path', + from: "path('M 1 2 L 3 4 Z')", + to: "none" + }); + + // Distinct segment types + test_no_interpolation({ + property: 'offset-path', + from: "path('M 10 0 H 11')", + to: "path('M 20 0 V 2')" + }); + + test_no_interpolation({ + property: 'offset-path', + from: "path('M 1 2 L 4 6 Z')", + to: "path('M 1 2 H 4 V 6')" + }); + + // Exercise each segment type + test_interpolation({ + property: 'offset-path', + from: "path('M 0 0 Z')", + to: "path('M 0 0 Z')" + }, [ + {at: -1, expect: "path('M 0 0 Z')"}, + {at: 0, expect: "path('M 0 0 Z')"}, + {at: 0.125, expect: "path('M 0 0 Z')"}, + {at: 0.875, expect: "path('M 0 0 Z')"}, + {at: 1, expect: "path('M 0 0 Z')"}, + {at: 2, expect: "path('M 0 0 Z')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('M 20 70')", + to: "path('M 100 30')" + }, [ + {at: -1, expect: "path('M -60 110')"}, + {at: 0, expect: "path('M 20 70')"}, + {at: 0.125, expect: "path('M 30 65')"}, + {at: 0.875, expect: "path('M 90 35')"}, + {at: 1, expect: "path('M 100 30')"}, + {at: 2, expect: "path('M 180 -10')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('m 20 70')", + to: "path('m 100 30')" + }, [ + {at: -1, expect: "path('M -60 110')"}, + {at: 0, expect: "path('M 20 70')"}, + {at: 0.125, expect: "path('M 30 65')"}, + {at: 0.875, expect: "path('M 90 35')"}, + {at: 1, expect: "path('M 100 30')"}, + {at: 2, expect: "path('M 180 -10')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('m 100 200 L 120 270')", + to: "path('m 100 200 L 200 230')" + }, [ + {at: -1, expect: "path('M 100 200 L 40 310')"}, + {at: 0, expect: "path('M 100 200 L 120 270')"}, + {at: 0.125, expect: "path('M 100 200 L 130 265')"}, + {at: 0.875, expect: "path('M 100 200 L 190 235')"}, + {at: 1, expect: "path('M 100 200 L 200 230')"}, + {at: 2, expect: "path('M 100 200 L 280 190')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('m 100 200 l 20 70')", + to: "path('m 100 200 l 100 30')" + }, [ + {at: -1, expect: "path('M 100 200 L 40 310')"}, + {at: 0, expect: "path('M 100 200 L 120 270')"}, + {at: 0.125, expect: "path('M 100 200 L 130 265')"}, + {at: 0.875, expect: "path('M 100 200 L 190 235')"}, + {at: 1, expect: "path('M 100 200 L 200 230')"}, + {at: 2, expect: "path('M 100 200 L 280 190')"} + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-002.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-002.html new file mode 100644 index 0000000000..2841bd9562 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-002.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-distance interpolation</title> + <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> + <meta name="assert" content="offset-distance supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <body> + <script> + 'use strict'; + + test_interpolation({ + property: 'offset-path', + from: "path('M 20 10 C 32 42 52 62 120 2200')", + to: "path('M 20 10 C 40 50 60 70 200 3000')", + }, [ + {at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"}, + {at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"}, + {at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"}, + {at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"}, + {at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"}, + {at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"} + ]); + test_interpolation({ + property: 'offset-path', + from: "path('m 20 10 c 12 32 32 52 100 2190')", + to: "path('m 20 10 c 20 40 40 60 180 2990')" + }, [ + {at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"}, + {at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"}, + {at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"}, + {at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"}, + {at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"}, + {at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('M 20 10 Q 32 42 120 2200')", + to: "path('M 20 10 Q 40 50 200 3000')" + }, [ + {at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"}, + {at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"}, + {at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"}, + {at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"}, + {at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"}, + {at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"} + ]); + test_interpolation({ + property: 'offset-path', + from: "path('m 20 10 q 12 32 100 2190')", + to: "path('m 20 10 q 20 40 180 2990')" + }, [ + {at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"}, + {at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"}, + {at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"}, + {at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"}, + {at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"}, + {at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('M 100 400 A 10 20 30 1 0 140 450')", + to: "path('M 300 200 A 50 60 70 0 1 380 290')" + }, [ + {at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"}, + {at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"}, + {at: 0.125, expect: "path('M 125 375 A 15 25 35 1 0 170 430')"}, + {at: 0.875, expect: "path('M 275 225 A 45 55 65 0 1 350 310')"}, + {at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"}, + {at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"} + ]); + test_interpolation({ + property: 'offset-path', + from: "path('m 100 400 a 10 20 30 1 0 40 50')", + to: "path('m 300 200 a 50 60 70 0 1 80 90')" + }, [ + {at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"}, + {at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"}, + {at: 0.125, expect: "path('M 125 375 A 15 25 35 1 0 170 430')"}, + {at: 0.875, expect: "path('M 275 225 A 45 55 65 0 1 350 310')"}, + {at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"}, + {at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"} + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-003.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-003.html new file mode 100644 index 0000000000..44c0285055 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-003.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-distance interpolation</title> + <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> + <meta name="assert" content="offset-distance supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <body> + <script> + 'use strict'; + + test_interpolation({ + property: 'offset-path', + from: "path('M 50 60 H 70')", + to: "path('M 10 140 H 270')" + }, [ + {at: -1, expect: "path('M 90 -20 H -130')"}, + {at: 0, expect: "path('M 50 60 H 70')"}, + {at: 0.125, expect: "path('M 45 70 H 95')"}, + {at: 0.875, expect: "path('M 15 130 H 245')"}, + {at: 1, expect: "path('M 10 140 H 270')"}, + {at: 2, expect: "path('M -30 220 H 470')"} + ]); + test_interpolation({ + property: 'offset-path', + from: "path('m 50 60 h 20')", + to: "path('m 10 140 h 260')" + }, [ + {at: -1, expect: "path('M 90 -20 H -130')"}, + {at: 0, expect: "path('M 50 60 H 70')"}, + {at: 0.125, expect: "path('M 45 70 H 95')"}, + {at: 0.875, expect: "path('M 15 130 H 245')"}, + {at: 1, expect: "path('M 10 140 H 270')"}, + {at: 2, expect: "path('M -30 220 H 470')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('M 50 60 V 70')", + to: "path('M 10 140 V 270')" + }, [ + {at: -1, expect: "path('M 90 -20 V -130')"}, + {at: 0, expect: "path('M 50 60 V 70')"}, + {at: 0.125, expect: "path('M 45 70 V 95')"}, + {at: 0.875, expect: "path('M 15 130 V 245')"}, + {at: 1, expect: "path('M 10 140 V 270')"}, + {at: 2, expect: "path('M -30 220 V 470')"} + ]); + test_interpolation({ + property: 'offset-path', + from: "path('m 50 60 v 10')", + to: "path('m 10 140 v 130')" + }, [ + {at: -1, expect: "path('M 90 -20 V -130')"}, + {at: 0, expect: "path('M 50 60 V 70')"}, + {at: 0.125, expect: "path('M 45 70 V 95')"}, + {at: 0.875, expect: "path('M 15 130 V 245')"}, + {at: 1, expect: "path('M 10 140 V 270')"}, + {at: 2, expect: "path('M -30 220 V 470')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('M 12 34 S 45 67 89 123')", + to: "path('M 20 26 S 61 51 113 99')" + }, [ + {at: -1, expect: "path('M 4 42 S 29 83 65 147')"}, + {at: 0, expect: "path('M 12 34 S 45 67 89 123')"}, + {at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"}, + {at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"}, + {at: 1, expect: "path('M 20 26 S 61 51 113 99')"}, + {at: 2, expect: "path('M 28 18 S 77 35 137 75')"}, + ]); + test_interpolation({ + property: 'offset-path', + from: "path('m 12 34 s 33 33 77 89')", + to: "path('m 20 26 s 41 25 93 73')" + }, [ + {at: -1, expect: "path('M 4 42 S 29 83 65 147')"}, + {at: 0, expect: "path('M 12 34 S 45 67 89 123')"}, + {at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"}, + {at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"}, + {at: 1, expect: "path('M 20 26 S 61 51 113 99')"}, + {at: 2, expect: "path('M 28 18 S 77 35 137 75')"}, + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('M 12 34 T 45 67')", + to: "path('M 20 26 T 61 51')" + }, [ + {at: -1, expect: "path('M 4 42 T 29 83')"}, + {at: 0, expect: "path('M 12 34 T 45 67')"}, + {at: 0.125, expect: "path('M 13 33 T 47 65')"}, + {at: 0.875, expect: "path('M 19 27 T 59 53')"}, + {at: 1, expect: "path('M 20 26 T 61 51')"}, + {at: 2, expect: "path('M 28 18 T 77 35')"}, + ]); + test_interpolation({ + property: 'offset-path', + from: "path('m 12 34 t 33 33')", + to: "path('m 20 26 t 41 25')" + }, [ + {at: -1, expect: "path('M 4 42 T 29 83')"}, + {at: 0, expect: "path('M 12 34 T 45 67')"}, + {at: 0.125, expect: "path('M 13 33 T 47 65')"}, + {at: 0.875, expect: "path('M 19 27 T 59 53')"}, + {at: 1, expect: "path('M 20 26 T 61 51')"}, + {at: 2, expect: "path('M 28 18 T 77 35')"}, + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-004.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-004.html new file mode 100644 index 0000000000..860348649b --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-004.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-distance interpolation</title> + <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> + <meta name="assert" content="offset-distance supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <body> + <script> + 'use strict'; + + // Mix relative and non-relative + test_interpolation({ + property: 'offset-path', + from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')", + to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 300 100 z')" + }, [ + {at: -1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 0 -100 Z')"}, + {at: 0, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, + {at: 0.125, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 225 125 Z')"}, + {at: 0.875, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 375 275 Z')"}, + {at: 1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 400 300 Z')"}, + {at: 2, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 600 500 Z')"}, + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')", + to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z')" + }, [ + {at: -1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, + {at: 0, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, + {at: 0.125, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, + {at: 0.875, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, + {at: 1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, + {at: 2, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('m 10 20 l 40 50 z l 40 60 z m 60 70 l 90 60 z t 70 130')", + to: "path('M 210 220 L 170 190 Z L 90 120 Z M 110 130 L 200 230 Z T 220 220')" + }, [ + {at: -1, expect: "path('M -190 -180 L -70 -50 Z L 10 40 Z M 30 50 L 120 70 Z T 60 220')"}, + {at: 0, expect: "path('M 10 20 L 50 70 Z L 50 80 Z M 70 90 L 160 150 Z T 140 220')"}, + {at: 0.125, expect: "path('M 35 45 L 65 85 Z L 55 85 Z M 75 95 L 165 160 Z T 150 220')"}, + {at: 0.875, expect: "path('M 185 195 L 155 175 Z L 85 115 Z M 105 125 L 195 220 Z T 210 220')"}, + {at: 1, expect: "path('M 210 220 L 170 190 Z L 90 120 Z M 110 130 L 200 230 Z T 220 220')"}, + {at: 2, expect: "path('M 410 420 L 290 310 Z L 130 160 Z M 150 170 L 240 310 Z T 300 220')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('m 10 20 c 40 50 30 60 80 70 c 120 130 170 140 110 160')", + to: "path('M 130 100 C 130 150 120 160 210 170 C 290 300 340 310 320 330')" + }, [ + {at: -1, expect: "path('M -110 -60 C -30 -10 -40 0 -30 10 C 130 140 180 150 80 170')"}, + {at: 0, expect: "path('M 10 20 C 50 70 40 80 90 90 C 210 220 260 230 200 250')"}, + {at: 0.125, expect: "path('M 25 30 C 60 80 50 90 105 100 C 220 230 270 240 215 260')"}, + {at: 0.875, expect: "path('M 115 90 C 120 140 110 150 195 160 C 280 290 330 300 305 320')"}, + {at: 1, expect: "path('M 130 100 C 130 150 120 160 210 170 C 290 300 340 310 320 330')"}, + {at: 2, expect: "path('M 250 180 C 210 230 200 240 330 250 C 370 380 420 390 440 410')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('m 10 20 q 30 60 40 50 q 110 80 90 80')", + to: "path('M 130 100 Q 120 160 130 150 Q 200 150 180 190')" + }, [ + {at: -1, expect: "path('M -110 -60 Q -40 0 -30 -10 Q 120 150 100 110')"}, + {at: 0, expect: "path('M 10 20 Q 40 80 50 70 Q 160 150 140 150')"}, + {at: 0.125, expect: "path('M 25 30 Q 50 90 60 80 Q 165 150 145 155')"}, + {at: 0.875, expect: "path('M 115 90 Q 110 150 120 140 Q 195 150 175 185')"}, + {at: 1, expect: "path('M 130 100 Q 120 160 130 150 Q 200 150 180 190')"}, + {at: 2, expect: "path('M 250 180 Q 200 240 210 230 Q 240 150 220 230')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('m 10 20 s 30 60 40 50 s 110 60 90 70')", + to: "path('M 130 140 S 120 160 130 150 S 200 170 140 180')" + }, [ + {at: -1, expect: "path('M -110 -100 S -40 0 -30 -10 S 120 90 140 100')"}, + {at: 0, expect: "path('M 10 20 S 40 80 50 70 S 160 130 140 140')"}, + {at: 0.125, expect: "path('M 25 35 S 50 90 60 80 S 165 135 140 145')"}, + {at: 0.875, expect: "path('M 115 125 S 110 150 120 140 S 195 165 140 175')"}, + {at: 1, expect: "path('M 130 140 S 120 160 130 150 S 200 170 140 180')"}, + {at: 2, expect: "path('M 250 260 S 200 240 210 230 S 240 210 140 220')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('m 10 20 h 30 v 60 h 10 v -10 l 110 60')", + to: "path('M 130 140 H 120 V 160 H 130 V 150 L 200 170')" + }, [ + {at: -1, expect: "path('M -110 -100 H -40 V 0 H -30 V -10 L 120 90')"}, + {at: 0, expect: "path('M 10 20 H 40 V 80 H 50 V 70 L 160 130')"}, + {at: 0.125, expect: "path('M 25 35 H 50 V 90 H 60 V 80 L 165 135')"}, + {at: 0.875, expect: "path('M 115 125 H 110 V 150 H 120 V 140 L 195 165')"}, + {at: 1, expect: "path('M 130 140 H 120 V 160 H 130 V 150 L 200 170')"}, + {at: 2, expect: "path('M 250 260 H 200 V 240 H 210 V 230 L 240 210')"} + ]); + + test_interpolation({ + property: 'offset-path', + from: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')", + to: "path('M 18 12 A 50 100 70 0 1 90 110 A 150 160 70 0 1 70 80')" + }, [ + {at: -1, expect: "path('M 2 28 A -30 -60 -10 1 0 10 30 A 70 80 -10 1 1 310 160')"}, + {at: 0, expect: "path('M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120')"}, + {at: 0.125, expect: "path('M 11 19 A 15 30 35 1 0 55 75 A 115 125 35 1 1 175 115')"}, + {at: 0.875, expect: "path('M 17 13 A 45 90 65 0 1 85 105 A 145 155 65 0 1 85 85')"}, + {at: 1, expect: "path('M 18 12 A 50 100 70 0 1 90 110 A 150 160 70 0 1 70 80')"}, + {at: 2, expect: "path('M 26 4 A 90 180 110 0 1 130 150 A 190 200 110 0 1 -50 40')"} + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html new file mode 100644 index 0000000000..9924106f4b --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-distance interpolation</title> + <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> + <meta name="assert" content="offset-distance supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <style> + .parent { + offset-path: ray(30deg closest-side); + } + .target { + offset-path: ray(10deg closest-side); + } + </style> + <body> + <script> + 'use strict'; + + test_no_interpolation({ + property: 'offset-path', + from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')", + to: "ray(0deg closest-side)", + }); + + test_no_interpolation({ + property: 'offset-path', + from: "ray(0deg closest-corner)", + to: "none", + }); + + // Neutral keyframes use the inline style. + test_interpolation({ + property: 'offset-path', + from: neutralKeyframe, + to: 'ray(20deg closest-side)', + }, [ + {at: -0.3, expect: 'ray(7deg closest-side)'}, + {at: 0, expect: 'ray(10deg closest-side)'}, + {at: 0.3, expect: 'ray(13deg closest-side)'}, + {at: 0.6, expect: 'ray(16deg closest-side)'}, + {at: 1, expect: 'ray(20deg closest-side)'}, + {at: 1.5, expect: 'ray(25deg closest-side)'}, + ]); + + // No interpolation to a ray from the initial value 'none'. + test_no_interpolation({ + property: 'offset-path', + from: 'initial', + to: 'ray(20deg closest-side)', + }); + + // 'inherit' keyframes use the parent style. + test_interpolation({ + property: 'offset-path', + from: 'inherit', + to: 'ray(20deg closest-side)', + }, [ + {at: -0.3, expect: 'ray(33deg closest-side)'}, + {at: 0, expect: 'ray(30deg closest-side)'}, + {at: 0.3, expect: 'ray(27deg closest-side)'}, + {at: 0.6, expect: 'ray(24deg closest-side)'}, + {at: 1, expect: 'ray(20deg closest-side)'}, + {at: 1.5, expect: 'ray(15deg closest-side)'}, + ]); + + // No interpolation to a ray from the initial value 'none'. + test_no_interpolation({ + property: 'offset-path', + from: 'unset', + to: 'ray(20deg closest-side)', + }); + + // No interpolation to a ray from the initial value 'none'. + test_no_interpolation({ + property: 'offset-path', + from: 'none', + to: 'ray(20deg closest-side)', + }); + + // Interpolation between rays. + test_interpolation({ + property: 'offset-path', + from: 'ray(10deg sides contain)', + to: 'ray(50deg sides contain)' + }, [ + {at: -1, expect: 'ray(-30deg sides contain)'}, + {at: 0, expect: 'ray(10deg sides contain)'}, + {at: 0.125, expect: 'ray(15deg sides contain)'}, + {at: 0.875, expect: 'ray(45deg sides contain)'}, + {at: 1, expect: 'ray(50deg sides contain)'}, + {at: 2, expect: 'ray(90deg sides contain)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'ray(-10deg farthest-corner)', + to: 'ray(-50deg farthest-corner)' + }, [ + {at: -1, expect: 'ray(30deg farthest-corner)'}, + {at: 0, expect: 'ray(-10deg farthest-corner)'}, + {at: 0.125, expect: 'ray(-15deg farthest-corner)'}, + {at: 0.875, expect: 'ray(-45deg farthest-corner)'}, + {at: 1, expect: 'ray(-50deg farthest-corner)'}, + {at: 2, expect: 'ray(-90deg farthest-corner)'}, + ]); + + // No interpolation between different sizes and/or different containment. + test_no_interpolation({ + property: 'offset-path', + from: 'ray(200deg farthest-side)', + to: 'ray(300deg sides)' + }); + test_no_interpolation({ + property: 'offset-path', + from: 'ray(200deg sides contain)', + to: 'ray(300deg sides)' + }); + test_no_interpolation({ + property: 'offset-path', + from: 'ray(200deg farthest-side contain)', + to: 'ray(300deg sides)' + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/offset-position-composition.html b/testing/web-platform/tests/css/motion/animation/offset-position-composition.html new file mode 100644 index 0000000000..0ee517a73a --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-position-composition.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>offset-position composition</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property"> +<meta name="assert" content="offset-position supports <position> animation."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + width: 200px; + height: 200px; +} +</style> +<body> +<script> +test_composition({ + property: 'offset-position', + underlying: '40px 60px', + addFrom: '60px 40px', + addTo: '160px 140px', +}, [ + {at: -0.25, expect: '75px 75px'}, + {at: 0, expect: '100px 100px'}, + {at: 0.25, expect: '125px 125px'}, + {at: 0.5, expect: '150px 150px'}, + {at: 0.75, expect: '175px 175px'}, + {at: 1, expect: '200px 200px'}, + {at: 1.25, expect: '225px 225px'}, +]); + +test_composition({ + property: 'offset-position', + underlying: 'top 20% left 40%', + addFrom: 'left 60% top 80%', + addTo: 'right 80% bottom 40%', +}, [ + {at: -0.25, expect: '110% 105%'}, + {at: 0, expect: '100% 100%'}, + {at: 0.25, expect: '90% 95%'}, + {at: 0.5, expect: '80% 90%'}, + {at: 0.75, expect: '70% 85%'}, + {at: 1, expect: '60% 80%'}, + {at: 1.25, expect: '50% 75%'}, +]); + +test_composition({ + property: 'offset-position', + underlying: '40px 60px', + replaceFrom: '100px 200px', + addTo: '160px 40px', +}, [ + {at: -0.25, expect: '75px 225px'}, + {at: 0, expect: '100px 200px'}, + {at: 0.25, expect: '125px 175px'}, + {at: 0.5, expect: '150px 150px'}, + {at: 0.75, expect: '175px 125px'}, + {at: 1, expect: '200px 100px'}, + {at: 1.25, expect: '225px 75px'}, +]); + +test_composition({ + property: 'offset-position', + underlying: '40px 60px', + addFrom: '60px 140px', + replaceTo: '200px 100px', +}, [ + {at: -0.25, expect: '75px 225px'}, + {at: 0, expect: '100px 200px'}, + {at: 0.25, expect: '125px 175px'}, + {at: 0.5, expect: '150px 150px'}, + {at: 0.75, expect: '175px 125px'}, + {at: 1, expect: '200px 100px'}, + {at: 1.25, expect: '225px 75px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/motion/animation/offset-position-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-position-interpolation.html new file mode 100644 index 0000000000..9faaf9487a --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-position-interpolation.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-position interpolation</title> + <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property"> + <meta name="assert" content="offset-position supports <position> animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + <style> + .parent { + offset-position: 30px 10px; + } + .target { + offset-position: 10px 30px; + } + </style> + </head> + <body> + <script> + test_interpolation({ + property: 'offset-position', + from: '220px 240px', + to: '300px 400px', + }, [ + {at: -1, expect: '140px 80px'}, + {at: 0, expect: '220px 240px'}, + {at: 0.125, expect: '230px 260px'}, + {at: 0.875, expect: '290px 380px'}, + {at: 1, expect: '300px 400px'}, + {at: 2, expect: '380px 560px'} + ]); + + test_interpolation({ + property: 'offset-position', + from: 'left 480px top 400px', + to: 'right -140% bottom -60%', + }, [ + {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%)'}, + {at: 0, expect: 'left 480px top 400px'}, + {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%)'}, + {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px)'}, + {at: 1, expect: 'right -140% bottom -60%'}, + {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px)'} + ]); + + test_interpolation({ + property: 'offset-position', + from: 'left top', + to: 'left 8px bottom 20%', + }, [ + {at: -1, expect: '-8px -80%'}, + {at: 0, expect: 'left top'}, + {at: 0.125, expect: '1px 10%'}, + {at: 0.875, expect: '7px 70%'}, + {at: 1, expect: 'left 8px bottom 20%'}, + {at: 2, expect: '16px 160%'} + ]); + + test_no_interpolation({ + property: 'offset-position', + from: 'right 10px top 20%', + to: 'auto' + }); + + test_interpolation({ + property: 'offset-position', + from: neutralKeyframe, + to: '20px 20px', + }, [ + {at: -0.3, expect: '7px 33px'}, + {at: 0, expect: '10px 30px'}, + {at: 0.3, expect: '13px 27px'}, + {at: 0.6, expect: '16px 24px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '25px 15px'}, + ]); + + test_no_interpolation({ + property: 'offset-position', + from: 'initial', + to: '20px 20px', + }); + + test_interpolation({ + property: 'offset-position', + from: 'inherit', + to: '20px 20px', + }, [ + {at: -0.3, expect: '33px 7px'}, + {at: 0, expect: '30px 10px'}, + {at: 0.3, expect: '27px 13px'}, + {at: 0.6, expect: '24px 16px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '15px 25px'}, + ]); + + test_no_interpolation({ + property: 'offset-position', + from: 'unset', + to: '20px 20px', + }); + + test_interpolation({ + property: 'offset-position', + from: '0% 50%', + to: '100% 150%' + }, [ + {at: -0.3, expect: '-30% 20%'}, + {at: 0, expect: '0% 50%'}, + {at: 0.3, expect: '30% 80%'}, + {at: 0.6, expect: '60% 110%'}, + {at: 1, expect: '100% 150%'}, + {at: 1.5, expect: '150% 200%'} + ]); + + test_no_interpolation({ + property: 'offset-position', + from: 'auto', + to: '20px 20px', + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/offset-rotate-composition.html b/testing/web-platform/tests/css/motion/animation/offset-rotate-composition.html new file mode 100644 index 0000000000..bf60c19abe --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-rotate-composition.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>offset-rotate composition</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property"> +<meta name="assert" content="offset-rotate supports animation."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +// Angle rotations compose. +test_composition({ + property: 'offset-rotate', + underlying: '20deg', + addFrom: '10deg', + addTo: '20deg', +}, [ + {at: -0.3, expect: '27deg'}, + {at: 0, expect: '30deg'}, + {at: 0.3, expect: '33deg'}, + {at: 0.6, expect: '36deg'}, + {at: 1, expect: '40deg'}, + {at: 1.5, expect: '45deg'}, +]); + +// Angle rotations don't compose with underlying 'auto'. +test_composition({ + property: 'offset-rotate', + underlying: 'auto 20deg', + addFrom: '10deg', + addTo: '20deg', +}, [ + {at: -0.3, expect: '7deg'}, + {at: 0, expect: '10deg'}, + {at: 0.3, expect: '13deg'}, + {at: 0.6, expect: '16deg'}, + {at: 1, expect: '20deg'}, + {at: 1.5, expect: '25deg'}, +]); + +// Auto rotations compose with underlying 'auto'. +test_composition({ + property: 'offset-rotate', + underlying: 'auto 20deg', + addFrom: 'reverse 10deg', + addTo: 'auto 20deg', +}, [ + {at: -0.3, expect: 'auto 261deg'}, + {at: 0, expect: 'auto 210deg'}, + {at: 0.3, expect: 'auto 159deg'}, + {at: 0.6, expect: 'auto 108deg'}, + {at: 1, expect: 'auto 40deg'}, + {at: 1.5, expect: 'auto -45deg'}, +]); + +// When we can't interpolate, we can't compose. +test_composition({ + property: 'offset-rotate', + underlying: '20deg', + addFrom: 'reverse 10deg', + addTo: '20deg', +}, [ + {at: -0.3, expect: 'auto 190deg'}, + {at: 0, expect: 'auto 190deg'}, + {at: 0.3, expect: 'auto 190deg'}, + {at: 0.6, expect: '40deg'}, + {at: 1, expect: '40deg'}, + {at: 1.5, expect: '40deg'}, +]); + +test_composition({ + property: 'offset-rotate', + underlying: '20deg', + replaceFrom: 'reverse 10deg', + addTo: '20deg', +}, [ + {at: -0.3, expect: 'auto 190deg'}, + {at: 0, expect: 'auto 190deg'}, + {at: 0.3, expect: 'auto 190deg'}, + {at: 0.6, expect: '40deg'}, + {at: 1, expect: '40deg'}, + {at: 1.5, expect: '40deg'}, +]); + +// Angle rotations compose with underlying angle. +test_composition({ + property: 'offset-rotate', + underlying: '20deg', + addFrom: '10deg', + replaceTo: '10deg', +}, [ + {at: -0.3, expect: '36deg'}, + {at: 0, expect: '30deg'}, + {at: 0.3, expect: '24deg'}, + {at: 0.6, expect: '18deg'}, + {at: 1, expect: '10deg'}, + {at: 1.5, expect: '0deg'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html new file mode 100644 index 0000000000..55845108eb --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html @@ -0,0 +1,242 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-rotate interpolation</title> + <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property"> + <meta name="assert" content="offset-rotate supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <style> + .parent { + offset-rotate: 30deg; + } + .target { + width: 80px; + height: 80px; + display: inline-block; + background-color: black; + margin-right: 5px; + offset-rotate: 10deg; + } + .expected { + background-color: green; + margin-right: 15px; + } + </style> + <body> + <script> + test_interpolation({ + property: 'offset-rotate', + from: '100deg', + to: '180deg', + }, [ + {at: -1, expect: '20deg'}, + {at: 0, expect: '100deg'}, + {at: 0.125, expect: '110deg'}, + {at: 0.875, expect: '170deg'}, + {at: 1, expect: '180deg'}, + {at: 2, expect: '260deg'} + ]); + + test_interpolation({ + property: 'offset-rotate', + from: 'auto 45deg', + to: 'auto 125deg', + }, [ + {at: -1, expect: 'auto -35deg'}, + {at: 0, expect: 'auto 45deg'}, + {at: 0.125, expect: 'auto 55deg'}, + {at: 0.875, expect: 'auto 115deg'}, + {at: 1, expect: 'auto 125deg'}, + {at: 2, expect: 'auto 205deg'} + ]); + + test_interpolation({ + property: 'offset-rotate', + from: 'auto 170deg', + to: '100grad auto', + }, [ + {at: -1, expect: 'auto 250deg'}, + {at: 0, expect: 'auto 170deg'}, + {at: 0.125, expect: 'auto 160deg'}, + {at: 0.875, expect: 'auto 100deg'}, + {at: 1, expect: '100grad auto'}, + {at: 2, expect: 'auto 10deg'} + ]); + + test_interpolation({ + property: 'offset-rotate', + from: 'auto -280deg', + to: 'auto calc(90deg - 0.5turn - 300grad + 0rad)', + }, [ + {at: -1, expect: 'auto -200deg'}, + {at: 0, expect: 'auto -280deg'}, + {at: 0.125, expect: 'auto -290deg'}, + {at: 0.875, expect: 'auto -350deg'}, + {at: 1, expect: 'auto calc(90deg - 0.5turn - 300grad + 0rad)'}, + {at: 2, expect: 'auto -440deg'} + ]); + + test_interpolation({ + property: 'offset-rotate', + from: 'auto 100deg', + to: 'reverse', + }, [ + {at: -1, expect: 'auto 20deg'}, + {at: 0, expect: 'auto 100deg'}, + {at: 0.125, expect: 'auto 110deg'}, + {at: 0.875, expect: 'auto 170deg'}, + {at: 1, expect: 'reverse'}, + {at: 2, expect: 'auto 260deg'} + ]); + + // No interpolation between auto/reverse and angle. + test_no_interpolation({ + property: 'offset-rotate', + from: 'reverse 90deg', + to: '360deg', + }); + + test_no_interpolation({ + property: 'offset-rotate', + from: '6rad', + to: 'auto', + }); + + // Neutral keyframes use the inline style. + test_interpolation({ + property: 'offset-rotate', + from: neutralKeyframe, + to: '20deg', + }, [ + {at: -0.3, expect: '7deg'}, + {at: 0, expect: '10deg'}, + {at: 0.3, expect: '13deg'}, + {at: 0.6, expect: '16deg'}, + {at: 1, expect: '20deg'}, + {at: 1.5, expect: '25deg'}, + ]); + + // No interpolation to an angle from the initial value 'auto'. + test_no_interpolation({ + property: 'offset-rotate', + from: 'initial', + to: '20deg', + }); + + // 'inherit' keyframes use the parent style. + test_interpolation({ + property: 'offset-rotate', + from: 'inherit', + to: '20deg', + }, [ + {at: -0.3, expect: '33deg'}, + {at: 0, expect: '30deg'}, + {at: 0.3, expect: '27deg'}, + {at: 0.6, expect: '24deg'}, + {at: 1, expect: '20deg'}, + {at: 1.5, expect: '15deg'}, + ]); + + // No interpolation to an angle from the initial value 'auto'. + test_no_interpolation({ + property: 'offset-rotate', + from: 'unset', + to: '20deg', + }); + + // Interpolation between angles. + test_interpolation({ + property: 'offset-rotate', + from: '10deg', + to: '50deg' + }, [ + {at: -0.3, expect: '-2deg'}, + {at: 0, expect: '10deg'}, + {at: 0.3, expect: '22deg'}, + {at: 0.6, expect: '34deg'}, + {at: 1, expect: '50deg'}, + {at: 1.5, expect: '70deg'}, + ]); + + // Regression test for crbug.com/918430. + test_interpolation({ + property: 'offset-rotate', + from: '800deg', + to: '900deg' + }, [ + {at: -3.40282e+38, expect: '-3.40282e+38deg'}, + ]); + + // Interpolation between auto angles. + test_interpolation({ + property: 'offset-rotate', + from: 'auto 10deg', + to: 'auto 50deg' + }, [ + {at: -0.3, expect: 'auto -2deg'}, + {at: 0, expect: 'auto 10deg'}, + {at: 0.3, expect: 'auto 22deg'}, + {at: 0.6, expect: 'auto 34deg'}, + {at: 1, expect: 'auto 50deg'}, + {at: 1.5, expect: 'auto 70deg'}, + ]); + + // 'reverse' is like 'auto 180deg'. + test_interpolation({ + property: 'offset-rotate', + from: 'reverse -170deg', + to: 'reverse -130deg' + }, [ + {at: -0.3, expect: 'auto -2deg'}, + {at: 0, expect: 'auto 10deg'}, + {at: 0.3, expect: 'auto 22deg'}, + {at: 0.6, expect: 'auto 34deg'}, + {at: 1, expect: 'auto 50deg'}, + {at: 1.5, expect: 'auto 70deg'}, + ]); + + // Interpolation between 'auto' and 'reverse'. + test_interpolation({ + property: 'offset-rotate', + from: 'auto 10deg', + to: 'reverse -130deg' + }, [ + {at: -0.3, expect: 'auto -2deg'}, + {at: 0, expect: 'auto 10deg'}, + {at: 0.3, expect: 'auto 22deg'}, + {at: 0.6, expect: 'auto 34deg'}, + {at: 1, expect: 'auto 50deg'}, + {at: 1.5, expect: 'auto 70deg'}, + ]); + test_interpolation({ + property: 'offset-rotate', + from: 'reverse -170deg', + to: 'auto 50deg' + }, [ + {at: -0.3, expect: 'auto -2deg'}, + {at: 0, expect: 'auto 10deg'}, + {at: 0.3, expect: 'auto 22deg'}, + {at: 0.6, expect: 'auto 34deg'}, + {at: 1, expect: 'auto 50deg'}, + {at: 1.5, expect: 'auto 70deg'}, + ]); + + // No interpolation between auto/reverse and angle. + test_no_interpolation({ + property: 'offset-rotate', + from: 'auto 200deg', + to: '300deg' + }); + test_no_interpolation({ + property: 'offset-rotate', + from: '300deg', + to: 'reverse 20deg' + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-distance-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-distance-interpolation-001.html new file mode 100644 index 0000000000..88441f5b54 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-distance-interpolation-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>offset-distance interpolation</title> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> + <link rel="match" href="offset-path-path-interpolation-ref.html"> + <meta name="assert" content="offset-distance supports animation."> + <style> + @keyframes anim { + from { offset-distance: 0%; } + to { offset-distance: 100%; } + } + #target { + position: absolute; + left: 300px; + top: 0px; + width: 300px; + height: 200px; + background-color: lime; + transform-origin: 0px 0px; + offset-path: path("m 50 150 h 100"); + animation: anim 10s -5s paused linear; + } + </style> + </head> + <body> + <div id="target"></div> + </body> + <script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-001.html new file mode 100644 index 0000000000..0f27651896 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>offset-path path() interpolation</title> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> + <link rel="match" href="offset-path-path-interpolation-ref.html"> + <meta name="assert" content="offset-path path supports animation."> + <style> + @keyframes anim { + from { offset-path: path("m 100 100 l 100 100"); } + to { offset-path: path("m 100 200 l 100 -100"); } + } + #target { + position: absolute; + left: 300px; + top: 0px; + width: 300px; + height: 200px; + background-color: lime; + transform-origin: 0px 0px; + animation: anim 10s -5s paused linear; + } + </style> + </head> + <body> + <div id="target"></div> + </body> + <script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-ref.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-ref.html new file mode 100644 index 0000000000..9bc2409061 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>offset-path path interpolation reference</title> + <style> + #target { + position: absolute; + left: 300px; + top: 0px; + width: 300px; + height: 200px; + background-color: lime; + transform-origin: 0px 0px; + offset-path: path("M 100 150 L 200 150"); + } + </style> + </head> + <body> + <div id="target"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-001.html new file mode 100644 index 0000000000..c554264032 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>CSS Motion Path: Combined transformation matrix interpolation</title> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <link rel="match" href="offset-path-with-transforms-ref.html"> + <meta name="assert" content="This tests animating combined transformation matrix."> + <style> + @keyframes anim { + to { + translate: 0px 100px; + offset-distance: 100%; + transform: translateX(-100px); + } + } + #target { + position: absolute; + width: 100px; + height: 50px; + background-color: lime; + offset-path: path("M25 0v100"); + animation: anim 10s -5s paused linear; + } + </style> + </head> + <body onload="load()"> + <div id="target"></div> + <div style='width: 50px; height: 100px; background-color: red;'></div> + </body> + <script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-ref.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-ref.html new file mode 100644 index 0000000000..413369e0ef --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Motion Path: Combined transformation matrix interpolation reference</title> + <style> + #target { + width: 50px; + height: 100px; + background-color: lime; + } + </style> + </head> + <body> + <div id="target"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-rotate-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-rotate-interpolation-001.html new file mode 100644 index 0000000000..360caeea68 --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-rotate-interpolation-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>offset-rotate interpolation</title> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property"> + <link rel="match" href="offset-path-path-interpolation-ref.html"> + <meta name="assert" content="offset-rotate supports animation."> + <style> + @keyframes anim { + from { offset-rotate: auto; } + to { offset-rotate: reverse; } + } + #target { + position: absolute; + left: 300px; + top: 0px; + width: 300px; + height: 200px; + background-color: lime; + transform-origin: 0px 0px; + offset-path: path("m 100 150 v -100"); + animation: anim 10s -5s paused linear; + } + </style> + </head> + <body> + <div id="target"></div> + </body> + <script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); + </script> +</html> |