| <!DOCTYPE html> |
| <title>Container Queries - Animations within animating container</title> |
| <link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/cq-testcommon.js"></script> |
| <style> |
| @keyframes outer { |
| from { width: 100px; } |
| to { width: 300px; } |
| } |
| @keyframes inner { |
| from { background-color: blue; } |
| to { background-color: yellow; } |
| } |
| #container { |
| container-type: inline-size; |
| animation: outer 1s linear paused; |
| } |
| #target { |
| background-color: green; |
| } |
| |
| @container size(min-width: 200px) { |
| #target { |
| animation: inner 1s linear paused; |
| } |
| } |
| </style> |
| <div id=container> |
| <div id=target> |
| Test |
| </div> |
| </div> |
| <script> |
| setup(() => assert_implements_container_queries()); |
| |
| test(() => { |
| assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)'); |
| |
| assert_equals(container.getAnimations().length, 1); |
| let animation = container.getAnimations()[0]; |
| animation.currentTime = 600; |
| |
| assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)'); |
| }, 'Animated container can create inner animation'); |
| </script> |