try-tactic-base.html (926B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: try-tactic, base values</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-fallbacks-try-tactic"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #cb { 8 position: absolute; 9 width: 400px; 10 height: 200px; 11 border: 1px solid black; 12 } 13 #target { 14 position: absolute; 15 /* Does not fit initially */ 16 width: 150px; 17 height: 300px; 18 border: 3px solid skyblue; 19 } 20 </style> 21 <div id=cb> 22 <div id=target></div> 23 </div> 24 <script> 25 test(() => { 26 let cs = getComputedStyle(target); 27 assert_equals(cs.width, '150px'); 28 assert_equals(cs.height, '300px'); 29 30 target.style.positionTryFallbacks = 'flip-start'; 31 32 assert_equals(cs.width, '300px'); 33 assert_equals(cs.height, '150px'); 34 }, 'flip-start affects base values'); 35 </script>