try-tactic-sizing.html (1951B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: try-tactic, sizing properties</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 @position-try --pf { 8 left:50px; 9 top:50px; 10 11 min-width: 1px; 12 min-height: 2px; 13 max-width: 100px; 14 max-height: 200px; 15 } 16 #cb { 17 position: absolute; 18 width: 400px; 19 height: 400px; 20 border: 1px solid black; 21 } 22 #target { 23 position: absolute; 24 left: 99999px; /* force fallback */ 25 width: 30px; 26 height: 40px; 27 background-color: skyblue; 28 } 29 </style> 30 <div id=cb> 31 <div id=target></div> 32 </div> 33 <script> 34 test(() => { 35 target.style.positionTryFallbacks = '--pf flip-block'; 36 let cs = getComputedStyle(target); 37 assert_equals(cs.width, '30px'); 38 assert_equals(cs.height, '40px'); 39 assert_equals(cs.minWidth, '1px'); 40 assert_equals(cs.minHeight, '2px'); 41 assert_equals(cs.maxWidth, '100px'); 42 assert_equals(cs.maxHeight, '200px'); 43 }, 'flip-block does not affect sizing'); 44 45 test(() => { 46 target.style.positionTryFallbacks = '--pf flip-inline'; 47 let cs = getComputedStyle(target); 48 assert_equals(cs.width, '30px'); 49 assert_equals(cs.height, '40px'); 50 assert_equals(cs.minWidth, '1px'); 51 assert_equals(cs.minHeight, '2px'); 52 assert_equals(cs.maxWidth, '100px'); 53 assert_equals(cs.maxHeight, '200px'); 54 }, 'flip-inline does not affect sizing'); 55 56 test(() => { 57 target.style.positionTryFallbacks = '--pf flip-start'; 58 let cs = getComputedStyle(target); 59 assert_equals(cs.width, '40px'); 60 assert_equals(cs.height, '30px'); 61 assert_equals(cs.minWidth, '2px'); 62 assert_equals(cs.minHeight, '1px'); 63 assert_equals(cs.maxWidth, '200px'); 64 assert_equals(cs.maxHeight, '100px'); 65 }, 'flip-start affects sizing'); 66 </script>