test_cssanimation_missing_keyframes.html (1921B)
1 <!doctype html> 2 <head> 3 <meta charset=utf-8> 4 <title>Bug 1339332 - Test for missing keyframes in CSS Animation</title> 5 <script type="application/javascript" src="../testharness.js"></script> 6 <script type="application/javascript" src="../testharnessreport.js"></script> 7 <script type="application/javascript" src="../testcommon.js"></script> 8 </head> 9 <body> 10 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1339332" 11 target="_blank">Mozilla Bug 1339332</a> 12 <div id="log"></div> 13 <style> 14 @keyframes missingFrom { 15 to { 16 text-align: right; 17 } 18 } 19 @keyframes missingBoth { 20 50% { 21 text-align: right; 22 } 23 } 24 @keyframes missingTo { 25 from { 26 text-align: right; 27 } 28 } 29 </style> 30 <script> 31 'use strict'; 32 33 const gTests = [ 34 { desc: 'missing "from" keyframe', 35 animationName: 'missingFrom', 36 expected: [{ property: 'text-align', 37 values: [valueFormat(0, undefined, 'replace', 'ease'), 38 valueFormat(1, 'right', 'replace')] } ] 39 }, 40 { desc: 'missing "to" keyframe', 41 animationName: 'missingTo', 42 expected: [{ property: 'text-align', 43 values: [valueFormat(0, 'right', 'replace', 'ease'), 44 valueFormat(1, undefined, 'replace')] } ] 45 }, 46 { desc: 'missing "from" and "to" keyframes', 47 animationName: 'missingBoth', 48 expected: [{ property: 'text-align', 49 values: [valueFormat(0, undefined, 'replace', 'ease'), 50 valueFormat(.5, 'right', 'replace', 'ease'), 51 valueFormat(1, undefined, 'replace')] } ] 52 }, 53 ]; 54 55 gTests.forEach(function(subtest) { 56 test(function(t) { 57 const div = addDiv(t); 58 div.style.animation = `${ subtest.animationName } 1000s`; 59 const animation = div.getAnimations()[0]; 60 assert_properties_equal(animation.effect.getProperties(), 61 subtest.expected); 62 }, subtest.desc); 63 }); 64 65 </script> 66 </body>