KeyframeEffect-getKeyframes.tentative.html (4974B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>KeyframeEffect.getKeyframes() for CSS transitions</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/helper.js"></script> 9 <style> 10 :root { 11 --var-100px: 100px; 12 } 13 </style> 14 <div id="log"></div> 15 <script> 16 'use strict'; 17 18 const getKeyframes = e => { 19 return e.getAnimations()[0].effect.getKeyframes(); 20 }; 21 22 const assert_frames_equal = (a, b, name) => { 23 assert_equals( 24 Object.keys(a).sort().toString(), 25 Object.keys(b).sort().toString(), 26 `properties on ${name}` 27 ); 28 for (const p in a) { 29 assert_equals(a[p], b[p], `value for '${p}' on ${name}`); 30 } 31 }; 32 33 test(t => { 34 const div = addDiv(t); 35 36 div.style.left = '0px'; 37 getComputedStyle(div).transitionProperty; 38 div.style.transition = 'left 100s'; 39 div.style.left = '100px'; 40 41 const frames = getKeyframes(div); 42 43 assert_equals(frames.length, 2, 'number of frames'); 44 45 const expected = [ 46 { offset: 0, 47 computedOffset: 0, 48 easing: 'linear', 49 composite: 'auto', 50 left: '0px', 51 }, 52 { 53 offset: 1, 54 computedOffset: 1, 55 easing: 'linear', 56 composite: 'auto', 57 left: '100px', 58 }, 59 ]; 60 61 for (let i = 0; i < frames.length; i++) { 62 assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`); 63 } 64 }, 'KeyframeEffect.getKeyframes() returns expected frames for a simple' 65 + ' transition'); 66 67 test(t => { 68 const div = addDiv(t); 69 70 div.style.left = '0px'; 71 getComputedStyle(div).transitionProperty; 72 div.style.transition = 'left 100s steps(2,end)'; 73 div.style.left = '100px'; 74 75 const frames = getKeyframes(div); 76 77 assert_equals(frames.length, 2, 'number of frames'); 78 79 const expected = [ 80 { 81 offset: 0, 82 computedOffset: 0, 83 easing: 'linear', 84 composite: 'auto', 85 left: '0px', 86 }, 87 { 88 offset: 1, 89 computedOffset: 1, 90 easing: 'linear', 91 composite: 'auto', 92 left: '100px', 93 }, 94 ]; 95 96 for (let i = 0; i < frames.length; i++) { 97 assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`); 98 } 99 }, 'KeyframeEffect.getKeyframes() returns frames unaffected by a non-default easing function'); 100 101 test(t => { 102 const div = addDiv(t); 103 div.style.left = '0px'; 104 getComputedStyle(div).transitionProperty; 105 div.style.transition = 'left 100s'; 106 div.style.left = 'var(--var-100px)'; 107 108 const frames = getKeyframes(div); 109 110 // CSS transition endpoints are based on the computed value so we 111 // shouldn't see the variable reference 112 const expected = [ 113 { 114 offset: 0, 115 computedOffset: 0, 116 easing: 'linear', 117 composite: 'auto', 118 left: '0px', 119 }, 120 { 121 offset: 1, 122 computedOffset: 1, 123 easing: 'linear', 124 composite: 'auto', 125 left: '100px', 126 }, 127 ]; 128 for (let i = 0; i < frames.length; i++) { 129 assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`); 130 } 131 }, 'KeyframeEffect.getKeyframes() returns expected frames for a' 132 + ' transition with a CSS variable endpoint'); 133 134 test(t => { 135 const div = addDiv(t); 136 div.style.left = '0px'; 137 getComputedStyle(div).transitionProperty; 138 div.style.transition = 'left 100s'; 139 div.style.left = '100px'; 140 141 // Resetting the effect target before retrieving the keyframes should not 142 // affect the computed property values. 143 const anim = div.getAnimations()[0]; 144 anim.effect.target = null; 145 const frames = anim.effect.getKeyframes(); 146 147 const expected = [ 148 { 149 offset: 0, 150 computedOffset: 0, 151 easing: 'linear', 152 composite: 'auto', 153 left: '0px', 154 }, 155 { 156 offset: 1, 157 computedOffset: 1, 158 easing: 'linear', 159 composite: 'auto', 160 left: '100px', 161 }, 162 ]; 163 for (let i = 0; i < frames.length; i++) { 164 assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`); 165 } 166 }, 'KeyframeEffect.getKeyframes() returns expected frames for a' 167 + ' transition after resetting the effect target'); 168 169 test(t => { 170 const div = addDiv(t); 171 172 div.style.transition = '--foo 100s allow-discrete'; 173 div.style.setProperty("--foo", "10"); 174 getComputedStyle(div).getPropertyValue("--foo"); 175 div.style.setProperty("--foo", "20"); 176 177 const frames = getKeyframes(div); 178 179 assert_equals(frames.length, 2, 'number of frames'); 180 181 const expected = [ 182 { offset: 0, 183 computedOffset: 0, 184 easing: 'linear', 185 composite: 'auto', 186 "--foo": '10', 187 }, 188 { 189 offset: 1, 190 computedOffset: 1, 191 easing: 'linear', 192 composite: 'auto', 193 "--foo": '20', 194 }, 195 ]; 196 197 for (let i = 0; i < frames.length; i++) { 198 assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`); 199 } 200 }, 'KeyframeEffect.getKeyframes() returns expected frames for a custom' 201 + ' property transition'); 202 203 </script>