LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001.html

   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>&nbsp;</div>
  31