LayoutTests/animations/fill-mode-forwards2.html - WebKit - Git at Google

 <html>
 <head>
 <script>
     if (window.testRunner) {
         testRunner.dumpAsText();
         testRunner.waitUntilDone();
     }

     function animationEnded() {
         var result = document.getElementById("result");
         var square = document.getElementById('square');
         var opacity = document.defaultView.getComputedStyle(square, null).getPropertyValue('opacity');

         if (opacity == 0.5)
             result.innerHTML = "PASS - Test working";
         else
             result.innerHTML = "FAIL - A opacity value must be 0.5";


         if(window.testRunner)
             testRunner.notifyDone();
     }
 </script>
 <style>
     body {
         margin-left: 100px;
         margin-top: 50px;
     }
     #square {
         width: 100px;
         height: 100px;
         position: absolute;
         top: 100px;
         background-color: blue;
         opacity: 0;
         -webkit-animation-name: pop;
         -webkit-animation-duration: 1s;
 	-webkit-animation-fill-mode: forwards;
     }
     @-webkit-keyframes pop {
         0% { -webkit-transform: scale(0.05); opacity: 0; }
         33% { -webkit-transform: scale(1.00); opacity: 1; }
         66% { -webkit-transform: scale(1.66); opacity: 1; }
         100% { -webkit-transform: scale(0.95); opacity: 0.5; }
     }
 </style>
 </head>

 <body>
     <div id="square" onwebkitanimationend="animationEnded();"></div>
     <div id="result"></div>
 </body>
 </html>
	<html>
	<head>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	function animationEnded() {
	var result = document.getElementById("result");
	var square = document.getElementById('square');
	var opacity = document.defaultView.getComputedStyle(square, null).getPropertyValue('opacity');

	if (opacity == 0.5)
	result.innerHTML = "PASS - Test working";
	else
	result.innerHTML = "FAIL - A opacity value must be 0.5";


	if(window.testRunner)
	testRunner.notifyDone();
	}
	</script>
	<style>
	body {
	margin-left: 100px;
	margin-top: 50px;
	}
	#square {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 100px;
	background-color: blue;
	opacity: 0;
	-webkit-animation-name: pop;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	}
	@-webkit-keyframes pop {
	0% { -webkit-transform: scale(0.05); opacity: 0; }
	33% { -webkit-transform: scale(1.00); opacity: 1; }
	66% { -webkit-transform: scale(1.66); opacity: 1; }
	100% { -webkit-transform: scale(0.95); opacity: 0.5; }
	}
	</style>
	</head>

	<body>
	<div id="square" onwebkitanimationend="animationEnded();"></div>
	<div id="result"></div>
	</body>
	</html>