<!doctype html> <head> <meta charset=utf-8> <style> @keyframes enabled-and-disabled { from { left: 0px; overflow-clip-box: padding-box; } to { left: 100px; overflow-clip-box: padding-box; } } </style> <script> var is = opener.is.bind(opener); var ok = opener.ok.bind(opener); function finish() { var o = opener; self.close(); o.SimpleTest.finish(); } </script> </head> <body> <div id="display"></div> <script> 'use strict'; var display = document.getElementById('display'); display.style.animation = 'enabled-and-disabled 0.01s'; var animation = display.getAnimations()[0]; is(animation.effect.getKeyframes().length, 2, 'Got two frames on the generated animation'); ok(animation.effect.getKeyframes()[0].hasOwnProperty('left'), 'Enabled property is set on initial keyframe'); ok(!animation.effect.getKeyframes()[0].hasOwnProperty('overflowClipBox'), 'Disabled property is not set on initial keyframe'); ok(animation.effect.getKeyframes()[1].hasOwnProperty('left'), 'Enabled property is set on final keyframe'); ok(!animation.effect.getKeyframes()[1].hasOwnProperty('overflowClipBox'), 'Disabled property is not set on final keyframe'); finish(); </script> </body>