animation-nested-animation.html (1272B)
1 <!DOCTYPE html> 2 <title>Container Queries - Animations within animating container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#animated-containers"> 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 @keyframes outer { 9 from { width: 100px; } 10 to { width: 300px; } 11 } 12 @keyframes inner { 13 from { background-color: blue; } 14 to { background-color: yellow; } 15 } 16 #container { 17 container-type: inline-size; 18 animation: outer 1s linear paused; 19 } 20 #target { 21 background-color: green; 22 } 23 24 @container (min-width: 200px) { 25 #target { 26 animation: inner 1s linear paused; 27 } 28 } 29 </style> 30 <div id=container> 31 <div id=target> 32 Test 33 </div> 34 </div> 35 <script> 36 setup(() => assert_implements_size_container_queries()); 37 38 test(() => { 39 assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)'); 40 41 assert_equals(container.getAnimations().length, 1); 42 let animation = container.getAnimations()[0]; 43 animation.currentTime = 600; 44 45 assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)'); 46 }, 'Animated container can create inner animation'); 47 </script>