anchor-center-safe-rtl-ref.html (1104B)
1 <!doctype html> 2 <title>Tests whether safe alignment works correctly on the anchor element.</title> 3 <style> 4 body { 5 direction: rtl; 6 display: inline; 7 } 8 .anchor { 9 position: fixed; 10 top: 0px; 11 right: 0px; 12 height: 30px; 13 color: white; 14 background-color: green; 15 } 16 .infobox { 17 color: darkblue; 18 background-color: azure; 19 border: 1px solid #ddd; 20 padding: 10px; 21 position: fixed; 22 top: 35px; 23 right: 0px; 24 } 25 .anchor2 { 26 position: fixed; 27 top: 0px; 28 right: 390px; 29 width: 100px; 30 height: 30px; 31 color: white; 32 background-color: green; 33 } 34 .infobox2 { 35 color: darkblue; 36 background-color: azure; 37 border: 1px solid #ddd; 38 padding: 10px; 39 position: fixed; 40 top: 0px; 41 right: 495px; /* This value is calculated from the right position value of .anchor2 plus its width, plus an additional 5 px of padding */ 42 } 43 </style> 44 <div style="position: relative;"> 45 <div class="anchor">Anchor</div> 46 <div class="infobox"> 47 <p>Anchored element with justify-self</p> 48 </div> 49 <div class="anchor2">Anchor</div> 50 <div class="infobox2"> 51 <p>Anchored element with align-self</p> 52 </div> 53 </div>