container-units-animation.html (3713B)
1 <!doctype html> 2 <title>Container Relative Units: Animation</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 #container { 9 container-type: size; 10 width: 200px; 11 height: 200px; 12 } 13 14 @keyframes anim_cqw { from { top: 20cqw; } to { top: 40cqw; } } 15 @keyframes anim_cqh { from { top: 20cqh; } to { top: 40cqh; } } 16 @keyframes anim_cqi { from { top: 20cqi; } to { top: 40cqi; } } 17 @keyframes anim_cqb { from { top: 20cqb; } to { top: 40cqb; } } 18 @keyframes anim_cqmin { from { top: 20cqmin; } to { top: 40cqmin; } } 19 @keyframes anim_cqmax { from { top: 20cqmax; } to { top: 40cqmax; } } 20 21 #container > div.css-animation { 22 animation-delay: -5s; 23 animation-play-state: paused; 24 animation-duration: 10s; 25 animation-timing-function: linear; 26 } 27 28 .css-animation.cqw { animation-name: anim_cqw; } 29 .css-animation.cqh { animation-name: anim_cqh; } 30 .css-animation.cqi { animation-name: anim_cqi; } 31 .css-animation.cqb { animation-name: anim_cqb; } 32 .css-animation.cqmin { animation-name: anim_cqmin; } 33 .css-animation.cqmax { animation-name: anim_cqmax; } 34 35 </style> 36 <div id=container> 37 <div class="css-animation cqw"></div> 38 <div class="css-animation cqh"></div> 39 <div class="css-animation cqi"></div> 40 <div class="css-animation cqb"></div> 41 <div class="css-animation cqmin"></div> 42 <div class="css-animation cqmax"></div> 43 44 <div class="web-animation cqw"></div> 45 <div class="web-animation cqh"></div> 46 <div class="web-animation cqi"></div> 47 <div class="web-animation cqb"></div> 48 <div class="web-animation cqmin"></div> 49 <div class="web-animation cqmax"></div> 50 </div> 51 <script> 52 setup(() => assert_implements_size_container_queries()); 53 54 const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax']; 55 56 for (let unit of units) { 57 test(() => { 58 let element = document.querySelector(`.css-animation.${unit}`) 59 assert_equals(getComputedStyle(element).top, '60px'); 60 }, `CSS Animation using ${unit} unit`); 61 62 test(() => { 63 let element = document.querySelector(`.css-animation.${unit}`) 64 assert_equals(getComputedStyle(element).top, '60px'); 65 try { 66 container.style.width = '300px'; 67 container.style.height = '300px'; 68 assert_equals(getComputedStyle(element).top, '90px'); 69 } finally { 70 container.style = ''; 71 } 72 73 assert_equals(getComputedStyle(element).top, '60px'); 74 }, `CSS Animation using ${unit} unit responds to changing container size`); 75 } 76 77 const keyframes = { 78 "cqw" : { top: ["20cqw", "40cqw"] }, 79 "cqh" : { top: ["20cqh", "40cqh"] }, 80 "cqi" : { top: ["20cqi", "40cqi"] }, 81 "cqb" : { top: ["20cqb", "40cqb"] }, 82 "cqmin" : { top: ["20cqmin", "40cqmin"] }, 83 "cqmax" : { top: ["20cqmax", "40cqmax"] } 84 }; 85 86 for (const unit in keyframes) { 87 const target = document.querySelector(`.web-animation.${unit}`); 88 const assert_top = expected => assert_equals(getComputedStyle(target).top, expected); 89 90 const animation = target.animate(keyframes[unit], 10 * 1000); 91 animation.currentTime = 5 * 1000; 92 animation.pause(); 93 94 test(() => { 95 assert_top('60px'); 96 }, `Web Animation using ${unit} unit`); 97 98 test(() => { 99 assert_top('60px'); 100 try { 101 container.style.width = '300px'; 102 container.style.height = '300px'; 103 assert_top('90px'); 104 } finally { 105 container.style = ''; 106 } 107 108 assert_top('60px'); 109 }, `Web Animation using ${unit} unit responds to changing container size`); 110 } 111 112 </script>