animation-001.html (10278B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Animating CSS logical properties using Web Animations</title> 4 <link rel="help" href="https://drafts.csswg.org/css-logical/#box"> 5 <meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values."> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../css-animations/support/testcommon.js"></script> 9 <style> 10 :root { 11 --200px: 200px; 12 --300px: 300px; 13 --writingMode: horizontal-tb; 14 } 15 </style> 16 17 <div id="log"></div> 18 <script> 19 'use strict'; 20 21 test(t => { 22 const div = addDiv(t); 23 const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000); 24 anim.currentTime = 500; 25 assert_equals(getComputedStyle(div).height, '50px'); 26 }, 'Logical properties can be animated using object notation'); 27 28 test(t => { 29 const div = addDiv(t); 30 const anim = div.animate( 31 [{ blockSize: '0px' }, { blockSize: '100px' }], 32 1000 33 ); 34 anim.currentTime = 500; 35 assert_equals(getComputedStyle(div).height, '50px'); 36 }, 'Logical properties can be animated using array notation'); 37 38 test(t => { 39 const anim = addDiv(t).animate({ blockSize: ['0px', '100px'] }, 1000); 40 assert_equals(anim.effect.getKeyframes().length, 2); 41 42 assert_own_property(anim.effect.getKeyframes()[0], 'blockSize'); 43 assert_false(anim.effect.getKeyframes()[0].hasOwnProperty('height')); 44 45 assert_own_property(anim.effect.getKeyframes()[1], 'blockSize'); 46 assert_false(anim.effect.getKeyframes()[1].hasOwnProperty('height')); 47 }, 'Logical properties are NOT stored as physical properties'); 48 49 test(t => { 50 const div = addDiv(t, { style: 'writing-mode: vertical-rl' }); 51 const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000); 52 anim.currentTime = 500; 53 assert_equals(getComputedStyle(div).width, '50px'); 54 assert_equals(getComputedStyle(div).height, '0px'); 55 }, 'Logical properties in animations respect the writing-mode'); 56 57 test(t => { 58 const div = addDiv(t, { style: 'direction: rtl' }); 59 const anim = div.animate({ marginInlineStart: ['0px', '100px'] }, 1000); 60 anim.currentTime = 500; 61 assert_equals(getComputedStyle(div).marginLeft, '0px'); 62 assert_equals(getComputedStyle(div).marginRight, '50px'); 63 }, 'Logical properties in animations respect the direction'); 64 65 test(t => { 66 const div = addDiv(t); 67 const anim = div.animate( 68 { 69 blockSize: ['0px', '100px'], 70 height: ['200px', '300px'], 71 }, 72 1000 73 ); 74 anim.currentTime = 500; 75 assert_equals(getComputedStyle(div).height, '250px'); 76 }, 'Physical properties win over logical properties in object notation'); 77 78 test(t => { 79 const div = addDiv(t); 80 const anim = div.animate( 81 [ 82 { height: '200px', blockSize: '0px' }, 83 { height: '300px', blockSize: '100px' }, 84 ], 85 1000 86 ); 87 anim.currentTime = 500; 88 assert_equals(getComputedStyle(div).height, '250px'); 89 }, 'Physical properties win over logical properties in array notation'); 90 91 test(t => { 92 const div = addDiv(t); 93 const anim = div.animate( 94 { 95 blockSize: ['0px', '100px'], 96 height: ['var(--200px)', 'var(--300px)'], 97 }, 98 1000 99 ); 100 anim.currentTime = 500; 101 assert_equals(getComputedStyle(div).height, '250px'); 102 }, 'Physical properties with variables win over logical properties'); 103 104 test(t => { 105 const div = addDiv(t); 106 const anim = div.animate( 107 { 108 marginInline: '100px', 109 marginLeft: '200px', 110 }, 111 { duration: 1, easing: 'step-start' } 112 ); 113 assert_equals(getComputedStyle(div).marginLeft, '200px'); 114 assert_equals(getComputedStyle(div).marginRight, '100px'); 115 }, 'Physical longhands win over logical shorthands'); 116 117 test(t => { 118 const div = addDiv(t); 119 const anim = div.animate( 120 { 121 marginInlineStart: '100px', 122 margin: '200px', 123 }, 124 { duration: 1, easing: 'step-start' } 125 ); 126 assert_equals(getComputedStyle(div).marginLeft, '100px'); 127 assert_equals(getComputedStyle(div).marginRight, '200px'); 128 }, 'Logical longhands win over physical shorthands'); 129 130 test(t => { 131 const div = addDiv(t); 132 const anim = div.animate( 133 { 134 marginInline: '100px', 135 margin: '200px', 136 }, 137 { duration: 1, easing: 'step-start' } 138 ); 139 assert_equals(getComputedStyle(div).marginLeft, '200px'); 140 assert_equals(getComputedStyle(div).marginRight, '200px'); 141 }, 'Physical shorthands win over logical shorthands'); 142 143 test(t => { 144 const div = addDiv(t); 145 const anim = div.animate( 146 { 147 marginInline: '100px', 148 margin: 'var(--200px)', 149 }, 150 { duration: 1, easing: 'step-start' } 151 ); 152 assert_equals(getComputedStyle(div).marginLeft, '200px'); 153 assert_equals(getComputedStyle(div).marginRight, '200px'); 154 }, 'Physical shorthands using variables win over logical shorthands'); 155 156 test(t => { 157 const div = addDiv(t); 158 const anim = div.animate([{ blockSize: '200px' }, { height: '300px' }], 1000); 159 anim.currentTime = 500; 160 assert_equals(getComputedStyle(div).height, '250px'); 161 }, 'Physical properties and logical properties can be mixed'); 162 163 test(t => { 164 const div = addDiv(t); 165 const anim = div.animate( 166 [{ marginInline: '200px' }, { marginRight: '300px' }], 167 1000 168 ); 169 anim.currentTime = 500; 170 assert_equals(getComputedStyle(div).marginRight, '250px'); 171 }, 'Physical shorthands and logical shorthands can be mixed'); 172 173 test(t => { 174 const div = addDiv(t); 175 const anim = div.animate( 176 [{ blockSize: '100px', height: '200px' }, { height: '300px' }], 177 1000 178 ); 179 anim.currentTime = 500; 180 assert_equals(getComputedStyle(div).height, '250px'); 181 }, 'Physical properties win over logical properties even when some keyframes' 182 + ' only have logical properties'); 183 184 test(t => { 185 const div = addDiv(t, { style: 'width: 0px; height: 0px' }); 186 const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000); 187 anim.currentTime = 500; 188 189 assert_equals(getComputedStyle(div).width, '0px'); 190 assert_equals(getComputedStyle(div).height, '50px'); 191 192 div.style.writingMode = 'vertical-rl'; 193 assert_equals(getComputedStyle(div).width, '50px'); 194 assert_equals(getComputedStyle(div).height, '0px'); 195 }, 'Animations update when the writing-mode is changed'); 196 197 test(t => { 198 const div = addDiv(t, { style: 'width: 0px; height: 0px' }); 199 const anim = div.animate( 200 { blockSize: ['0px', '100px'] }, 201 { 202 duration: 1000, 203 fill: 'forwards', 204 } 205 ); 206 anim.finish(); 207 208 assert_equals(getComputedStyle(div).width, '0px'); 209 assert_equals(getComputedStyle(div).height, '100px'); 210 211 div.style.writingMode = 'vertical-rl'; 212 assert_equals(getComputedStyle(div).width, '100px'); 213 assert_equals(getComputedStyle(div).height, '0px'); 214 }, 'Filling animations update when the writing-mode is changed'); 215 216 test(t => { 217 const div = addDiv(t, { style: 'width: 100px; height: 200px' }); 218 const anim = div.animate({ blockSize: '300px' }, 1000); 219 anim.currentTime = 500; 220 221 // Initially we are animating height from 200px -> 300px 222 assert_equals(getComputedStyle(div).width, '100px'); 223 assert_equals(getComputedStyle(div).height, '250px'); 224 225 // After the change we are animating width from 100px -> 300px 226 div.style.writingMode = 'vertical-rl'; 227 assert_equals(getComputedStyle(div).width, '200px'); 228 assert_equals(getComputedStyle(div).height, '200px'); 229 }, 'Animations with implicit from values update when the writing-mode' 230 + ' is changed'); 231 232 test(t => { 233 const div = addDiv(t, { style: 'width: 0px; height: 0px' }); 234 const anim = div.animate( 235 [ 236 { height: '200px', blockSize: '0px' }, 237 { height: '300px', blockSize: '100px' }, 238 ], 239 1000 240 ); 241 anim.currentTime = 500; 242 243 // Initially writing-mode is horizontal-tb so the 'block-size' values are 244 // clobbered by the 'height' values. 245 246 assert_equals(getComputedStyle(div).width, '0px'); 247 assert_equals(getComputedStyle(div).height, '250px'); 248 249 // After updating the writing-mode to vertical-rl the 'block-size' values 250 // should no longer be overridden and should apply to the height. 251 252 div.style.writingMode = 'vertical-rl'; 253 assert_equals(getComputedStyle(div).width, '50px'); 254 assert_equals(getComputedStyle(div).height, '250px'); 255 }, 'Animations with overlapping physical and logical properties update' 256 + ' when the writing-mode is changed'); 257 258 test(t => { 259 const div = addDiv(t, { style: 'width: 0px; height: 0px' }); 260 div.style.writingMode = 'var(--writingMode)'; 261 const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000); 262 anim.currentTime = 500; 263 264 assert_equals(getComputedStyle(div).width, '0px'); 265 assert_equals(getComputedStyle(div).height, '50px'); 266 267 div.style.setProperty('--writingMode', 'vertical-rl'); 268 assert_equals(getComputedStyle(div).width, '50px'); 269 assert_equals(getComputedStyle(div).height, '0px'); 270 }, 'Animations update when the writing-mode is changed through a CSS variable'); 271 272 test(t => { 273 const div = addDiv(t); 274 const anim = div.animate({ marginInlineStart: ['0px', '100px'] }, 1000); 275 anim.currentTime = 500; 276 277 assert_equals(getComputedStyle(div).marginLeft, '50px'); 278 assert_equals(getComputedStyle(div).marginRight, '0px'); 279 280 div.style.direction = 'rtl'; 281 assert_equals(getComputedStyle(div).marginLeft, '0px'); 282 assert_equals(getComputedStyle(div).marginRight, '50px'); 283 }, 'Animations update when the direction is changed'); 284 285 test(t => { 286 const div = addDiv(t); 287 const anim = div.animate( 288 { 289 insetBlock: ['var(--200px)', 'var(--300px)'], 290 }, 291 1000 292 ); 293 anim.currentTime = 500; 294 assert_equals(getComputedStyle(div).insetBlockStart, '250px'); 295 }, 'Logical shorthand with variable references animates correctly'); 296 297 test(t => { 298 const div = addDiv(t); 299 const anim = div.animate( 300 { writingMode: 'vertical-rl' }, 301 { duration: 1, easing: 'step-start' } 302 ); 303 assert_equals(getComputedStyle(div).writingMode, 'horizontal-tb'); 304 assert_equals(anim.effect.getKeyframes().length, 0); 305 }, 'writing-mode is not animatable'); 306 307 test(t => { 308 const div = addDiv(t); 309 const anim = div.animate( 310 { writingMode: 'rtl' }, 311 { duration: 1, easing: 'step-start' } 312 ); 313 anim.currentTime = 500; 314 assert_equals(getComputedStyle(div).direction, 'ltr'); 315 assert_equals(anim.effect.getKeyframes().length, 0); 316 }, 'direction is not animatable'); 317 318 </script>