viewport-units-keyframes.html (2390B)
1 <!DOCTYPE html> 2 <title>Viewport units in @keyframes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 iframe { 9 width: 200px; 10 height: 100px; 11 } 12 </style> 13 14 <iframe id=iframe></iframe> 15 16 <script> 17 18 const doc = iframe.contentDocument; 19 const win = iframe.contentWindow; 20 21 function test_interpolated_value(from, to, expected) { 22 test((t) => { 23 t.add_cleanup(() => { doc.body.innerHTML = ''; }); 24 doc.body.innerHTML = ` 25 <style> 26 @keyframes anim { 27 from { height: ${from}; } 28 to { height: ${to}} 29 } 30 div { animation: anim linear 10s -5s paused; } 31 </style> 32 <div></div> 33 `; 34 let div = doc.querySelector('div'); 35 assert_equals(win.getComputedStyle(div).height, expected); 36 }, `Interpolation from ${from} to ${to} is ${expected} at 50%`); 37 } 38 39 // Flush the iframe styles before starting tests to avoid the animation in the 40 // iframe starts before the iframe's document gets sized as expected. 41 iframe.getBoundingClientRect(); 42 43 test_interpolated_value('0px', '100vw', '100px'); 44 test_interpolated_value('0px', '100vi', '100px'); 45 test_interpolated_value('0px', '100vmax', '100px'); 46 test_interpolated_value('0px', '100svw', '100px'); 47 test_interpolated_value('0px', '100svi', '100px'); 48 test_interpolated_value('0px', '100svmax', '100px'); 49 test_interpolated_value('0px', '100lvw', '100px'); 50 test_interpolated_value('0px', '100lvi', '100px'); 51 test_interpolated_value('0px', '100lvmax', '100px'); 52 test_interpolated_value('0px', '100dvw', '100px'); 53 test_interpolated_value('0px', '100dvi', '100px'); 54 test_interpolated_value('0px', '100dvmax', '100px'); 55 56 test_interpolated_value('0px', '100vh', '50px'); 57 test_interpolated_value('0px', '100vb', '50px'); 58 test_interpolated_value('0px', '100vmin', '50px'); 59 test_interpolated_value('0px', '100svh', '50px'); 60 test_interpolated_value('0px', '100svb', '50px'); 61 test_interpolated_value('0px', '100svmin', '50px'); 62 test_interpolated_value('0px', '100lvh', '50px'); 63 test_interpolated_value('0px', '100lvb', '50px'); 64 test_interpolated_value('0px', '100lvmin', '50px'); 65 test_interpolated_value('0px', '100dvh', '50px'); 66 test_interpolated_value('0px', '100dvb', '50px'); 67 test_interpolated_value('0px', '100dvmin', '50px'); 68 69 </script>