after-change-style-inherited-try-fallback.html (1917B)
1 <!DOCTYPE html> 2 <title>CSS Transitions Test: trigger transitions on inherited after-change styles for anchored element using fallback</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transitions-1/#after-change-style"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 body { margin: 0; } 9 #outer, #inner { 10 transition: 2s steps(2, start); 11 transition-property: color, width; 12 } 13 #outer { 14 anchor-name: --anchor; 15 width: 100px; 16 height: 100px; 17 background-color: orange; 18 } 19 #inner.wide { 20 width: 300px !important; 21 } 22 #inner { 23 width: 100px; 24 height: 100px; 25 position: absolute; 26 position-anchor: --anchor; 27 position-area: left center; 28 position-try-fallbacks: --fallback; 29 background-color: teal; 30 } 31 @position-try --fallback { 32 position-area: right center; 33 width: 200px; 34 } 35 36 #outer { color: red; } 37 #inner { color: black; } 38 #outer.green { color: lime; } 39 #outer.green #inner { color: unset; } 40 </style> 41 <div id="outer"> 42 <div> 43 <div id="inner" class="wide"></div> 44 </div> 45 </div> 46 <script> 47 test(() => { 48 outer.offsetTop; 49 assert_equals(inner.offsetLeft, 100, "Initially using fallback position"); 50 assert_equals(inner.offsetWidth, 300, "Initially using important #inner.wide"); 51 assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)", "#inner initially black"); 52 outer.className = "green"; 53 inner.className = ""; 54 assert_equals(inner.offsetLeft, 100, "Still using fallback position"); 55 assert_equals(inner.offsetWidth, 250, "Transitioning from !important width to fallback width"); 56 assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)", "#inner halfway between black and lime"); 57 }, "Position fallback correctly applied to after-change style"); 58 </script>