file_discrete_animations.html (4239B)
1 <!doctype html> 2 <head> 3 <meta charset=utf-8> 4 <title>Test Mozilla-specific discrete animatable properties</title> 5 <script type="application/javascript" src="../testcommon.js"></script> 6 </head> 7 <body> 8 <script> 9 "use strict"; 10 11 const gMozillaSpecificProperties = { 12 "-moz-box-align": { 13 // https://developer.mozilla.org/en/docs/Web/CSS/box-align 14 from: "center", 15 to: "stretch" 16 }, 17 "-moz-box-direction": { 18 // https://developer.mozilla.org/en/docs/Web/CSS/box-direction 19 from: "reverse", 20 to: "normal" 21 }, 22 "-moz-box-ordinal-group": { 23 // https://developer.mozilla.org/en/docs/Web/CSS/box-ordinal-group 24 from: "1", 25 to: "5" 26 }, 27 "-moz-box-orient": { 28 // https://www.w3.org/TR/css-flexbox-1/ 29 from: "horizontal", 30 to: "vertical" 31 }, 32 "-moz-box-pack": { 33 // https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-pack 34 from: "center", 35 to: "end" 36 }, 37 "-moz-float-edge": { 38 // https://developer.mozilla.org/en/docs/Web/CSS/-moz-float-edge 39 from: "margin-box", 40 to: "content-box" 41 }, 42 "-moz-force-broken-image-icon": { 43 // https://developer.mozilla.org/en/docs/Web/CSS/-moz-force-broken-image-icon 44 from: "1", 45 to: "0" 46 }, 47 "-moz-text-size-adjust": { 48 // https://drafts.csswg.org/css-size-adjust/#propdef-text-size-adjust 49 from: "none", 50 to: "auto" 51 }, 52 "-webkit-text-stroke-width": { 53 // https://compat.spec.whatwg.org/#propdef--webkit-text-stroke-width 54 from: "10px", 55 to: "50px" 56 } 57 } 58 59 for (let property in gMozillaSpecificProperties) { 60 const testData = gMozillaSpecificProperties[property]; 61 const from = testData.from; 62 const to = testData.to; 63 const idlName = propertyToIDL(property); 64 const keyframes = {}; 65 keyframes[idlName] = [from, to]; 66 67 test(t => { 68 const div = addDiv(t); 69 const animation = div.animate(keyframes, 70 { duration: 1000, fill: "both" }); 71 testAnimationSamples(animation, idlName, 72 [{ time: 0, expected: from.toLowerCase() }, 73 { time: 499, expected: from.toLowerCase() }, 74 { time: 500, expected: to.toLowerCase() }, 75 { time: 1000, expected: to.toLowerCase() }]); 76 }, property + " should animate between '" 77 + from + "' and '" + to + "' with linear easing"); 78 79 test(function(t) { 80 // Easing: http://cubic-bezier.com/#.68,0,1,.01 81 // With this curve, we don't reach the 50% point until about 95% of 82 // the time has expired. 83 const div = addDiv(t); 84 const animation = div.animate(keyframes, 85 { duration: 1000, fill: "both", 86 easing: "cubic-bezier(0.68,0,1,0.01)" }); 87 testAnimationSamples(animation, idlName, 88 [{ time: 0, expected: from.toLowerCase() }, 89 { time: 940, expected: from.toLowerCase() }, 90 { time: 960, expected: to.toLowerCase() }]); 91 }, property + " should animate between '" 92 + from + "' and '" + to + "' with effect easing"); 93 94 test(function(t) { 95 // Easing: http://cubic-bezier.com/#.68,0,1,.01 96 // With this curve, we don't reach the 50% point until about 95% of 97 // the time has expired. 98 keyframes.easing = "cubic-bezier(0.68,0,1,0.01)"; 99 const div = addDiv(t); 100 const animation = div.animate(keyframes, 101 { duration: 1000, fill: "both" }); 102 testAnimationSamples(animation, idlName, 103 [{ time: 0, expected: from.toLowerCase() }, 104 { time: 940, expected: from.toLowerCase() }, 105 { time: 960, expected: to.toLowerCase() }]); 106 }, property + " should animate between '" 107 + from + "' and '" + to + "' with keyframe easing"); 108 } 109 110 function testAnimationSamples(animation, idlName, testSamples) { 111 const target = animation.effect.target; 112 testSamples.forEach(testSample => { 113 animation.currentTime = testSample.time; 114 assert_equals(getComputedStyle(target)[idlName], testSample.expected, 115 "The value should be " + testSample.expected + 116 " at " + testSample.time + "ms"); 117 }); 118 } 119 120 done(); 121 </script> 122 </body>