position-area-anchor-002-ref.html (1065B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>anchor() resolution in position-area</title> 4 <style> 5 .abs-cb { 6 width: 180px; 7 height: 180px; 8 position: relative; 9 border: 5px solid; 10 } 11 12 .scroller { 13 width: 100%; 14 height: 100%; 15 overflow: scroll; 16 } 17 18 .anchor { 19 width: 60px; 20 height: 60px; 21 margin-left: 60px; 22 background: pink; 23 } 24 25 .filler { 26 width: 1px; 27 height: 180px; 28 } 29 30 .positioned { 31 width: 30px; 32 height: 30px; 33 background: purple; 34 position: absolute; 35 } 36 37 .tl { 38 right: 120px; 39 bottom: 120px; 40 } 41 42 .tr { 43 left: 120px; 44 bottom: 120px; 45 } 46 47 .bl { 48 right: 120px; 49 top: 120px; 50 } 51 52 .br { 53 left: 120px; 54 top: 120px; 55 } 56 </style> 57 <div class=abs-cb> 58 <div id=s class=scroller> 59 <div class=filler></div> 60 <div class=anchor></div> 61 <div class=filler></div> 62 <div class="positioned tl dn"></div> 63 <div class="positioned tr dn"></div> 64 <div class="positioned bl dn"></div> 65 <div class="positioned br dn"></div> 66 </div> 67 </div> 68 <script> 69 s.scrollTop = 120; 70 document.documentElement.classList.remove('reftest-wait'); 71 </script> 72 </html>