position-try-order-inset-modified-containing-block.html (1939B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-try-order behavior with margins</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property"> 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: 400px; 11 border: 1px solid black; 12 } 13 #target, #ref { 14 position: absolute; 15 left: 450px; /* force fallback */ 16 height: 40px; 17 background-color: skyblue; 18 } 19 #ref { 20 background-color: seagreen; 21 } 22 23 @position-try --margin { 24 left:0px; 25 right:0px; 26 margin: 100px; 27 } 28 @position-try --no-margin { 29 left:0px; 30 right:0px; 31 } 32 33 </style> 34 <style id=style> 35 </style> 36 <div id=cb> 37 <div id=target></div> 38 <div id=ref></div> 39 </div> 40 <script> 41 42 // Test that an element with the specified `position_try` gets the same 43 // position as a reference element with `position_try_expected`. 44 function test_position_try_order(position_try, position_try_expected) { 45 test((t) => { 46 style.textContent = ` 47 #target { 48 position-try: ${position_try}; 49 } 50 #ref { 51 position-try: ${position_try_expected}; 52 } 53 `; 54 assert_true(CSS.supports('position-try', 'normal --x')); 55 assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); 56 assert_equals(getComputedStyle(target).marginLeft, getComputedStyle(ref).marginLeft, 'marginLeft'); 57 }, `${position_try} | ${position_try_expected}`); 58 } 59 60 // Margin does not affect the inset-modified containing block size so the first option should get picked. 61 test_position_try_order('most-width --margin, --no-margin', '--margin'); 62 test_position_try_order('most-width --no-margin, --margin', '--no-margin'); 63 test_position_try_order('most-height --margin, --no-margin', '--margin'); 64 test_position_try_order('most-height --no-margin, --margin', '--no-margin'); 65 66 </script>