position-area-inset-one-side-auto.tentative.html (1012B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area-alignment"> 3 <link rel="author" href="mailto:wpt@keithcirkel.co.uk"> 4 <link rel="match" href="reference/position-area-inset-one-side-auto.html"> 5 <meta name="assert" content="A positioned element with one inset on one axis and auto on author should position unsafely"> 6 <style> 7 .abs { 8 width: 200px; 9 height: 200px; 10 position: relative; 11 border: 1px solid; 12 } 13 14 .anchor { 15 width: 100px; 16 height: 100px; 17 background: tomato; 18 anchor-name: --a; 19 margin: 100px 0 0 100px; 20 } 21 22 .ref { 23 position: absolute; 24 inset: 100px auto auto 100px; 25 width: 50px; 26 height: 50px; 27 background: green; 28 } 29 30 .positioned { 31 inset: 100% auto auto 100px; 32 width: 50px; 33 height: 50px; 34 position-area: top left; 35 background: skyblue; 36 position-anchor: --a; 37 position: absolute; 38 position-visibility: always; 39 } 40 41 </style> 42 <div class=abs> 43 <div class=anchor></div> 44 <div class=ref></div> 45 <div class=positioned></div> 46 </div>