anchor-center-safe-rtl.html (1319B)
1 <!doctype html> 2 <title>Tests whether safe alignment works correctly on the anchor element.</title> 3 <link rel="match" href="anchor-center-safe-rtl-ref.html"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center"> 5 <style> 6 body { 7 direction: rtl; 8 display: inline; 9 } 10 .anchor { 11 position: fixed; 12 top: 0px; 13 right: 0px; 14 height: 30px; 15 color: white; 16 background-color: green; 17 anchor-name: --myAnchor; 18 } 19 .infobox { 20 color: darkblue; 21 background-color: azure; 22 border: 1px solid #ddd; 23 padding: 10px; 24 position: fixed; 25 position-anchor: --myAnchor; 26 top: calc(anchor(bottom) + 5px); 27 right: 0px; 28 justify-self: safe anchor-center; 29 } 30 .anchor2 { 31 position: fixed; 32 top: 0px; 33 right: 390px; 34 width: 100px; 35 height: 30px; 36 color: white; 37 background-color: green; 38 anchor-name: --myAnchor2; 39 } 40 .infobox2 { 41 color: darkblue; 42 background-color: azure; 43 border: 1px solid #ddd; 44 padding: 10px; 45 position: fixed; 46 position-anchor: --myAnchor2; 47 top: calc(anchor(right) + 5px); 48 right: calc(anchor(left) + 5px); 49 align-self: safe anchor-center; 50 } 51 </style> 52 <div class="anchor">Anchor</div> 53 <div class="infobox"> 54 <p>Anchored element with justify-self</p> 55 </div> 56 <div class="anchor2">Anchor</div> 57 <div class="infobox2"> 58 <p>Anchored element with align-self</p> 59 </div>