Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-shapes/animation
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
5 files changed, 565 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/animation/shape-image-threshold-interpolation.html b/testing/web-platform/tests/css/css-shapes/animation/shape-image-threshold-interpolation.html
new file mode 100644
index 0000000000..edac744592
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/animation/shape-image-threshold-interpolation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>shape-image-threshold interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property">
+<meta name="assert" content="shape-image-threshold supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  shape-image-threshold: 0.4;
+}
+.target {
+  shape-image-threshold: 0.6;
+}
+</style>
+
+<body></body>
+
+<script>
+test_interpolation({
+  property: 'shape-image-threshold',
+  from: neutralKeyframe,
+  to: '0.8',
+}, [
+  {at: -1.5, expect: '0.3'},
+  {at: -0.5, expect: '0.5'},
+  {at: 0, expect: '0.6'},
+  {at: 0.5, expect: '0.7'},
+  {at: 1, expect: '0.8'},
+  {at: 1.5, expect: '0.9'},
+]);
+
+test_interpolation({
+  property: 'shape-image-threshold',
+  from: 'initial',
+  to: '0.8',
+}, [
+  {at: -1.5, expect: '0'},
+  {at: -0.5, expect: '0'},
+  {at: 0, expect: '0'},
+  {at: 0.5, expect: '0.4'},
+  {at: 1, expect: '0.8'},
+  {at: 1.5, expect: '1'},
+]);
+
+test_interpolation({
+  property: 'shape-image-threshold',
+  from: 'inherit',
+  to: '0.8',
+}, [
+  {at: -1.5, expect: '0'},
+  {at: -0.5, expect: '0.2'},
+  {at: 0, expect: '0.4'},
+  {at: 0.5, expect: '0.6'},
+  {at: 1, expect: '0.8'},
+  {at: 1.5, expect: '1'},
+]);
+
+test_interpolation({
+  property: 'shape-image-threshold',
+  from: 'unset',
+  to: '0.8',
+}, [
+  {at: -1.5, expect: '0'},
+  {at: -0.5, expect: '0'},
+  {at: 0, expect: '0'},
+  {at: 0.5, expect: '0.4'},
+  {at: 1, expect: '0.8'},
+  {at: 1.5, expect: '1'},
+]);
+
+test_interpolation({
+  property: 'shape-image-threshold',
+  from: '0.5',
+  to: '1'
+}, [
+  {at: -1.5, expect: '0'},
+  {at: -0.5, expect: '0.25'},
+  {at: 0, expect: '0.5'},
+  {at: 0.5, expect: '0.75'},
+  {at: 1, expect: '1'},
+  {at: 1.5, expect: '1'}
+]);
+</script>
diff --git a/testing/web-platform/tests/css/css-shapes/animation/shape-margin-composition.html b/testing/web-platform/tests/css/css-shapes/animation/shape-margin-composition.html
new file mode 100644
index 0000000000..395bad063f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/animation/shape-margin-composition.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>shape-margin composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property">
+<meta name="assert" content="shape-margin supports animation by computed value">
+
+<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: 'shape-margin',
+  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: 'shape-margin',
+  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'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'shape-margin',
+  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: 'shape-margin',
+  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/css-shapes/animation/shape-margin-interpolation.html b/testing/web-platform/tests/css/css-shapes/animation/shape-margin-interpolation.html
new file mode 100644
index 0000000000..48b3d0c460
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/animation/shape-margin-interpolation.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>shape-margin interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property">
+<meta name="assert" content="shape-margin supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  shape-margin: 30px;
+}
+.target {
+  shape-margin: 10px;
+}
+</style>
+
+<body></body>
+
+<script>
+test_interpolation({
+  property: 'shape-margin',
+  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: 'shape-margin',
+  from: 'initial',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '0px'},
+  {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: 'shape-margin',
+  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: 'shape-margin',
+  from: 'unset',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '0px'},
+  {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: 'shape-margin',
+  from: '0px',
+  to: '100px'
+}, [
+  {at: -0.3, expect: '0px'}, // CSS shape-margin can't be negative.
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '30px'},
+  {at: 0.6, expect: '60px'},
+  {at: 1, expect: '100px'},
+  {at: 1.5, expect: '150px'},
+]);
+</script>
diff --git a/testing/web-platform/tests/css/css-shapes/animation/shape-outside-composition.html b/testing/web-platform/tests/css/css-shapes/animation/shape-outside-composition.html
new file mode 100644
index 0000000000..0115148ec1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/animation/shape-outside-composition.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>shape-outside composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property">
+<meta name="assert" content="shape-outside supports animation as <basic-shape> or discrete">
+
+<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: 'shape-outside',
+  underlying: 'circle(100px at 25px 25%)',
+  addFrom: 'circle(10px at 25px 75%)',
+  addTo: 'circle(50px at 50px center)',
+}, [
+  {at: -0.3, expect: 'circle(98px at 42.5px 107.5%)'},
+  {at: 0, expect: 'circle(110px at 50px 100%)'},
+  {at: 0.3, expect: 'circle(122px at 57.5px 92.5%)'},
+  {at: 0.6, expect: 'circle(134px at 65px 85%)'},
+  {at: 1, expect: 'circle(150px at 75px 75%)'},
+  {at: 1.5, expect: 'circle(170px at 87.5px 62.5%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'circle(100px at 20px 20%)',
+  addFrom: 'circle(50px at 50px 50%)',
+  replaceTo: 'circle(50% at 150px 150%)',
+}, [
+  {at: -0.3, expect: 'circle(calc(195px + -15%) at 46px 46%)'},
+  {at: 0, expect: 'circle(calc(150px + 0%) at 70px 70%)'},
+  {at: 0.3, expect: 'circle(calc(105px + 15%) at 94px 94%)'},
+  {at: 0.6, expect: 'circle(calc(60px + 30%) at 118px 118%)'},
+  {at: 1, expect: 'circle(50% at 150px 150%)'},
+  {at: 1.5, expect: 'circle(calc(-75px + 75%) at 190px 190%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'circle(farthest-side at 25px 75%)',
+  addFrom: 'circle(farthest-side at 25px 75%)',
+  addTo: 'circle(farthest-side at 50px center)',
+}, [
+  {at: 0.25, expect: 'circle(farthest-side at 25px 75%)'},
+  {at: 0.75, expect: 'circle(farthest-side at 50px 50%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'circle(50px at 10px 20px)',
+  addFrom: 'circle(50px at 10px 20px)',
+  addTo: 'circle(farthest-side at 30px 40px)',
+}, [
+  {at: 0.25, expect: 'circle(100px at 20px 40px)'},
+  {at: 0.75, expect: 'circle(farthest-side at 30px 40px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'ellipse(10px 20px at 30px 40px)',
+  addFrom: 'ellipse(40px 30px at 20px 10px)',
+  addTo: 'ellipse(140px 130px at 120px 110px)',
+}, [
+  {at: -0.3, expect: 'ellipse(20px 20px at 20px 20px)'},
+  {at: 0, expect: 'ellipse(50px 50px at 50px 50px)'},
+  {at: 0.3, expect: 'ellipse(80px 80px at 80px 80px)'},
+  {at: 0.6, expect: 'ellipse(110px 110px at 110px 110px)'},
+  {at: 1, expect: 'ellipse(150px 150px at 150px 150px)'},
+  {at: 1.5, expect: 'ellipse(200px 200px at 200px 200px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'ellipse(10px 20px at 30px 40px)',
+  replaceFrom: 'ellipse(40px 30px at 20px 10px)',
+  addTo: 'ellipse(40px 30px at 20px 10px)',
+}, [
+  {at: -0.3, expect: 'ellipse(37px 24px at 11px -2px)'},
+  {at: 0, expect: 'ellipse(40px 30px at 20px 10px)'},
+  {at: 0.3, expect: 'ellipse(43px 36px at 29px 22px)'},
+  {at: 0.6, expect: 'ellipse(46px 42px at 38px 34px)'},
+  {at: 1, expect: 'ellipse(50px 50px at 50px 50px)'},
+  {at: 1.5, expect: 'ellipse(55px 60px at 65px 70px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'ellipse(25px 75%)',
+  addFrom: 'ellipse()',
+  addTo: 'ellipse(closest-side farthest-side)',
+}, [
+  {at: 0.25, expect: 'ellipse(at 50% 50%)'},
+  {at: 0.75, expect: 'ellipse(closest-side farthest-side at 50% 50%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'inset(20px)',
+  addFrom: 'inset(20px)',
+  addTo: 'inset(40%)',
+}, [
+  {at: -0.3, expect: 'inset(calc(46px + -12%))'},
+  {at: 0, expect: 'inset(calc(40px + 0%))'},
+  {at: 0.3, expect: 'inset(calc(34px + 12%))'},
+  {at: 0.6, expect: 'inset(calc(28px + 24%))'},
+  {at: 1, expect: 'inset(calc(20px + 40%))'},
+  {at: 1.5, expect: 'inset(calc(10px + 60%))'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)',
+  addFrom: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)',
+  replaceTo: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)',
+}, [
+  {at: -0.3, expect: 'inset(-28px -26px -24px -22px round 0px 10px 30px 50px / 70px 90px 110px 130px)'},
+  {at: 0, expect: 'inset(2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px)'},
+  {at: 0.25, expect: 'inset(27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px)'},
+  {at: 0.75, expect: 'inset(77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px)'},
+  {at: 1, expect: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)'},
+  {at: 1.5, expect: 'inset(152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'inset(1px 2px round 100px 200px)',
+  addFrom: 'inset(1px 2px round 100px 200px)',
+  addTo: 'inset(101px 102px 101px 102px)',
+}, [
+  {at: -0.3, expect: 'inset(-28px -26px round 230px 460px)'},
+  {at: 0, expect: 'inset(2px 4px round 200px 400px)'},
+  {at: 0.3, expect: 'inset(32px 34px round 170px 340px)'},
+  {at: 0.6, expect: 'inset(62px 64px round 140px 280px)'},
+  {at: 1, expect: 'inset(102px 104px round 100px 200px)'},
+  {at: 1.5, expect: 'inset(152px 154px round 50px 100px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'polygon(10px 20%, 30px 40%)',
+  addFrom: 'polygon(10px 20%, 30px 40%)',
+  addTo: 'polygon(110px 120%, 130px 140%)',
+}, [
+  {at: -0.3, expect: 'polygon(-10px 10%, 30px 50%)'},
+  {at: 0, expect: 'polygon(20px 40%, 60px 80%)'},
+  {at: 0.3, expect: 'polygon(50px 70%, 90px 110%)'},
+  {at: 0.6, expect: 'polygon(80px 100%, 120px 140%)'},
+  {at: 1, expect: 'polygon(120px 140%, 160px 180%)'},
+  {at: 1.5, expect: 'polygon(170px 190%, 210px 230%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'polygon(evenodd, 10px 20px)',
+  addFrom: 'polygon(evenodd, 10px 20px)',
+  addTo: 'polygon(evenodd, 110px 120px)',
+}, [
+  {at: -0.3, expect: 'polygon(evenodd, -10px 10px)'},
+  {at: 0, expect: 'polygon(evenodd, 20px 40px)'},
+  {at: 0.3, expect: 'polygon(evenodd, 50px 70px)'},
+  {at: 0.6, expect: 'polygon(evenodd, 80px 100px)'},
+  {at: 1, expect: 'polygon(evenodd, 120px 140px)'},
+  {at: 1.5, expect: 'polygon(evenodd, 170px 190px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'polygon(evenodd, 10px 20px)',
+  addFrom: 'polygon(evenodd, 10px 20px)',
+  addTo: 'polygon(nonzero, 30px 40px)',
+}, [
+  {at: 0.25, expect: 'polygon(evenodd, 20px 40px)'},
+  {at: 0.75, expect: 'polygon(30px 40px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'polygon(10px 20px, 30px 40px)',
+  addFrom: 'polygon(10px 20px, 30px 40px)',
+  addTo: 'polygon(30px 40px)',
+}, [
+  {at: 0.25, expect: 'polygon(20px 40px, 60px 80px)'},
+  {at: 0.75, expect: 'polygon(30px 40px)'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-shapes/animation/shape-outside-interpolation.html b/testing/web-platform/tests/css/css-shapes/animation/shape-outside-interpolation.html
new file mode 100644
index 0000000000..3380acdba0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/animation/shape-outside-interpolation.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>shape-outside interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property">
+<meta name="assert" content="shape-outside supports animation as <basic-shape> or discrete">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  shape-outside: circle(80% at 30% 10%);
+}
+.target {
+  shape-outside: circle(60% at 10% 30%);
+}
+</style>
+
+<body></body>
+
+<script>
+/* TODO: add inset test once blend() works for it */
+
+test_interpolation({
+  property: 'shape-outside',
+  from: neutralKeyframe,
+  to: 'circle(40% at 20% 20%)',
+}, [
+  {at: -0.3, expect: 'circle(66% at 7% 33%)'},
+  {at: 0, expect: 'circle(60% at 10% 30%)'},
+  {at: 0.3, expect: 'circle(54% at 13% 27%)'},
+  {at: 0.6, expect: 'circle(48% at 16% 24%)'},
+  {at: 1, expect: 'circle(40% at 20% 20%)'},
+  {at: 1.5, expect: 'circle(30% at 25% 15%)'},
+]);
+
+test_no_interpolation({
+  property: 'shape-outside',
+  from: 'initial',
+  to: 'circle(40% at 20% 20%)',
+});
+
+test_interpolation({
+  property: 'shape-outside',
+  from: 'inherit',
+  to: 'circle(40% at 20% 20%)',
+}, [
+  {at: -0.3, expect: 'circle(92% at 33% 7%)'},
+  {at: 0, expect: 'circle(80% at 30% 10%)'},
+  {at: 0.3, expect: 'circle(68% at 27% 13%)'},
+  {at: 0.6, expect: 'circle(56% at 24% 16%)'},
+  {at: 1, expect: 'circle(40% at 20% 20%)'},
+  {at: 1.5, expect: 'circle(20% at 15% 25%)'},
+]);
+
+test_no_interpolation({
+  property: 'shape-outside',
+  from: 'unset',
+  to: 'circle(40% at 20% 20%)',
+});
+
+test_interpolation({
+  property: 'shape-outside',
+  from: 'circle(100% at 0% 0%)',
+  to: 'circle(50% at 25% 25%)',
+}, [
+  {at: -0.3, expect: 'circle(115% at -7.5% -7.5%)'},
+  {at: 0, expect: 'circle(100% at 0% 0%)'},
+  {at: 0.3, expect: 'circle(85% at 7.5% 7.5%)'},
+  {at: 0.6, expect: 'circle(70% at 15% 15%)'},
+  {at: 1, expect: 'circle(50% at 25% 25%)'},
+  {at: 1.5, expect: 'circle(25% at 37.5% 37.5%)'}
+]);
+
+test_interpolation({
+  property: 'shape-outside',
+  from: 'ellipse(100% 100% at 0% 0%)',
+  to: 'ellipse(50% 50% at 25% 25%)',
+}, [
+  {at: -0.3, expect: 'ellipse(115% 115% at -7.5% -7.5%)'},
+  {at: 0, expect: 'ellipse(100% 100% at 0% 0%)'},
+  {at: 0.3, expect: 'ellipse(85% 85% at 7.5% 7.5%)'},
+  {at: 0.6, expect: 'ellipse(70% 70% at 15% 15%)'},
+  {at: 1, expect: 'ellipse(50% 50% at 25% 25%)'},
+  {at: 1.5, expect: 'ellipse(25% 25% at 37.5% 37.5%)'}
+]);
+
+test_interpolation({
+  property: 'shape-outside',
+  from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)',
+  to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
+}, [
+  {at: -0.3, expect: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'},
+  {at: 0, expect: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'},
+  {at: 0.3, expect: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'},
+  {at: 0.6, expect: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'},
+  {at: 1, expect: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'},
+  {at: 1.5, expect: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'}
+]);
+
+test_no_interpolation({
+  property: 'shape-outside',
+  from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)',
+  to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
+});
+
+test_interpolation({
+  property: 'shape-outside',
+  from: 'inset(100%)',
+  to: 'inset(120%)',
+}, [
+  {at: -0.3, expect: 'inset(94%)'},
+  {at: 0, expect: 'inset(100%)'},
+  {at: 0.3, expect: 'inset(106%)'},
+  {at: 0.6, expect: 'inset(112%)'},
+  {at: 1, expect: 'inset(120%)'},
+  {at: 1.5, expect: 'inset(130%)'},
+]);
+
+test_no_interpolation({
+  property: 'shape-outside',
+  from: 'none',
+  to: 'ellipse(100% 100% at 0% 0%)',
+});
+
+// TODO: add intermediate keyframe tests when CSS shapes position computed values are cleaned up
+test_interpolation({
+  property: 'shape-outside',
+  from: 'circle(25% at right 5% bottom 15px)',
+  to: 'circle(45% at right 25% bottom 35px)',
+}, [
+  {at: 0.25, expect: 'circle(30% at 90% calc(-20px + 100%))'},
+  {at: 0.5, expect: 'circle(35% at 85% calc(-25px + 100%))'},
+  {at: 0.75, expect: 'circle(40% at 80% calc(-30px + 100%))'},
+]);
+</script>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-shapes/animation
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip