try-tactic-basic-anchor.html (2110B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: simple try-tactic with anchor</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: 200px; 10 height: 200px; 11 border: 1px solid black; 12 } 13 #anchor { 14 position: absolute; 15 left: 100px; 16 top: 100px; 17 width: 50px; 18 height: 50px; 19 background-color:red; 20 anchor-name: --anchor; 21 } 22 #target1 { 23 position: absolute; 24 width: 100px; 25 height: 100px; 26 /* Does not fit ... */ 27 left: anchor(--anchor left); 28 top: anchor(--anchor bottom); 29 /* flip-block fits */ 30 position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; 31 background-color: coral; 32 } 33 #target2 { 34 position: absolute; 35 width: 100px; 36 height: 100px; 37 /* Does not fit ... */ 38 left: anchor(--anchor right); 39 top: anchor(--anchor top); 40 /* flip-inline fits */ 41 position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; 42 background-color: blue; 43 } 44 #target3 { 45 position: absolute; 46 width: 100px; 47 height: 100px; 48 /* Does not fit ... */ 49 left: anchor(--anchor right); 50 top: anchor(--anchor bottom); 51 /* flip-block flip-inline fits */ 52 position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; 53 background-color: green; 54 } 55 </style> 56 <div id=cb> 57 <div id=anchor></div> 58 <div id=target1></div> 59 <div id=target2></div> 60 <div id=target3></div> 61 </div> 62 <script> 63 test(() => { 64 let cs = getComputedStyle(target1); 65 assert_equals(cs.left, '100px'); 66 assert_equals(cs.top, '0px'); 67 }, 'Uses flip-block'); 68 test(() => { 69 let cs = getComputedStyle(target2); 70 assert_equals(cs.left, '0px'); 71 assert_equals(cs.top, '100px'); 72 }, 'Uses flip-inline'); 73 test(() => { 74 let cs = getComputedStyle(target3); 75 assert_equals(cs.left, '0px'); 76 assert_equals(cs.top, '0px'); 77 }, 'Uses flip-block flip-inline'); 78 </script>