contain-animation-001.html (792B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Containment Test: contain is not animatable</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 5 <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <meta name=assert content="the contain property is not animatable"> 8 <style> 9 div { 10 border: 50px solid green; 11 background: red; 12 position: absolute; /* for shrinkwrap */ 13 contain: strict; 14 15 animation-duration: 1s; 16 animation-name: bad; 17 animation-play-state: paused; 18 19 font-size: 100px; 20 } 21 22 @keyframes bad { 23 from { 24 contain: none; 25 } 26 } 27 </style> 28 29 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 30 <div> </div>