| <!doctype html> |
| <title>Container Relative Units: Animation</title> |
| <link rel="help" href="https://drafts.csswg.org/css-contain-3/#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_qw { from { top: 20qw; } to { top: 40qw; } } |
| @keyframes anim_qh { from { top: 20qh; } to { top: 40qh; } } |
| @keyframes anim_qi { from { top: 20qi; } to { top: 40qi; } } |
| @keyframes anim_qb { from { top: 20qb; } to { top: 40qb; } } |
| @keyframes anim_qmin { from { top: 20qmin; } to { top: 40qmin; } } |
| @keyframes anim_qmax { from { top: 20qmax; } to { top: 40qmax; } } |
| |
| #container > div { |
| animation-delay: -5s; |
| animation-play-state: paused; |
| animation-duration: 10s; |
| animation-timing-function: linear; |
| } |
| |
| #element_qw { animation-name: anim_qw; } |
| #element_qh { animation-name: anim_qh; } |
| #element_qi { animation-name: anim_qi; } |
| #element_qb { animation-name: anim_qb; } |
| #element_qmin { animation-name: anim_qmin; } |
| #element_qmax { animation-name: anim_qmax; } |
| |
| </style> |
| <div id=container> |
| <div id=element_qw></div> |
| <div id=element_qh></div> |
| <div id=element_qi></div> |
| <div id=element_qb></div> |
| <div id=element_qmin></div> |
| <div id=element_qmax></div> |
| </div> |
| <script> |
| setup(() => assert_implements_container_queries()); |
| |
| const units = ['qw', 'qh', 'qi', 'qb', 'qmin', 'qmax']; |
| |
| for (let unit of units) { |
| test(() => { |
| let element = document.getElementById(`element_${unit}`) |
| assert_equals(getComputedStyle(element).top, '60px'); |
| }, `Animation using ${unit} unit`); |
| |
| test(() => { |
| let element = document.getElementById(`element_${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'); |
| }, `Animation using ${unit} unit responds to changing container size`); |
| } |
| |
| </script> |
