css/css-animations/animation-iteration-count-004.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Animations Test: animation-iteration-count - non-integer 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">
 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
 <meta name="flags" content="animated">
 <meta name="assert" content="When animation-iteration-count is set to non-integer,
                              animation will end partway through its last cycle.">
 <style>
   #test-iteration-count {
     animation-name: sample;
     animation-duration: 10s;
     animation-iteration-count: 2.1;

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

   #ref-path {
     background-color: yellow;
     height: 10px;
     width: 250px;
     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 moving from right to left along the yellow bar twice,
     and for the third time it ends partway and then immediately positions
     itself to the left.
   </p>
   <div id="test-iteration-count">Filler Text</div>
   <div id="ref-path"></div>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Animations Test: animation-iteration-count - non-integer 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">
	<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count">
	<meta name="flags" content="animated">
	<meta name="assert" content="When animation-iteration-count is set to non-integer,
	animation will end partway through its last cycle.">
	<style>
	#test-iteration-count {
	animation-name: sample;
	animation-duration: 10s;
	animation-iteration-count: 2.1;

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

	#ref-path {
	background-color: yellow;
	height: 10px;
	width: 250px;
	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 moving from right to left along the yellow bar twice,
	and for the third time it ends partway and then immediately positions
	itself to the left.
	</p>
	<div id="test-iteration-count">Filler Text</div>
	<div id="ref-path"></div>
	</body>