anchored-child-transition.html (1210B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: Transition on anchored element child with anchored() query</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-2/#anchored-container-queries"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #anchor { 8 anchor-name: --a; 9 } 10 #container { 11 container-type: anchored; 12 position: absolute; 13 position-anchor: --a; 14 position-area: top; 15 position-try-fallbacks: flip-block; 16 } 17 #child { 18 scale: 1; 19 } 20 #child.large { 21 scale: 2; 22 } 23 @container anchored(fallback: flip-block) { 24 #child { 25 transition: scale 1000s steps(2, start); 26 } 27 } 28 </style> 29 <div id="anchor"></div> 30 <div id="container"> 31 <div id="child"></div> 32 </div> 33 <script> 34 test(() => { 35 assert_equals(getComputedStyle(child).scale, "1"); 36 }, "Initial scale is 1"); 37 38 test(() => { 39 container.style.height = "200px"; // Trigger fallback which sets the transition property 40 child.classList.toggle("large"); // Trigger scale transition 41 assert_equals(getComputedStyle(child).scale, "1.5"); 42 }, "Start transition of scale property on anchored child"); 43 </script>