LayoutTests/transitions/multiple-text-shadow-transition.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
   <style>
     #container {
       width: 400px;
       height: 100px;
       margin: 10px;
       -webkit-transition-property: text-shadow;
       -webkit-transition-duration: 1s;
       -webkit-transition-timing-function: linear;
     }

     #container {
         text-shadow:    yellow 0px 10px 10px,
                         yellow 0px 20px 10px,
                         yellow 0px 30px 10px,
                         yellow 0px 40px 10px,
                         yellow 0px 50px 10px;
     }

     #container.final {
         text-shadow:    green 0px 10px 2px,
                         green 0px 20px 2px,
                         green 0px 30px 2px,
                         green 0px 40px 2px,
                         green 0px 50px 2px;
     }

   </style>
   <script>

     if (window.testRunner) {
         testRunner.dumpAsText();
         testRunner.waitUntilDone();
     }

     function setupTest()
     {
       document.getElementById('container').className = 'final';
       window.setTimeout(checkShadow, 0);
     }

     function checkShadow()
     {
         var container = document.getElementById('container');
         var shadow = window.getComputedStyle(container).getPropertyCSSValue('text-shadow');

         var result = document.getElementById('result');
         if (shadow.length == 5)
             result.innerHTML = 'PASS: saw 5 shadows during the transition';
         else
             result.innerHTML = 'FAIL: saw ' + shadow.length + ' shadows during the transition';

         if (window.testRunner)
             testRunner.notifyDone();
     }

     window.addEventListener('load', setupTest, false);
   </script>
 </head>
 <body>
   <div id="container">
       Shadowed text
   </div>
   <div id="result"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#container {
	width: 400px;
	height: 100px;
	margin: 10px;
	-webkit-transition-property: text-shadow;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: linear;
	}

	#container {
	text-shadow: yellow 0px 10px 10px,
	yellow 0px 20px 10px,
	yellow 0px 30px 10px,
	yellow 0px 40px 10px,
	yellow 0px 50px 10px;
	}

	#container.final {
	text-shadow: green 0px 10px 2px,
	green 0px 20px 2px,
	green 0px 30px 2px,
	green 0px 40px 2px,
	green 0px 50px 2px;
	}

	</style>
	<script>

	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	function setupTest()
	{
	document.getElementById('container').className = 'final';
	window.setTimeout(checkShadow, 0);
	}

	function checkShadow()
	{
	var container = document.getElementById('container');
	var shadow = window.getComputedStyle(container).getPropertyCSSValue('text-shadow');

	var result = document.getElementById('result');
	if (shadow.length == 5)
	result.innerHTML = 'PASS: saw 5 shadows during the transition';
	else
	result.innerHTML = 'FAIL: saw ' + shadow.length + ' shadows during the transition';

	if (window.testRunner)
	testRunner.notifyDone();
	}

	window.addEventListener('load', setupTest, false);
	</script>
	</head>
	<body>
	<div id="container">
	Shadowed text
	</div>
	<div id="result"></div>
	</body>
	</html>