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

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