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

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Transition Test: transition-delay - negative 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="assert" content="Test checks that the 'transition-delay' property set negative number will not delay the execution of transition">
 <style>
   div {
     height: 100px;
     transition-property: background-color;
     width: 100px;
   }
   #ref {
     background-color: gray;
     transition-delay: 3s;
   }
   #test {
     background-color: blue;
     transition-delay: -3s;
   }
 </style>
 <body>
   <p>Click the blue square below. Test passes if the <strong>color</strong> of blue and gray squares is all changed to <strong>green</strong> immediately
   when the number inside blue square is 3.</p>
   <div id="ref"></div>
   <div id="test">0</div>
   <script>
     var clicked = 0;
     var ref = document.getElementById("ref");
     var test = document.getElementById("test");
     test.addEventListener("click", function(evt) {
       if (clicked == 0) {
         ref.setAttribute("style", "background-color: green;");
         setInterval(function() {
           if (clicked == 2) {
             test.setAttribute("style", "background-color: green;");
           }
           clicked++;
           test.innerHTML = clicked;
         }, 1000);
       }
     }, false);
   </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Transition Test: transition-delay - negative 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="assert" content="Test checks that the 'transition-delay' property set negative number will not delay the execution of transition">
	<style>
	div {
	height: 100px;
	transition-property: background-color;
	width: 100px;
	}
	#ref {
	background-color: gray;
	transition-delay: 3s;
	}
	#test {
	background-color: blue;
	transition-delay: -3s;
	}
	</style>
	<body>
	<p>Click the blue square below. Test passes if the <strong>color</strong> of blue and gray squares is all changed to <strong>green</strong> immediately
	when the number inside blue square is 3.</p>
	<div id="ref"></div>
	<div id="test">0</div>
	<script>
	var clicked = 0;
	var ref = document.getElementById("ref");
	var test = document.getElementById("test");
	test.addEventListener("click", function(evt) {
	if (clicked == 0) {
	ref.setAttribute("style", "background-color: green;");
	setInterval(function() {
	if (clicked == 2) {
	test.setAttribute("style", "background-color: green;");
	}
	clicked++;
	test.innerHTML = clicked;
	}, 1000);
	}
	}, false);
	</script>
	</body>