src/third_party/WebKit/LayoutTests/compositing/animation/animated-composited-inside-hidden.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7       position: relative;
   8       width: 100px;
   9       height: 100px;
  10       border: 1px solid black;
  11     }
  12
  13     .middle {
  14       visibility: hidden;
  15     }
  16
  17     .inner {
  18       width: 80px;
  19       height: 80px;
  20       -webkit-animation: spin 5s linear infinite;
  21     }
  22
  23     @-webkit-keyframes spin {
  24       0% { transform: rotate(0); }
  25       100% { transform: rotate(360deg); }
  26     }
  27
  28     #transition-tester {
  29       position: relative;
  30       left: 0;
  31       background-color: blue;
  32       -webkit-transition: left 1s linear;
  33     }
  34
  35     #container.animating #transition-tester {
  36       left: 20px;
  37     }
  38
  39   </style>
  40   <script src="../../animations/resources/animation-test-helpers.js"></script>
  41   <script>
  42     const expectedValues = [
  43       // [time, element-id, property, expected-value, tolerance]
  44       [0.5, 'transition-tester', 'left', 10, 2],
  45     ];
  46
  47     function setupTest()
  48     {
  49       document.getElementById('container').className = 'animating';
  50     }
  51
  52     runTransitionTest(expectedValues, setupTest);
  53   </script>
  54 </head>
  55 <body>
  56
  57 <p>Tests that starting an animation on an element inside a visibility:hidden element does not block later transitions.</p>
  58   <div id="container" class="container">
  59     <div id="transition-tester" class="box"></div>
  60
  61     <div class="middle box">
  62       <div class="inner box"></div>
  63     </div>
  64   </div>
  65
  66 <div id="result"></div>
  67
  68 </body>
  69 </html>