base-style-invalidation.html (1686B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Invalidation from changing the base style</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 4 <link rel="help" href="https://issues.chromium.org/issues/333608683"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 @position-try --pt { 9 width: 50px; /* Undo force overflow */ 10 } 11 #cb { 12 position: relative; 13 width: 200px; 14 height: 200px; 15 border: 1px solid black; 16 } 17 #anchor { 18 position: absolute; 19 left: 75px; 20 top: 75px; 21 width: 50px; 22 height: 50px; 23 background: coral; 24 anchor-name: --a; 25 } 26 #anchored { 27 position: absolute; 28 position-anchor: --a; 29 position-try-fallbacks: --pt flip-start; 30 inset: 0; 31 top: anchor(top); 32 bottom: anchor(bottom); 33 right: calc(anchor(left) + 5px); 34 width: 50px; 35 height: 50px; 36 background: skyblue; 37 justify-self: end; 38 } 39 #anchored.flip { 40 background: seagreen; 41 width: 300px; /* Force overflow */ 42 } 43 </style> 44 <div id=cb> 45 <div id=anchor></div> 46 <div id=anchored></div> 47 </div> 48 <script> 49 test(() => { 50 // Initially to the left. 51 assert_equals(anchored.offsetLeft, 20); 52 assert_equals(anchored.offsetTop, 75); 53 54 // Flips to the right. 55 anchored.classList.toggle('flip'); 56 assert_equals(anchored.offsetLeft, 75); 57 assert_equals(anchored.offsetTop, 20); 58 59 // Flips to the original position. 60 anchored.classList.toggle('flip'); 61 assert_equals(anchored.offsetLeft, 20); 62 assert_equals(anchored.offsetTop, 75); 63 }, 'The chosen position fallbacks changes when the base style differs'); 64 </script>