css/css-transitions/transition-property-016.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Transitions Test: transition-property - bottom</title>
 <link rel="author" title="Intel" href="http://www.intel.com">
 <link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
 <link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
 <meta name="flags" content="interact">
 <meta name="assert" content="Test checks that the 'bottom' property is animatable.">
 <style>
   #test {
     background-color: blue;
     bottom: -100px;
     height: 100px;
     position: relative;
     transition-duration: 2s;
     transition-property: bottom;
     transition-timing-function: linear;
     width: 100px;
   }
 </style>
 <body>
   <p>Click the blue square below. Test passes if blue square moves up gradually not immediately until it stops.</p>
   <div id="test"></div>
   <script>
     (function() {
       var div = document.querySelector("#test");
       div.addEventListener("click", function(evt) {
         div.setAttribute("style", "bottom: 10px;");
       }, false);
     })();
   </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Transitions Test: transition-property - bottom</title>
	<link rel="author" title="Intel" href="http://www.intel.com">
	<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
	<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
	<meta name="flags" content="interact">
	<meta name="assert" content="Test checks that the 'bottom' property is animatable.">
	<style>
	#test {
	background-color: blue;
	bottom: -100px;
	height: 100px;
	position: relative;
	transition-duration: 2s;
	transition-property: bottom;
	transition-timing-function: linear;
	width: 100px;
	}
	</style>
	<body>
	<p>Click the blue square below. Test passes if blue square moves up gradually not immediately until it stops.</p>
	<div id="test"></div>
	<script>
	(function() {
	var div = document.querySelector("#test");
	div.addEventListener("click", function(evt) {
	div.setAttribute("style", "bottom: 10px;");
	}, false);
	})();
	</script>
	</body>