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

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Animations Test: animation-delay - ::after</title>
 <link rel="author" title="Intel" href="http://www.intel.com">
 <link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-18 -->
 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
 <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-delay applies to the ::after pseudo element.">
 <style>
   div::after {
     animation-name: sample;
     animation-duration: 5s;
     animation-delay: 5s;

     background-color: blue;
     content: "Filler Text";
     display: block;
     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 moving from right to left after about 5 seconds
     from the time the page is loaded.
   </p>
   <div></div>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Animations Test: animation-delay - ::after</title>
	<link rel="author" title="Intel" href="http://www.intel.com">
	<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-18 -->
	<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
	<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-delay applies to the ::after pseudo element.">
	<style>
	div::after {
	animation-name: sample;
	animation-duration: 5s;
	animation-delay: 5s;

	background-color: blue;
	content: "Filler Text";
	display: block;
	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 moving from right to left after about 5 seconds
	from the time the page is loaded.
	</p>
	<div></div>
	</body>