| <!doctype html> |
| <title>Container Relative Units: Animation</title> |
| <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/cq-testcommon.js"></script> |
| <style> |
| #container { |
| container-type: size; |
| width: 200px; |
| height: 200px; |
| } |
| |
| @keyframes anim_cqw { from { top: 20cqw; } to { top: 40cqw; } } |
| @keyframes anim_cqh { from { top: 20cqh; } to { top: 40cqh; } } |
| @keyframes anim_cqi { from { top: 20cqi; } to { top: 40cqi; } } |
| @keyframes anim_cqb { from { top: 20cqb; } to { top: 40cqb; } } |
| @keyframes anim_cqmin { from { top: 20cqmin; } to { top: 40cqmin; } } |
| @keyframes anim_cqmax { from { top: 20cqmax; } to { top: 40cqmax; } } |
| |
| #container > div.css-animation { |
| animation-delay: -5s; |
| animation-play-state: paused; |
| animation-duration: 10s; |
| animation-timing-function: linear; |
| } |
| |
| .css-animation.cqw { animation-name: anim_cqw; } |
| .css-animation.cqh { animation-name: anim_cqh; } |
| .css-animation.cqi { animation-name: anim_cqi; } |
| .css-animation.cqb { animation-name: anim_cqb; } |
| .css-animation.cqmin { animation-name: anim_cqmin; } |
| .css-animation.cqmax { animation-name: anim_cqmax; } |
| |
| </style> |
| <div id=container> |
| <div class="css-animation cqw"></div> |
| <div class="css-animation cqh"></div> |
| <div class="css-animation cqi"></div> |
| <div class="css-animation cqb"></div> |
| <div class="css-animation cqmin"></div> |
| <div class="css-animation cqmax"></div> |
| |
| <div class="web-animation cqw"></div> |
| <div class="web-animation cqh"></div> |
| <div class="web-animation cqi"></div> |
| <div class="web-animation cqb"></div> |
| <div class="web-animation cqmin"></div> |
| <div class="web-animation cqmax"></div> |
| </div> |
| <script> |
| setup(() => assert_implements_size_container_queries()); |
| |
| const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax']; |
| |
| for (let unit of units) { |
| test(() => { |
| let element = document.querySelector(`.css-animation.${unit}`) |
| assert_equals(getComputedStyle(element).top, '60px'); |
| }, `CSS Animation using ${unit} unit`); |
| |
| test(() => { |
| let element = document.querySelector(`.css-animation.${unit}`) |
| assert_equals(getComputedStyle(element).top, '60px'); |
| try { |
| container.style.width = '300px'; |
| container.style.height = '300px'; |
| assert_equals(getComputedStyle(element).top, '90px'); |
| } finally { |
| container.style = ''; |
| } |
| |
| assert_equals(getComputedStyle(element).top, '60px'); |
| }, `CSS Animation using ${unit} unit responds to changing container size`); |
| } |
| |
| const keyframes = { |
| "cqw" : { top: ["20cqw", "40cqw"] }, |
| "cqh" : { top: ["20cqh", "40cqh"] }, |
| "cqi" : { top: ["20cqi", "40cqi"] }, |
| "cqb" : { top: ["20cqb", "40cqb"] }, |
| "cqmin" : { top: ["20cqmin", "40cqmin"] }, |
| "cqmax" : { top: ["20cqmax", "40cqmax"] } |
| }; |
| |
| for (const unit in keyframes) { |
| const target = document.querySelector(`.web-animation.${unit}`); |
| const assert_top = expected => assert_equals(getComputedStyle(target).top, expected); |
| |
| const animation = target.animate(keyframes[unit], 10 * 1000); |
| animation.currentTime = 5 * 1000; |
| animation.pause(); |
| |
| test(() => { |
| assert_top('60px'); |
| }, `Web Animation using ${unit} unit`); |
| |
| test(() => { |
| assert_top('60px'); |
| try { |
| container.style.width = '300px'; |
| container.style.height = '300px'; |
| assert_top('90px'); |
| } finally { |
| container.style = ''; |
| } |
| |
| assert_top('60px'); |
| }, `Web Animation using ${unit} unit responds to changing container size`); |
| } |
| |
| </script> |
