css/css-animations-1/animation-name-001.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Animations Test: animation-name - blank value</title>
 <link rel="author" title="Nokia Inc." href="http://www.nokia.com">
 <link rel="author" title="Intel" href="http://www.intel.com">
 <link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
 <meta name="flags" content="animated">
 <meta name="assert" content="Check that animation-name is set without any value,
                              there will be no animation.">
 <style>
   div {
     animation-name: ;
     animation-duration: 8s;

     background-color: blue;
     height: 100px;
     width: 100px;
     position: relative;
   }

   @keyframes sample {
     from {
       left: 150px;
     }
     to {
       left: 0px;
     }
   }
 </style>
 <body>
   <p>
     Test passes if there is a filled blue square with 'Filler Text',
     which starts staying left about 2 seconds, then moves from right to left.
   </p>
   <div>Filler Text</div>
   <script>
     setTimeout(setAnimationName, 2000);

     function setAnimationName () {
       var div = document.getElementsByTagName("div");
       div[0].style.animationName = "sample";
     }
   </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Animations Test: animation-name - blank value</title>
	<link rel="author" title="Nokia Inc." href="http://www.nokia.com">
	<link rel="author" title="Intel" href="http://www.intel.com">
	<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
	<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
	<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
	<meta name="flags" content="animated">
	<meta name="assert" content="Check that animation-name is set without any value,
	there will be no animation.">
	<style>
	div {
	animation-name: ;
	animation-duration: 8s;

	background-color: blue;
	height: 100px;
	width: 100px;
	position: relative;
	}

	@keyframes sample {
	from {
	left: 150px;
	}
	to {
	left: 0px;
	}
	}
	</style>
	<body>
	<p>
	Test passes if there is a filled blue square with 'Filler Text',
	which starts staying left about 2 seconds, then moves from right to left.
	</p>
	<div>Filler Text</div>
	<script>
	setTimeout(setAnimationName, 2000);

	function setAnimationName () {
	var div = document.getElementsByTagName("div");
	div[0].style.animationName = "sample";
	}
	</script>
	</body>