src/third_party/WebKit/LayoutTests/compositing/reflections/nested-reflection-transition.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: 230px;
   9     margin: 20px;
  10     border: 1px solid black;
  11     -webkit-box-reflect: right 10px;
  12   }
  13
  14   .reflected {
  15     width: 100px;
  16     height: 100px;
  17     -webkit-box-reflect: below 10px;
  18   }
  19
  20   #inner {
  21     margin: 10px;
  22     width: 100px;
  23     height: 100px;
  24     background-color: green;
  25     text-align: center;
  26     font-size: 50pt;
  27     -webkit-transition: -webkit-transform 1s linear;
  28   }
  29
  30   .rotated {
  31     transform: rotate(90deg);
  32   }
  33   .composited {
  34     transform: translateZ(0);
  35   }
  36   </style>
  37   <script src="../../animations/resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  38   <script type="text/javascript" charset="utf-8">
  39
  40     const expectedValues = [
  41       // [time, element-id, property, expected-value, tolerance]
  42       [0.5, 'inner', '-webkit-transform.1', 0.76, 0.1],
  43     ];
  44
  45     function setupTest()
  46     {
  47       document.getElementById('inner').className = 'rotated';
  48     }
  49     runTransitionTest(expectedValues, setupTest, undefined, true /* pixel test */);
  50   </script>
  51   </head>
  52 <body>
  53   <div class="outer composited">
  54     <div class="reflected composited">
  55       <div id="inner">
  56         1
  57       </div>
  58     </div>
  59   </div>
  60   <div id="result"></div>
  61 </body>
  62 </html>