third_party/WebKit/LayoutTests/animations/animation-direction-reverse-hardware-opacity.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4   <title>Test of -webkit-animation-direction on composited elements (opacity)</title>
   5   <style>
   6     body {
   7       margin: 0;
   8     }
   9
  10     .box {
  11       position: relative;
  12       left: 20px;
  13       top: 10px;
  14       height: 50px;
  15       width: 250px;
  16       margin-bottom: 10px;
  17       -webkit-animation-duration: 1s;
  18       -webkit-animation-timing-function: linear;
  19       -webkit-animation-iteration-count: 8;
  20     }
  21
  22     .fade1 {
  23       -webkit-animation-name: fade1;
  24       background-color: blue;
  25       color: white;
  26     }
  27
  28     .fade2 {
  29       -webkit-animation-name: fade2;
  30       background-color: orange;
  31     }
  32
  33     .normal {
  34       -webkit-animation-direction: normal;
  35     }
  36
  37     .alternate {
  38       -webkit-animation-direction: alternate;
  39     }
  40
  41     .reverse {
  42       -webkit-animation-direction: reverse;
  43     }
  44
  45     .alternate-reverse {
  46       -webkit-animation-direction: alternate-reverse;
  47     }
  48
  49     @-webkit-keyframes fade1 {
  50       from { opacity: 0; }
  51       to { opacity: 1.0; }
  52     }
  53
  54     @-webkit-keyframes fade2 {
  55       0% { opacity: 0.0; }
  56       40% { opacity: 0.8; }
  57       60% { opacity: 0.4; }
  58       100% { opacity: 1.0; }
  59     }
  60   </style>
  61   <script src="resources/animation-test-helpers.js"></script>
  62   <script>
  63     const expectedValues = [
  64       // [time, element-id, property, expected-value, tolerance]
  65       [0.2, "box1", "opacity", 0.2, 0.15],
  66       [0.2, "box2", "opacity", 0.2, 0.15],
  67       [0.2, "box3", "opacity", 0.8, 0.15],
  68       [0.2, "box4", "opacity", 0.8, 0.15],
  69       [1.2, "box1", "opacity", 0.2, 0.15],
  70       [1.2, "box2", "opacity", 0.8, 0.15],
  71       [1.2, "box3", "opacity", 0.8, 0.15],
  72       [1.2, "box4", "opacity", 0.2, 0.15],
  73       [0.2, "box5", "opacity", 0.4, 0.15],
  74       [0.2, "box6", "opacity", 0.4, 0.15],
  75       [0.2, "box7", "opacity", 0.7, 0.15],
  76       [0.2, "box8", "opacity", 0.7, 0.15],
  77       [1.2, "box5", "opacity", 0.4, 0.15],
  78       [1.2, "box6", "opacity", 0.7, 0.15],
  79       [1.2, "box7", "opacity", 0.7, 0.15],
  80       [1.2, "box8", "opacity", 0.4, 0.15],
  81     ];
  82
  83     runAnimationTest(expectedValues);
  84
  85   </script>
  86 </head>
  87 <body>
  88 <div id="box1" class="box fade1 normal">2 keyframes: normal</div>
  89 <div id="box2" class="box fade1 alternate">2 keyframes: alternate</div>
  90 <div id="box3" class="box fade1 reverse">2 keyframes: reverse</div>
  91 <div id="box4" class="box fade1 alternate-reverse">2 keyframes: alternate-reverse</div>
  92 <div id="box5" class="box fade2 normal">4 keyframes: normal</div>
  93 <div id="box6" class="box fade2 alternate">4 keyframes: alternate</div>
  94 <div id="box7" class="box fade2 reverse">4 keyframes: reverse</div>
  95 <div id="box8" class="box fade2 alternate-reverse">4 keyframes: alternate-reverse</div>
  96 <div id="result"></div>
  97 </div>
  98 </body>
  99 </html>