background-shorthand.html (1994B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Animations: Expansion of shorthand properties</title> 6 <link rel="help" href="https://www.w3.org/TR/web-animations-1/#calculating-computed-keyframes"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 #block { 11 background: green; 12 background-position-x: 10px; 13 height: 100px; 14 width: 100px; 15 } 16 </style> 17 <body> 18 <div id="block"></div> 19 </body> 20 <script> 21 function assert_background_position_at(time, x, y) { 22 document.getAnimations()[0].currentTime = time; 23 const target = document.getElementById('block'); 24 const style = getComputedStyle(target); 25 assert_equals(style.backgroundPositionX, x, 26 `background-position-x @${time/10}% progress`); 27 assert_equals(style.backgroundPositionY, y, 28 `background-position-y @${time/10}% progress`); 29 } 30 31 test(() => { 32 const target = document.getElementById('block'); 33 target.animate([ 34 { background: 'red' }, 35 { backgroundPositionY: '10px', background: 'blue' } 36 ], { duration: 1000 }); 37 // Animation is active in the semi-closed interval [0, 1000). 38 // The background shorthand expands to its longhand counterparts with 39 // background-position-(x|y) picking up the default value of 0%. 40 // The explicit background-property-y in the second keyframe takes priority 41 // over the value from expansion of the shorthand. 42 const test_cases = [ 43 { time: -100, x: "10px", y: "0%" }, 44 { time: 0, x: "0%", y: "0%" }, 45 { time: 200, x: "0%", y: "calc(0% + 2px)" }, 46 { time: 500, x: "0%", y: "calc(0% + 5px)" }, 47 { time: 800, x: "0%", y: "calc(0% + 8px)" }, 48 { time: 1100, x: "10px", y: "0%" } 49 ]; 50 test_cases.forEach(test => { 51 assert_background_position_at(test.time, test.x, test.y); 52 }); 53 }, 'Shorthand properties expand to longhand counterparts in computed ' + 54 'keyframes.'); 55 </script>