css/css-masking/animations/clip-path-interpolation-shape.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!DOCTYPE html>
 <meta charset="UTF-8">
 <meta charset="UTF-8">
 <title>clip-path-interpolation</title>
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
 <meta name="assert" content="clip-path supports animation">

 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/interpolation-testcommon.js"></script>

 <style>
 html {
   font-size: 16px;
   font-family: Ahem;
 }

 .parent {
   clip-path: shape(from -5px 5px, move to 5% 1px);
   padding: 10px;
 }

 .target {
   display: inline-block;
   width: 100px;
   height: 100px;
   background-color: black;
   clip-path: shape(from 5px 5px, line to 10px 10%);
 }

 .expected {
   background-color: green;
 }
 </style>
 <body>
 <script>
 test_interpolation({
   property: 'clip-path',
   from: neutralKeyframe,
   to: 'shape(from -5px 5px, line to 20px 20%)',
 }, [
   {at: -0.3, expect: 'shape(from 8px 5px, line to 7px 7%)'},
   {at: 0, expect: 'shape(from 5px 5px, line to 10px 10%)'},
   {at: 0.6, expect: 'shape(from -1px 5px, line to 16px 16%)'},
   {at: 1, expect: 'shape(from -5px 5px, line to 20px 20%)'},
   {at: 1.5, expect: 'shape(from -10px 5px, line to 25px 25%)'},
 ]);

 test_no_interpolation({
   property: 'clip-path',
   from: 'initial',
   to: 'shape(from 8px 5px, line to 7px 7%)',
 });

 test_interpolation({
   property: 'clip-path',
   from: 'inherit',
   to: 'shape(from 15% 15px, move to 20% -10px)',
 }, [
   {at: -0.3, expect: 'shape(from calc(-4.5% - 6.5px) 2px, move to 0.5% 4.3px)'},
   {at: 0, expect: 'shape(from calc(0% - 5px) 5px, move to 5% 1px)'},
   {at: 0.5, expect: 'shape(from calc(7.5% - 2.5px) 10px, move to 12.5% -4.5px)'},
   {at: 1, expect: 'shape(from 15% 15px, move to 20% -10px'},
   {at: 1.5, expect: 'shape(from calc(22.5% + 2.5px) 20px, move to 27.5% -15.5px)'},
 ]);

 test_no_interpolation({
   property: 'clip-path',
   from: 'unset',
   to: 'shape(from 10px 10px, close)',
 });

 test_no_interpolation({
   property: 'clip-path',
   from: 'none',
   to: 'shape(from 10px 10px, close)',
 });

 test_no_interpolation({
   property: 'clip-path',
   from: 'shape(from 10px 10px, move to 10% 10%)',
   to: 'shape(from 10px 10px, close)',
 });


 test_interpolation({
   property: 'clip-path',
   from: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)',
   to: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)',
 }, [
   {at: -0.3, expect: 'shape(from 2% 2px, hline to -1%, vline to -2px, close)'},
   {at: 0, expect: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)'},
   {at: 0.5, expect: 'shape(from 10% 10px, hline to 15% , vline to -10px, close)'},
   {at: 1, expect: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)'},
   {at: 1.5, expect: 'shape(from 20% 20px, hline to 35%, vline to -20px, close)'},
 ]);

 test_interpolation({
   property: 'clip-path',
   from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)',
   to: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)',
 }, [
   {at: -0.3, expect: 'shape(from 2% 2px, curve to 7% 13px via -3% 86px, curve to 33% 17px via 17% 53px 34% 61px)'},
   {at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'},
   {at: 0.5, expect: 'shape(from 10% 10px, curve to 15% 5px via 5% 70px, curve to 25% 25px via 25% 45px 10% 85px)'},
   {at: 1, expect: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)'},
   {at: 1.5, expect: 'shape(from 20% 20px, curve to 25% -5px via 15% 50px, curve to 15% 35px via 35% 35px -20% 115px)'},
 ]);

 test_interpolation({
   property: 'clip-path',
   from: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)',
   to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)',
 }, [
   {at: -0.3, expect: 'shape(from 2% 2px, curve by 7% 13px via -3% 86px, curve by 33% 17px via 17% 53px 34% 61px)'},
   {at: 0, expect: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)'},
   {at: 0.5, expect: 'shape(from 10% 10px, curve by 15% 5px via 5% 70px, curve by 25% 25px via 25% 45px 10% 85px)'},
   {at: 1.5, expect: 'shape(from 20% 20px, curve by 25% -5px via 15% 50px, curve by 15% 35px via 35% 35px -20% 115px)'},
 ]);

 test_interpolation({
   property: 'clip-path',
   from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)',
   to: 'shape(from 15% 15px, smooth to 20% 0px via 10% 60px, smooth to 20% 30px)',
 }, [
   {at: -0.3, expect: 'shape(from 2% 2px, smooth to 7% 13px via -3% 86px, smooth to 33% 17px)'},
   {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'},
   {at: 0.5, expect: 'shape(from 10% 10px, smooth to 15% 5px via 5% 70px, smooth to 25% 25px)'},
   {at: 1.5, expect: 'shape(from 20% 20px, smooth to 25% -5px via 15% 50px, smooth to 15% 35px)'},
 ]);

 test_interpolation({
   property: 'clip-path',
   from: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)',
   to: 'shape(from 15% 15px, smooth by 20% 0px via 10% 60px, smooth by 20% 30px)',
 }, [
   {at: -0.3, expect: 'shape(from 2% 2px, smooth by 7% 13px via -3% 86px, smooth by 33% 17px)'},
   {at: 0, expect: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)'},
   {at: 0.5, expect: 'shape(from 10% 10px, smooth by 15% 5px via 5% 70px, smooth by 25% 25px)'},
   {at: 1.5, expect: 'shape(from 20% 20px, smooth by 25% -5px via 15% 50px, smooth by 15% 35px)'},
 ]);

 test_interpolation({
   property: 'clip-path',
   from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)',
   to: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px cw rotate 270deg small, arc to 25% 20px of 10px 5px small cw)'
 }, [
   {at: -0.3, expect: 'shape(from 2% 2px, arc to 18% -12px of 7px 17px ccw small, arc by 12% -2px of 33px 33px rotate -42deg cw large , arc to 25% 20px of 10px 5px ccw small)'},
   {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'},
   {at: 0.3, expect: 'shape(from 8% 8px, arc to 12% -18px of 13px 23px ccw small, arc by 18% -8px of 27px 27px rotate 102deg cw large, arc to 25% 20px of 10px 5px ccw small )'},
   {at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of 15px 25px ccw small, arc by 20% -10px of 25px rotate 150deg cw small, arc to 25% 20px of 10px 5px cw small)'},
   {at: 1, expect: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px rotate 270deg cw small, arc to 25% 20px of 10px 5px cw small)'},
   {at: 1.5, expect: 'shape(from 20% 20px, arc to 0% -30px of 25px 35px ccw small, arc by 30% -20px of 15px rotate 390deg cw small, arc to 25% 20px of 10px 5px cw small)'},
 ]);

 test_interpolation({
   property: 'clip-path',
   from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 1vh, close, vline by 3pt)',
   to: 'shape(from -5px 5px, hline to 20px, vline by 10%, hline by 1em, close, vline by 6pt)',
 }, [
   {at: -0.3, expect: 'shape(from 8px calc(-6.5% - 1.5px), hline to 7px, vline by calc(-3% + 208px), hline by 5.92px, close, vline by 2.8px)'},
   {at: 0, expect: 'shape(from 5px -5%, hline to 10px, vline by calc(0% + 160px), hline by 8.25px, close, vline by 4px)'},
   {at: 0.6, expect: 'shape(from -1px calc(-2% + 3px), hline to 16px, vline by calc(6% + 64px), hline by 12.9px, close ,vline by 6.4px)'},
   {at: 1, expect: 'shape(from -5px calc(0% + 5px), hline to 20px, vline by 10%, hline by 16px, close, vline by 8px)'},
   {at: 1.5, expect: 'shape(from -10px calc(2.5% + 7.5px), hline to 25px, vline by calc(15% - 80px), hline by 19.88px, close, vline by 10px)'},
 ]);

 </script>
 </body>
	<!DOCTYPE html>
	<meta charset="UTF-8">
	<meta charset="UTF-8">
	<title>clip-path-interpolation</title>
	<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
	<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
	<meta name="assert" content="clip-path supports animation">

	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="/css/support/interpolation-testcommon.js"></script>

	<style>
	html {
	font-size: 16px;
	font-family: Ahem;
	}

	.parent {
	clip-path: shape(from -5px 5px, move to 5% 1px);
	padding: 10px;
	}

	.target {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: black;
	clip-path: shape(from 5px 5px, line to 10px 10%);
	}

	.expected {
	background-color: green;
	}
	</style>
	<body>
	<script>
	test_interpolation({
	property: 'clip-path',
	from: neutralKeyframe,
	to: 'shape(from -5px 5px, line to 20px 20%)',
	}, [
	{at: -0.3, expect: 'shape(from 8px 5px, line to 7px 7%)'},
	{at: 0, expect: 'shape(from 5px 5px, line to 10px 10%)'},
	{at: 0.6, expect: 'shape(from -1px 5px, line to 16px 16%)'},
	{at: 1, expect: 'shape(from -5px 5px, line to 20px 20%)'},
	{at: 1.5, expect: 'shape(from -10px 5px, line to 25px 25%)'},
	]);

	test_no_interpolation({
	property: 'clip-path',
	from: 'initial',
	to: 'shape(from 8px 5px, line to 7px 7%)',
	});

	test_interpolation({
	property: 'clip-path',
	from: 'inherit',
	to: 'shape(from 15% 15px, move to 20% -10px)',
	}, [
	{at: -0.3, expect: 'shape(from calc(-4.5% - 6.5px) 2px, move to 0.5% 4.3px)'},
	{at: 0, expect: 'shape(from calc(0% - 5px) 5px, move to 5% 1px)'},
	{at: 0.5, expect: 'shape(from calc(7.5% - 2.5px) 10px, move to 12.5% -4.5px)'},
	{at: 1, expect: 'shape(from 15% 15px, move to 20% -10px'},
	{at: 1.5, expect: 'shape(from calc(22.5% + 2.5px) 20px, move to 27.5% -15.5px)'},
	]);

	test_no_interpolation({
	property: 'clip-path',
	from: 'unset',
	to: 'shape(from 10px 10px, close)',
	});

	test_no_interpolation({
	property: 'clip-path',
	from: 'none',
	to: 'shape(from 10px 10px, close)',
	});

	test_no_interpolation({
	property: 'clip-path',
	from: 'shape(from 10px 10px, move to 10% 10%)',
	to: 'shape(from 10px 10px, close)',
	});


	test_interpolation({
	property: 'clip-path',
	from: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)',
	to: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)',
	}, [
	{at: -0.3, expect: 'shape(from 2% 2px, hline to -1%, vline to -2px, close)'},
	{at: 0, expect: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)'},
	{at: 0.5, expect: 'shape(from 10% 10px, hline to 15% , vline to -10px, close)'},
	{at: 1, expect: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)'},
	{at: 1.5, expect: 'shape(from 20% 20px, hline to 35%, vline to -20px, close)'},
	]);

	test_interpolation({
	property: 'clip-path',
	from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)',
	to: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)',
	}, [
	{at: -0.3, expect: 'shape(from 2% 2px, curve to 7% 13px via -3% 86px, curve to 33% 17px via 17% 53px 34% 61px)'},
	{at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'},
	{at: 0.5, expect: 'shape(from 10% 10px, curve to 15% 5px via 5% 70px, curve to 25% 25px via 25% 45px 10% 85px)'},
	{at: 1, expect: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)'},
	{at: 1.5, expect: 'shape(from 20% 20px, curve to 25% -5px via 15% 50px, curve to 15% 35px via 35% 35px -20% 115px)'},
	]);

	test_interpolation({
	property: 'clip-path',
	from: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)',
	to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)',
	}, [
	{at: -0.3, expect: 'shape(from 2% 2px, curve by 7% 13px via -3% 86px, curve by 33% 17px via 17% 53px 34% 61px)'},
	{at: 0, expect: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)'},
	{at: 0.5, expect: 'shape(from 10% 10px, curve by 15% 5px via 5% 70px, curve by 25% 25px via 25% 45px 10% 85px)'},
	{at: 1.5, expect: 'shape(from 20% 20px, curve by 25% -5px via 15% 50px, curve by 15% 35px via 35% 35px -20% 115px)'},
	]);

	test_interpolation({
	property: 'clip-path',
	from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)',
	to: 'shape(from 15% 15px, smooth to 20% 0px via 10% 60px, smooth to 20% 30px)',
	}, [
	{at: -0.3, expect: 'shape(from 2% 2px, smooth to 7% 13px via -3% 86px, smooth to 33% 17px)'},
	{at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'},
	{at: 0.5, expect: 'shape(from 10% 10px, smooth to 15% 5px via 5% 70px, smooth to 25% 25px)'},
	{at: 1.5, expect: 'shape(from 20% 20px, smooth to 25% -5px via 15% 50px, smooth to 15% 35px)'},
	]);

	test_interpolation({
	property: 'clip-path',
	from: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)',
	to: 'shape(from 15% 15px, smooth by 20% 0px via 10% 60px, smooth by 20% 30px)',
	}, [
	{at: -0.3, expect: 'shape(from 2% 2px, smooth by 7% 13px via -3% 86px, smooth by 33% 17px)'},
	{at: 0, expect: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)'},
	{at: 0.5, expect: 'shape(from 10% 10px, smooth by 15% 5px via 5% 70px, smooth by 25% 25px)'},
	{at: 1.5, expect: 'shape(from 20% 20px, smooth by 25% -5px via 15% 50px, smooth by 15% 35px)'},
	]);

	test_interpolation({
	property: 'clip-path',
	from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)',
	to: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px cw rotate 270deg small, arc to 25% 20px of 10px 5px small cw)'
	}, [
	{at: -0.3, expect: 'shape(from 2% 2px, arc to 18% -12px of 7px 17px ccw small, arc by 12% -2px of 33px 33px rotate -42deg cw large , arc to 25% 20px of 10px 5px ccw small)'},
	{at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'},
	{at: 0.3, expect: 'shape(from 8% 8px, arc to 12% -18px of 13px 23px ccw small, arc by 18% -8px of 27px 27px rotate 102deg cw large, arc to 25% 20px of 10px 5px ccw small )'},
	{at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of 15px 25px ccw small, arc by 20% -10px of 25px rotate 150deg cw small, arc to 25% 20px of 10px 5px cw small)'},
	{at: 1, expect: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px rotate 270deg cw small, arc to 25% 20px of 10px 5px cw small)'},
	{at: 1.5, expect: 'shape(from 20% 20px, arc to 0% -30px of 25px 35px ccw small, arc by 30% -20px of 15px rotate 390deg cw small, arc to 25% 20px of 10px 5px cw small)'},
	]);

	test_interpolation({
	property: 'clip-path',
	from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 1vh, close, vline by 3pt)',
	to: 'shape(from -5px 5px, hline to 20px, vline by 10%, hline by 1em, close, vline by 6pt)',
	}, [
	{at: -0.3, expect: 'shape(from 8px calc(-6.5% - 1.5px), hline to 7px, vline by calc(-3% + 208px), hline by 5.92px, close, vline by 2.8px)'},
	{at: 0, expect: 'shape(from 5px -5%, hline to 10px, vline by calc(0% + 160px), hline by 8.25px, close, vline by 4px)'},
	{at: 0.6, expect: 'shape(from -1px calc(-2% + 3px), hline to 16px, vline by calc(6% + 64px), hline by 12.9px, close ,vline by 6.4px)'},
	{at: 1, expect: 'shape(from -5px calc(0% + 5px), hline to 20px, vline by 10%, hline by 16px, close, vline by 8px)'},
	{at: 1.5, expect: 'shape(from -10px calc(2.5% + 7.5px), hline to 25px, vline by calc(15% - 80px), hline by 19.88px, close, vline by 10px)'},
	]);

	</script>
	</body>