LayoutTests/transitions/svg-transitions.html - WebKit - Git at Google

 <!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
 <html>
 <head>
   <style>

   svg * {
       -webkit-transition-property: fill, stroke, fill-opacity, stroke-opacity, stroke-width, stroke-dasharray, stroke-dashoffset, stroke-miterlimit, kerning, baseline-shift, flood-color, flood-opacity, stop-color, stop-opacity, lighting-color;
       -webkit-transition-duration: 2s;
       -webkit-transition-timing-function: linear;
   }

   #rect1 {
       fill: rgb(0, 0, 255);
       stroke: red;
       fill-opacity: 1;
       stroke-opacity: 1;
       stroke-width: 2;
       stroke-dashoffset: 0;
       stroke-dasharray: 10 10;
   }
   .animating #rect1 {
       fill: rgb(0, 255, 0);
       stroke: black;
       fill-opacity: 0.2;
       stroke-opacity: 0.2;
       stroke-width: 4;
       stroke-dashoffset: 10;
       stroke-dasharray: 20 20;
   }

   #rect2 {
       fill: rgb(0, 0, 255);
       stroke: rgb(255, 0, 0);
       stroke-dasharray: 10;
   }
   .animating #rect2 {
       fill: rgb(0, 255, 0);
       stroke: rgb(0, 0, 0);
       stroke-dasharray: 20 20;
   }

   #rect3 {
       fill: url(#gradient1);
   }
   .animating #rect3 {
       fill: url(#gradient2);
   }

   #stop1 {
       stop-color: rgb(255,0,0);
       stop-opacity: 1;
   }
   .animating #stop1 {
       stop-color: rgb(0,255,0);
       stop-opacity: 0.5;
   }

   #rect4 {
       stroke: red;
       stroke-width: 1px;
   }
   .animating #rect4 {
       stroke-width: 4mm;
   }

   #rect5 {
       stroke: black;
       stroke-width: 0;
       stroke-dasharray: none;
   }
   .animating #rect5 {
       stroke-width: 10px;
       stroke-dasharray: 20;
   }

   #rect6 {
       stroke: black;
       stroke-width: 10%;
       stroke-dasharray: 20 15;
   }
   .animating #rect6 {
       stroke-width: 20%;
       stroke-dasharray: 10 15 20;
   }

   #rect7 {
       fill: url(#invalid) black;
       stroke-dasharray: 20;
   }
   .animating #rect7 {
       fill: url(#invalid) blue;
       stroke-dasharray: none;
   }

   #polyline1 {
       fill: none;
       stroke: black;
       stroke-width: 4;
       stroke-miterlimit: 12;
   }
   .animating #polyline1 {
       stroke-miterlimit: 10;
   }

   #text1 {
       kerning: 0;
       baseline-shift: 0;
   }
   .animating #text1 {
       kerning: 10px;
       baseline-shift: 10px;
   }

   #flood1 {
       flood-opacity: 1;
       flood-color: rgb(255, 0, 0);
   }
   .animating #flood1 {
       flood-opacity: 0;
       flood-color: rgb(0, 255, 0);
   }

   #light1 {
       lighting-color: rgb(255, 0, 0);
   }
   .animating #light1 {
       lighting-color: rgb(0, 255, 0);
   }
   </style>
   <script src="resources/transition-test-helpers.js"></script>
   <script>
   const expectedValues = [
   // [time, element-id, property, expected-value, tolerance]
   [1, "rect1", "fill-opacity", 0.6, 0.1], // 1 -> 0.2
   [1, "rect1", "stroke-width", 3, 0.5],   // 2 -> 4
   [1, "rect1", "stroke-opacity", 0.6, 0.1], // 1 -> 0.2
   [1, "rect1", "stroke-dasharray", [15, 15], 1], // 10 -> 20
   [1, "rect1", "stroke-dashoffset", 5, 1], // 0 -> 10
   [1, "rect2", "stroke-dasharray", [15, 15], 1], // 10 -> 20
   [1, "rect4", "stroke-width", 8, 1],  // 1px to 4mm
   [1, "rect5", "stroke-width", 5, 1],  // 0 to 10px
   [1, "rect5", "stroke-dasharray", [20], 1], // 20 at half time
   [1, "rect6", "stroke-width", 15, 2],  // 10% to 20%
   [1, "rect6", "stroke-dasharray", [15, 15, 20, 12.5, 17.5, 17.5], 1], // 20 -> 10, 15 -> 15, 20 -> 20, 15 -> 10, 20 -> 15, 15 -> 20
   [1, "rect7", "stroke-dasharray", "none", 1], // none at half time
   [1, "stop1", "stop-color", [127, 127, 0], 20], // rgb(255,0,0) -> rgb(0, 255, 0)
   [1, "stop1", "stop-opacity", 0.75, 0.1], // 1 -> 0.5
   [1, "polyline1", "stroke-miterlimit", 11, 0.5], // 12 -> 10 (this is an abrupt change in rendering even though the property animation is smooth)
   [1, "text1", "kerning", 5, 1], // 0 -> 10px
   [1, "text1", "baseline-shift", 5, 1], // 0 -> 10px
   [1, "flood1", "flood-opacity", 0.5, 0.1], // 1 -> 0
   [1, "flood1", "flood-color", [127, 127, 0], 20], // rgb(0, 255, 0) -> rgb(255, 0, 0)
   [1, "light1", "lighting-color", [127, 127, 0], 20], // rgb(255, 0, 0) -> rgb(0, 255, 0)
   ];

   function setupTest()
   {
       document.getElementById('container').className = 'animating';
   }

   runTransitionTest(expectedValues, setupTest, usePauseAPI);
   </script>
 </head>
 <body>

 <div id="container">
   <svg viewBox="0 0 160 120" width="400px" height="300px">
     <defs>
       <linearGradient id="gradient1">
         <stop id="stop1" offset="5%"/>
         <stop offset="95%" stop-color="rgb(0,0,255)" />
       </linearGradient>
       <linearGradient id="gradient2">
         <stop offset="10%" stop-color="rgb(0,255,255)" />
         <stop offset="95%" stop-color="rgb(255, 0,255)" />
       </linearGradient>
       <filter id="filter1">
         <feFlood id="flood1"/>
         <feDiffuseLighting id="light1"/>
       </filter>
     </defs>
     <rect id="rect1" x="10" y="10" width="30" height="30"/>
     <rect id="rect2" x="90" y="10" width="30" height="30"/>
     <rect id="rect3" x="90" y="60" width="30" height="20"/>
     <rect id="rect4" x="10" y="100" width="10" height="10"/>
     <rect id="rect5" x="50" y="100" width="10" height="10"/>
     <rect id="rect6" x="90" y="100" width="10" height="10"/>
     <rect id="rect7" x="130" y="100" width="10" height="10"/>
     <polyline id="polyline1" points="10,70 60,75 10,80"/>
     <text id="text1" x="100" y="60">Example</text>
   </svg>
 </div>

 <div id="result"></div>

 </body>
 </html>
	<!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
	<html>
	<head>
	<style>

	svg * {
	-webkit-transition-property: fill, stroke, fill-opacity, stroke-opacity, stroke-width, stroke-dasharray, stroke-dashoffset, stroke-miterlimit, kerning, baseline-shift, flood-color, flood-opacity, stop-color, stop-opacity, lighting-color;
	-webkit-transition-duration: 2s;
	-webkit-transition-timing-function: linear;
	}

	#rect1 {
	fill: rgb(0, 0, 255);
	stroke: red;
	fill-opacity: 1;
	stroke-opacity: 1;
	stroke-width: 2;
	stroke-dashoffset: 0;
	stroke-dasharray: 10 10;
	}
	.animating #rect1 {
	fill: rgb(0, 255, 0);
	stroke: black;
	fill-opacity: 0.2;
	stroke-opacity: 0.2;
	stroke-width: 4;
	stroke-dashoffset: 10;
	stroke-dasharray: 20 20;
	}

	#rect2 {
	fill: rgb(0, 0, 255);
	stroke: rgb(255, 0, 0);
	stroke-dasharray: 10;
	}
	.animating #rect2 {
	fill: rgb(0, 255, 0);
	stroke: rgb(0, 0, 0);
	stroke-dasharray: 20 20;
	}

	#rect3 {
	fill: url(#gradient1);
	}
	.animating #rect3 {
	fill: url(#gradient2);
	}

	#stop1 {
	stop-color: rgb(255,0,0);
	stop-opacity: 1;
	}
	.animating #stop1 {
	stop-color: rgb(0,255,0);
	stop-opacity: 0.5;
	}

	#rect4 {
	stroke: red;
	stroke-width: 1px;
	}
	.animating #rect4 {
	stroke-width: 4mm;
	}

	#rect5 {
	stroke: black;
	stroke-width: 0;
	stroke-dasharray: none;
	}
	.animating #rect5 {
	stroke-width: 10px;
	stroke-dasharray: 20;
	}

	#rect6 {
	stroke: black;
	stroke-width: 10%;
	stroke-dasharray: 20 15;
	}
	.animating #rect6 {
	stroke-width: 20%;
	stroke-dasharray: 10 15 20;
	}

	#rect7 {
	fill: url(#invalid) black;
	stroke-dasharray: 20;
	}
	.animating #rect7 {
	fill: url(#invalid) blue;
	stroke-dasharray: none;
	}

	#polyline1 {
	fill: none;
	stroke: black;
	stroke-width: 4;
	stroke-miterlimit: 12;
	}
	.animating #polyline1 {
	stroke-miterlimit: 10;
	}

	#text1 {
	kerning: 0;
	baseline-shift: 0;
	}
	.animating #text1 {
	kerning: 10px;
	baseline-shift: 10px;
	}

	#flood1 {
	flood-opacity: 1;
	flood-color: rgb(255, 0, 0);
	}
	.animating #flood1 {
	flood-opacity: 0;
	flood-color: rgb(0, 255, 0);
	}

	#light1 {
	lighting-color: rgb(255, 0, 0);
	}
	.animating #light1 {
	lighting-color: rgb(0, 255, 0);
	}
	</style>
	<script src="resources/transition-test-helpers.js"></script>
	<script>
	const expectedValues = [
	// [time, element-id, property, expected-value, tolerance]
	[1, "rect1", "fill-opacity", 0.6, 0.1], // 1 -> 0.2
	[1, "rect1", "stroke-width", 3, 0.5], // 2 -> 4
	[1, "rect1", "stroke-opacity", 0.6, 0.1], // 1 -> 0.2
	[1, "rect1", "stroke-dasharray", [15, 15], 1], // 10 -> 20
	[1, "rect1", "stroke-dashoffset", 5, 1], // 0 -> 10
	[1, "rect2", "stroke-dasharray", [15, 15], 1], // 10 -> 20
	[1, "rect4", "stroke-width", 8, 1], // 1px to 4mm
	[1, "rect5", "stroke-width", 5, 1], // 0 to 10px
	[1, "rect5", "stroke-dasharray", [20], 1], // 20 at half time
	[1, "rect6", "stroke-width", 15, 2], // 10% to 20%
	[1, "rect6", "stroke-dasharray", [15, 15, 20, 12.5, 17.5, 17.5], 1], // 20 -> 10, 15 -> 15, 20 -> 20, 15 -> 10, 20 -> 15, 15 -> 20
	[1, "rect7", "stroke-dasharray", "none", 1], // none at half time
	[1, "stop1", "stop-color", [127, 127, 0], 20], // rgb(255,0,0) -> rgb(0, 255, 0)
	[1, "stop1", "stop-opacity", 0.75, 0.1], // 1 -> 0.5
	[1, "polyline1", "stroke-miterlimit", 11, 0.5], // 12 -> 10 (this is an abrupt change in rendering even though the property animation is smooth)
	[1, "text1", "kerning", 5, 1], // 0 -> 10px
	[1, "text1", "baseline-shift", 5, 1], // 0 -> 10px
	[1, "flood1", "flood-opacity", 0.5, 0.1], // 1 -> 0
	[1, "flood1", "flood-color", [127, 127, 0], 20], // rgb(0, 255, 0) -> rgb(255, 0, 0)
	[1, "light1", "lighting-color", [127, 127, 0], 20], // rgb(255, 0, 0) -> rgb(0, 255, 0)
	];

	function setupTest()
	{
	document.getElementById('container').className = 'animating';
	}

	runTransitionTest(expectedValues, setupTest, usePauseAPI);
	</script>
	</head>
	<body>

	<div id="container">
	<svg viewBox="0 0 160 120" width="400px" height="300px">
	<defs>
	<linearGradient id="gradient1">
	<stop id="stop1" offset="5%"/>
	<stop offset="95%" stop-color="rgb(0,0,255)" />
	</linearGradient>
	<linearGradient id="gradient2">
	<stop offset="10%" stop-color="rgb(0,255,255)" />
	<stop offset="95%" stop-color="rgb(255, 0,255)" />
	</linearGradient>
	<filter id="filter1">
	<feFlood id="flood1"/>
	<feDiffuseLighting id="light1"/>
	</filter>
	</defs>
	<rect id="rect1" x="10" y="10" width="30" height="30"/>
	<rect id="rect2" x="90" y="10" width="30" height="30"/>
	<rect id="rect3" x="90" y="60" width="30" height="20"/>
	<rect id="rect4" x="10" y="100" width="10" height="10"/>
	<rect id="rect5" x="50" y="100" width="10" height="10"/>
	<rect id="rect6" x="90" y="100" width="10" height="10"/>
	<rect id="rect7" x="130" y="100" width="10" height="10"/>
	<polyline id="polyline1" points="10,70 60,75 10,80"/>
	<text id="text1" x="100" y="60">Example</text>
	</svg>
	</div>

	<div id="result"></div>

	</body>
	</html>