layout/style/test/file_animations_with_disabled_properties.html

   1 <!doctype html>
   2 <head>
   3   <meta charset=utf-8>
   4   <style>
   5   @keyframes enabled-and-disabled {
   6     from {
   7       left: 0px;
   8       overflow-clip-box: padding-box;
   9     }
  10     to {
  11       left: 100px;
  12       overflow-clip-box: padding-box;
  13     }
  14   }
  15   </style>
  16   <script>
  17     var is = opener.is.bind(opener);
  18     var ok = opener.ok.bind(opener);
  19     function finish() {
  20       var o = opener;
  21       self.close();
  22       o.SimpleTest.finish();
  23     }
  24   </script>
  25 </head>
  26 <body>
  27 <div id="display"></div>
  28 <script>
  29 'use strict';
  30
  31 var display = document.getElementById('display');
  32 display.style.animation = 'enabled-and-disabled 0.01s';
  33
  34 var animation = display.getAnimations()[0];
  35 is(animation.effect.getKeyframes().length, 2,
  36    'Got two frames on the generated animation');
  37
  38 ok(animation.effect.getKeyframes()[0].hasOwnProperty('left'),
  39    'Enabled property is set on initial keyframe');
  40 ok(!animation.effect.getKeyframes()[0].hasOwnProperty('overflowClipBox'),
  41    'Disabled property is not set on initial keyframe');
  42
  43 ok(animation.effect.getKeyframes()[1].hasOwnProperty('left'),
  44    'Enabled property is set on final keyframe');
  45 ok(!animation.effect.getKeyframes()[1].hasOwnProperty('overflowClipBox'),
  46    'Disabled property is not set on final keyframe');
  47
  48 finish();
  49 </script>
  50 </body>