position-try-004.html (1689B)
1 <!DOCTYPE html> 2 <title>Tests margin properties in position fallback</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#accepted-try-properties"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <script src="support/test-common.js"></script> 9 10 <style> 11 body { 12 margin: 0; 13 } 14 15 .cb { 16 width: 300px; 17 height: 150px; 18 position: relative; 19 background: lightgray; 20 } 21 22 .anchor { 23 position: absolute; 24 width: 100px; 25 height: 100px; 26 top: 25px; 27 background: orange; 28 anchor-name: --a; 29 } 30 31 .target { 32 position: absolute; 33 width: 100px; 34 height: 100px; 35 background: lime; 36 position-try-fallbacks: --fallback; 37 top: anchor(--a top); 38 right: anchor(--a left); 39 margin-top: 10px; 40 margin-right: 10px; 41 } 42 43 @position-try --fallback { 44 inset: auto; 45 bottom: anchor(--a bottom); 46 left: anchor(--a right); 47 margin: 0; 48 margin-bottom: 10px; 49 margin-left: 10px; 50 } 51 </style> 52 53 <body onload="checkLayoutForAnchorPos('.target')"> 54 55 <div class=cb> 56 <div class=anchor style="left: 110px"></div> 57 <!-- Chooses base style. --> 58 <div class=target data-offset-x=0 59 data-expected-margin-left=0 data-expected-margin-right=10 60 data-expected-margin-top=10 data-expected-margin-bottom=0></div> 61 </div> 62 63 <div class=cb> 64 <div class=anchor style="right: 110px"></div> 65 <!-- Chooses @position-try block. --> 66 <div class=target data-offset-x=200 67 data-expected-margin-left=10 data-expected-margin-right=0 68 data-expected-margin-top=0 data-expected-margin-bottom=10></div> 69 </div> 70 71 </body>