LayoutTests/transitions/equivalent-background-image-no-transition.html - WebKit - Git at Google

 <html>
 <head>
     <style>
     #foo {
         -webkit-transition: all 0.05s linear, top 0.1s linear;
         position: absolute;
         top: 30px;
         left: 10px;
         width: 300px;
         height: 300px;
         background-image: -webkit-linear-gradient(red, green, blue);
     }
     #foo.trans {
         top: 40px;
     }
     </style>
     <script>
     if (window.testRunner) {
         testRunner.dumpAsText();
         testRunner.waitUntilDone();
     }
     </script>
 </head>
 <body>
     <div id="foo">This should not fire a background-image transition.</div>

     <script type="text/javascript" charset="utf-8">

     var finished = false;

     document.getElementById('foo').addEventListener('webkitTransitionEnd', function(evt) {
         if(evt.propertyName == "background-image" && !finished) {
             document.getElementById('result').innerHTML = ("FAIL: saw a background-image transition");
             if (window.testRunner)
                 testRunner.notifyDone();
             finished = true;
         } else if(evt.propertyName == "top" && !finished) {
             document.getElementById('result').innerHTML = ("PASS: no background-image transition");
             if (window.testRunner)
                 testRunner.notifyDone();
         }
     });

     setTimeout(function() { document.getElementById("foo").className="trans" }, 0);
     </script>

     <div id="result">
     </div>
 </body>
 </html>
	<html>
	<head>
	<style>
	#foo {
	-webkit-transition: all 0.05s linear, top 0.1s linear;
	position: absolute;
	top: 30px;
	left: 10px;
	width: 300px;
	height: 300px;
	background-image: -webkit-linear-gradient(red, green, blue);
	}
	#foo.trans {
	top: 40px;
	}
	</style>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}
	</script>
	</head>
	<body>
	<div id="foo">This should not fire a background-image transition.</div>

	<script type="text/javascript" charset="utf-8">

	var finished = false;

	document.getElementById('foo').addEventListener('webkitTransitionEnd', function(evt) {
	if(evt.propertyName == "background-image" && !finished) {
	document.getElementById('result').innerHTML = ("FAIL: saw a background-image transition");
	if (window.testRunner)
	testRunner.notifyDone();
	finished = true;
	} else if(evt.propertyName == "top" && !finished) {
	document.getElementById('result').innerHTML = ("PASS: no background-image transition");
	if (window.testRunner)
	testRunner.notifyDone();
	}
	});

	setTimeout(function() { document.getElementById("foo").className="trans" }, 0);
	</script>

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