LayoutTests/transitions/multiple-mask-transitions.html

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