third_party/WebKit/LayoutTests/css3/masking/clip-path-animation.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7         height: 100px;
   8         width: 100px;
   9         margin: 10px;
  10         background-color: blue;
  11         display: inline-block;
  12     }
  13
  14     #circle-box {
  15       -webkit-animation: circle-anim 2s linear
  16     }
  17
  18     #ellipse-box {
  19       -webkit-animation: ellipse-anim 2s linear
  20     }
  21
  22     #polygon-box {
  23       -webkit-animation: polygon-anim 2s linear
  24     }
  25
  26
  27     @-webkit-keyframes circle-anim {
  28         from { -webkit-clip-path: circle(50% at 50% 50%); }
  29         to   { -webkit-clip-path: circle(20% at 20% 20%); }
  30     }
  31
  32     @-webkit-keyframes ellipse-anim {
  33         from { -webkit-clip-path: ellipse(50% 40% at 50% 50%); }
  34         to   { -webkit-clip-path: ellipse(20% 20% at 20% 20%); }
  35     }
  36
  37     @-webkit-keyframes polygon-anim {
  38         from { -webkit-clip-path: polygon(nonzero, 0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  39         to   { -webkit-clip-path: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%); }
  40     }
  41
  42   </style>
  43   <script src="../../animations/resources/animation-test-helpers.js"></script>
  44   <script type="text/javascript">
  45     const expectedValues = [
  46       // [time, element-id, property, expected-value, tolerance]
  47       // FIXME: BasicShapeInset::blend is not implemented, when it is add an inset test.
  48       // [1, "inset-box", "webkitClipPath", "inset(10% 10% 10% 10% round 0px 0px 0px 0px / 0px 0px 0px 0px)", 0.05],
  49       [1, "circle-box", "webkitClipPath", "circle(35% at 35% 35%)", 0.05],
  50       [1, "ellipse-box", "webkitClipPath", "ellipse(35% 30% at 35% 35%)", 0.05],
  51       [1, "polygon-box", "webkitClipPath", "polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
  52     ];
  53
  54     runAnimationTest(expectedValues);
  55   </script>
  56 </head>
  57 <body>
  58
  59 <div class="box" id="circle-box"></div>
  60 <div class="box" id="ellipse-box"></div>
  61 <div class="box" id="polygon-box"></div>
  62
  63 <div id="result">
  64 </div>
  65 </body>
  66 </html>