third_party/WebKit/LayoutTests/transitions/color-transition-premultiplied.html

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