try-tactic-margin.html (1979B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: try-tactic (margin)</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:10px; 9 top:20px; 10 margin: 5px 15px 25px 35px; 11 } 12 #cb { 13 position: absolute; 14 width: 400px; 15 height: 400px; 16 border: 1px solid black; 17 } 18 #target { 19 position: absolute; 20 left: 99999px; /* force fallback */ 21 width: 30px; 22 height: 40px; 23 background-color: skyblue; 24 } 25 </style> 26 <div id=cb> 27 <div id=target></div> 28 </div> 29 <script> 30 function test_try_tactic(try_tactic, expected_offsets) { 31 target.style.positionTryFallbacks = `--pf ${try_tactic}`; 32 test(() => { 33 assert_equals(target.offsetLeft, expected_offsets.left, 'offsetLeft'); 34 assert_equals(target.offsetTop, expected_offsets.top, 'offsetTop'); 35 assert_equals(target.offsetWidth, expected_offsets.width, 'offsetWidth'); 36 assert_equals(target.offsetHeight, expected_offsets.height, 'offsetHeight'); 37 }, target.style.positionTryFallbacks); 38 } 39 40 let w = 30; 41 let h = 40; 42 let cbw = 400; 43 let cbh = 400; 44 45 test_try_tactic('', {left:10+35, top:20+5, width:w, height:h}); 46 test_try_tactic('flip-block', {left:10+35, top:cbh-h-20-5, width:w, height:h}); 47 test_try_tactic('flip-inline', {left:cbw-w-10-35, top:20+5, width:w, height:h}); 48 test_try_tactic('flip-block flip-inline', {left:cbw-w-10-35, top:cbh-h-20-5, width:w, height:h}); 49 test_try_tactic('flip-start', {left:20+5, top:10+35, width:h, height:w}); 50 test_try_tactic('flip-block flip-start', {left:cbh-h-20-5, top:10+35, width:h, height:w}); 51 test_try_tactic('flip-inline flip-start', {left:20+5, top:cbw-w-10-35, width:h, height:w}); 52 test_try_tactic('flip-block flip-inline flip-start', {left:cbh-h-20-5, top:cbw-w-10-35, width:h, height:w}); 53 </script>