css-flexbox-height-animation-stretch.html (1214B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Flexbox Test: Items stretch correctly while content is animating</title> 5 <link rel="author" title="Micky Brunetti" href="mailto:micky2be@gmail.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> 7 <link rel="match" href="css-flexbox-height-animation-stretch-ref.html"/> 8 <meta name="flags" content="animated"> 9 <meta name="assert" content="Items should stretch vertically in all time"> 10 <style> 11 @keyframes resize { 12 0% {height: 100px;} 13 100% {height: 50px;} 14 } 15 .container { 16 display: flex; 17 width: 200px; 18 background-color: red; 19 20 } 21 .item { 22 background-color: green; 23 width: 50px; 24 25 } 26 .content { 27 height: 50px; 28 } 29 .bigger.content { 30 height: 100px; 31 animation: resize 500ms infinite alternate; 32 } 33 </style> 34 </head> 35 <body> 36 <p>The test passes if you keep seeing a green rectangle and no red.</p> 37 <div class="test"> 38 <div class="container"> 39 <div class="item"><div class="bigger content"></div></div> 40 <div class="item"><div class="content"></div></div> 41 <div class="item"><div class="content"></div></div> 42 <div class="item"><div class="content"></div></div> 43 </div> 44 </div> 45 </div> 46 </body> 47 </html>