third_party/WebKit/LayoutTests/transitions/multiple-background-size-transitions.html

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