position-anchor-005.tentative.html (1044B)
1 <!DOCTYPE html> 2 <title>Tests 'position-anchor' property works with anchor-center with border & padding</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> 4 <link rel="author" href="mailto:wpt@keithcirkel.co.uk"> 5 <link rel="match" href="position-anchor-005-ref.tentative.html"> 6 <style> 7 body { 8 margin: 0; 9 } 10 .wrapper { 11 border: 10px solid grey; 12 border-left-width: 7px; 13 border-top-width: 9px; 14 position: relative; 15 width: 200px; 16 height: 400px; 17 padding: 11px 12px 8px 6px; 18 } 19 .a { 20 background: green; 21 width: 50px; 22 height: 100px; 23 margin: 30px 28px 32px 52px; 24 border: 10px solid yellow; 25 border-left-width: 8px; 26 border-right-width: 7px; 27 border-top-width: 6px; 28 padding: 9px 8px 5px 3px; 29 anchor-name: --foo; 30 } 31 .b { 32 background: blue; 33 position: absolute; 34 width: 50px; 35 height: 100px; 36 border: 5px solid lime; 37 padding: 15px; 38 position-anchor: --foo; 39 position-area: center bottom 40 } 41 </style> 42 <body> 43 <div class="wrapper"> 44 <div class=a></div> 45 <div class=b></div> 46 </div> 47 </body>