position-try-002.html (1656B)
1 <!DOCTYPE html> 2 <title>Tests that overflowing the inset-modified containing block triggers position fallback</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> 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 <style> 10 .cb { 11 width: 400px; 12 height: 400px; 13 transform: scale(1); 14 background: yellow; 15 } 16 .anchor1 { 17 anchor-name: --a; 18 margin-left: 100px; 19 width: 100px; 20 height: 100px; 21 background: blue; 22 } 23 .target { 24 position: absolute; 25 position-try-fallbacks: --f1, --f2; 26 width: min-content; 27 height: 100px; 28 background: orange; 29 /* 1: Position to the left of the anchor. */ 30 left: 0; 31 right: anchor(--a left); 32 top: anchor(--a top); 33 } 34 .inline-spacer { 35 display: inline-block; 36 width: 200px; 37 height: 100px; 38 } 39 @position-try --f1 { 40 /* 2: Position to the right of the anchor. */ 41 left: anchor(--a right); 42 right: 0; 43 top: anchor(--a top); 44 } 45 @position-try --f2 { 46 /* 3: Placeholder fallback that shouldn't be selected when the previous 47 ones do not overflow the available space. */ 48 inset: 0; 49 } 50 </style> 51 <body onload="checkLayoutForAnchorPos('.target')"> 52 <!-- The first base style overflows the inset-modifed containing block --> 53 <div class="cb"> 54 <div class="anchor1"></div> 55 <div class="target" 56 data-offset-x=200 data-offset-y=0 57 data-expected-width=200 data-expected-height=100> 58 <span class="inline-spacer"></span> 59 </div> 60 </div> 61 </body>