third_party/WebKit/LayoutTests/transitions/mask-transitions.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7       height: 100px;
   8       width: 100px;
   9       margin: 10px;
  10       background-color: blue;
  11       -webkit-mask: url('../fast/backgrounds/resources/mask-left.png') no-repeat 0 0;
  12       -webkit-mask-size: 100px 100px;
  13       -webkit-transition-duration: 1s;
  14       -webkit-transition-timing-function: linear;
  15     }
  16
  17     #box {
  18       -webkit-transition-property: -webkit-mask;
  19     }
  20
  21     #box.final {
  22       -webkit-mask-position: 20px 20px;
  23     }
  24
  25     #box2 {
  26       -webkit-transition-property: -webkit-mask-size;
  27     }
  28
  29     #box2.final {
  30       -webkit-mask-size: 200px 200px;
  31     }
  32
  33   </style>
  34   <script src="../animations/resources/animation-test-helpers.js"></script>
  35   <script type="text/javascript">
  36
  37     const expectedValues = [
  38       // [time, element-id, property, expected-value, tolerance]
  39       [0.5, 'box', '-webkit-mask-position-x', [10], 4],
  40       [0.5, 'box', '-webkit-mask-position-y', [10], 4],
  41       [0.5, 'box2', '-webkit-mask-size', [150, 150], 20],
  42     ];
  43
  44     function setupTest()
  45     {
  46       document.getElementById('box').className = 'box final';
  47       document.getElementById('box2').className = 'box final';
  48     }
  49
  50     runTransitionTest(expectedValues, setupTest);
  51   </script>
  52 </head>
  53 <body>
  54
  55   <div id="box" class="box"></div>
  56   <div id="box2" class="box"></div>
  57
  58   <div id="result">
  59   </div>
  60
  61 </body>
  62 </html>