css/css-transitions-1/transition-delay-000.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Transition Test: transition-delay - positive number</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="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
 <meta name="flags" content="interact">
 <meta name="assert" content="The 'transition-delay' property set positive number to delay the execution of transition">
 <style>
   #test {
     background-color: blue;
     height: 100px;
     transition-delay: 3s;
     transition-property: background-color;
     width: 100px;
   }
 </style>
 <body>
   <p>Click the blue square below. Test passes if the <strong>color</strong> of square is changed to <strong>green</strong> immediately
   when the number inside square is <strong>3</strong>.</p>
   <div id="test">0</div>
   <script>
     var clicked = 0;
     var div = document.getElementById("test");
     div.addEventListener("click", function(evt) {
       if (clicked == 0) {
         div.setAttribute("style", "background-color: green;");
         setInterval(function() {
           clicked++;
           div.innerHTML = clicked;
         }, 1000);
       }
     }, false);
   </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Transition Test: transition-delay - positive number</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="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
	<meta name="flags" content="interact">
	<meta name="assert" content="The 'transition-delay' property set positive number to delay the execution of transition">
	<style>
	#test {
	background-color: blue;
	height: 100px;
	transition-delay: 3s;
	transition-property: background-color;
	width: 100px;
	}
	</style>
	<body>
	<p>Click the blue square below. Test passes if the <strong>color</strong> of square is changed to <strong>green</strong> immediately
	when the number inside square is <strong>3</strong>.</p>
	<div id="test">0</div>
	<script>
	var clicked = 0;
	var div = document.getElementById("test");
	div.addEventListener("click", function(evt) {
	if (clicked == 0) {
	div.setAttribute("style", "background-color: green;");
	setInterval(function() {
	clicked++;
	div.innerHTML = clicked;
	}, 1000);
	}
	}, false);
	</script>
	</body>