anchor-position-borders-001.html (4159B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 3 <link rel="author" href="mailto:kojii@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <script src="support/test-common.js"></script> 8 <style> 9 .cb { 10 position: relative; 11 border-bottom: 2px solid gray; 12 } 13 .not-positioned-cb { 14 transform: translate(0, 0); /* Make it a containing block. */ 15 } 16 .margins { margin: 5px 6px 7px 8px; } 17 .borders { border-width: 5px 6px 7px 8px; border-style: solid; } 18 .paddings { padding: 5px 6px 7px 8px; } 19 .spacer { 20 height: 9px; 21 } 22 .anchor1 { 23 anchor-name: --a1; 24 margin-left: 50px; 25 width: 31px; 26 height: 31px; 27 background: blue; 28 } 29 .target { 30 position: absolute; 31 left: anchor(--a1 left); 32 right: anchor(--a1 right); 33 top: anchor(--a1 top); 34 bottom: anchor(--a1 bottom); 35 background: orange; 36 } 37 </style> 38 <body onload="checkLayoutForAnchorPos('.target')"> 39 <!-- Margins/borders/paddings on the containing block. --> 40 <div class="cb margins"> 41 <div class="spacer"></div> 42 <div class="anchor1"></div> 43 <div class="target" 44 data-offset-x=50 data-offset-y=9 45 data-expected-width=31 data-expected-height=31></div> 46 </div> 47 <div class="cb borders"> 48 <div class="spacer"></div> 49 <div class="anchor1"></div> 50 <div class="target" 51 data-offset-x=50 data-offset-y=9 52 data-expected-width=31 data-expected-height=31></div> 53 </div> 54 <div class="cb paddings"> 55 <div class="spacer"></div> 56 <div class="anchor1"></div> 57 <div class="target" 58 data-offset-x=58 data-offset-y=14 59 data-expected-width=31 data-expected-height=31></div> 60 </div> 61 62 <!-- Margins/borders/paddings on the nested containing block. --> 63 <div class="cb"> 64 <div class="spacer"></div> 65 <div class="not-positioned-cb margins"> 66 <div class="anchor1"></div> 67 </div> 68 <div class="target" 69 data-offset-x=58 data-offset-y=14 70 data-expected-width=31 data-expected-height=31></div> 71 </div> 72 <div class="cb"> 73 <div class="spacer"></div> 74 <div class="not-positioned-cb borders"> 75 <div class="anchor1"></div> 76 </div> 77 <div class="target" 78 data-offset-x=58 data-offset-y=14 79 data-expected-width=31 data-expected-height=31></div> 80 </div> 81 <div class="cb"> 82 <div class="spacer"></div> 83 <div class="not-positioned-cb paddings"> 84 <div class="anchor1"></div> 85 </div> 86 <div class="target" 87 data-offset-x=58 data-offset-y=14 88 data-expected-width=31 data-expected-height=31></div> 89 </div> 90 91 <!-- Margins/borders/paddings on the anchor. --> 92 <div class="cb"> 93 <div class="spacer"></div> 94 <div class="anchor1 margins"></div> 95 <div class="target" 96 data-offset-x=50 data-offset-y=14 97 data-expected-width=31 data-expected-height=31></div> 98 </div> 99 <div class="cb"> 100 <div class="spacer"></div> 101 <div class="anchor1 borders"></div> 102 <div class="target" 103 data-offset-x=50 data-offset-y=9 104 data-expected-width=45 data-expected-height=43></div> 105 </div> 106 <div class="cb"> 107 <div class="spacer"></div> 108 <div class="anchor1 paddings"></div> 109 <div class="target" 110 data-offset-x=50 data-offset-y=9 111 data-expected-width=45 data-expected-height=43></div> 112 </div> 113 114 <!-- Margins/borders/paddings on the querying element. --> 115 <div class="cb"> 116 <div class="spacer"></div> 117 <div class="anchor1"></div> 118 <div class="target margins" 119 data-offset-x=58 data-offset-y=14 120 data-expected-width=17 data-expected-height=19></div> 121 </div> 122 <div class="cb"> 123 <div class="spacer"></div> 124 <div class="anchor1"></div> 125 <div class="target borders" 126 data-offset-x=50 data-offset-y=9 127 data-expected-width=31 data-expected-height=31></div> 128 </div> 129 <div class="cb"> 130 <div class="spacer"></div> 131 <div class="anchor1"></div> 132 <div class="target paddings" 133 data-offset-x=50 data-offset-y=9 134 data-expected-width=31 data-expected-height=31></div> 135 </div> 136 </body>