css/filter-effects-1/css-filters-animation-brightness.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <title>CSS Filters Animation: Brightness</title>
     <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
     <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
     <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
     <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
     <link rel="match" href="css-filters-animation-brightness-ref.html">
     <meta name="assert" content="The blue square should be dark blue">
     <style type="text/css">
         @keyframes animate {
             0% {
                 filter: brightness(0%);
             }
             100% {
                 filter: none;
             }
         }

         .square {
             width: 100px;
             height: 100px;
             background: blue;
             animation-name: animate;
             animation-play-state: paused;
             animation-delay: -2s;
             animation-duration: 4s;
             animation-timing-function: linear;
         }
     </style>
 </head>
 <body>
 <p>You should see a dark blue rectangle. Neither black nor blue.</p>
 <div class="square"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS Filters Animation: Brightness</title>
	<link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
	<link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
	<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
	<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
	<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
	<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
	<link rel="match" href="css-filters-animation-brightness-ref.html">
	<meta name="assert" content="The blue square should be dark blue">
	<style type="text/css">
	@keyframes animate {
	0% {
	filter: brightness(0%);
	}
	100% {
	filter: none;
	}
	}

	.square {
	width: 100px;
	height: 100px;
	background: blue;
	animation-name: animate;
	animation-play-state: paused;
	animation-delay: -2s;
	animation-duration: 4s;
	animation-timing-function: linear;
	}
	</style>
	</head>
	<body>
	<p>You should see a dark blue rectangle. Neither black nor blue.</p>
	<div class="square"></div>
	</body>
	</html>