src/third_party/WebKit/LayoutTests/compositing/reflections/animation-inside-reflection.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5   <style>
   6   .outer {
   7     width: 120px;
   8     height: 240px;
   9     margin: 20px;
  10     border: 1px solid black;
  11     -webkit-box-reflect: right 10px;
  12     opacity:0.95;
  13   }
  14
  15   .inner {
  16     margin: 10px;
  17     width: 100px;
  18     height: 100px;
  19     text-align: center;
  20     font-size: 50pt;
  21     border: 2px solid blue;
  22     -webkit-box-reflect: below 10px;
  23     opacity:0.95;
  24   }
  25
  26   #animated {
  27     margin: 10px;
  28     width: 80px;
  29     height: 80px;
  30     background-color: green;
  31   }
  32
  33   #animated.animated {
  34     -webkit-animation: swing 1s linear 1;
  35   }
  36
  37   /* for manual testing */
  38   #animated:hover {
  39     -webkit-animation-play-state: paused;
  40   }
  41
  42   .composited {
  43     transform: translateZ(0);
  44   }
  45
  46   @-webkit-keyframes swing {
  47     from { transform: rotate(0deg); }
  48     to   { transform: rotate(90deg); }
  49   }
  50   </style>
  51   <script src="../../animations/resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  52   <script type="text/javascript" charset="utf-8">
  53     const expectedValues = [
  54       // [time, element-id, property, expected-value, tolerance]
  55       [0.5, "animated", "webkitTransform.0", 0.76, 0.1],
  56     ];
  57
  58     var pixelTest = true;
  59     var disablePauseAPI = false;
  60     runAnimationTest(expectedValues, null, null, disablePauseAPI, pixelTest);
  61   </script>
  62   </head>
  63 <body>
  64   <p>The top left box, and all reflections should be rotated 45deg.</p>
  65   <div class="outer">
  66     <div id="inner" class="inner">
  67       <div id="animated" class="animated"></div>
  68     </div>
  69   </div>
  70   <div id="result"></div>
  71 </body>
  72 </html>