position-try-grid-001.html (2425B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> 5 <link rel="author" href="mailto:kojii@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/check-layout-th.js"></script> 9 <script src="support/test-common.js"></script> 10 <style> 11 .cb { 12 position: relative; 13 } 14 .grid { 15 display: grid; 16 grid-template-columns: repeat(4, 100px); 17 grid-template-rows: 50px 100px 50px 50px; 18 } 19 .item { 20 background: lightgray; 21 } 22 .spacer { 23 background: yellow; 24 } 25 .anchor1 { 26 anchor-name: --a1; 27 background: orange; 28 margin-left: 15px; 29 width: 20px; 30 height: 30px; 31 } 32 .target { 33 grid-column: 2 / 4; 34 grid-row: 2 / 4; 35 position: absolute; 36 position-try-fallbacks: --f1, --f2, --f3; 37 width: 100px; 38 height: 100px; 39 background: lime; 40 opacity: .2; 41 /* Position to the left of the anchor. */ 42 position-anchor: --a1; 43 right: anchor(left); 44 top: anchor(top); 45 } 46 @position-try --f1 { 47 inset: auto; 48 left: anchor(right); 49 top: anchor(top); 50 width: 250px; 51 } 52 @position-try --f2 { 53 /* Position to the right of the anchor. This entry should succeed. */ 54 inset: auto; 55 left: anchor(right); 56 top: anchor(top); 57 } 58 @position-try --f3 { 59 /* Zero-sized, the last entry wins if none succeeded. */ 60 inset: auto; 61 left: 0; 62 top: 0; 63 width: 0; 64 height: 0; 65 } 66 </style> 67 <body onload="checkLayoutForAnchorPos('.target')"> 68 <div> 69 <div class="spacer" style="height: 10px"></div> 70 <div class="grid cb"> 71 <div class="item">1</div> 72 <div class="item">2</div> 73 <div class="item">3</div> 74 <div class="item">4</div> 75 <div class="item">5</div> 76 <div class="item"> 77 <div class="spacer" style="height: 20px"></div> 78 <div class="anchor1"></div> 79 </div> 80 <div class="item">7</div> 81 <div class="item">8</div> 82 <div class="item">9</div> 83 <div class="item">10</div> 84 <div class="item">11</div> 85 <div class="item">12</div> 86 <div class="item">13</div> 87 <div class="item">14</div> 88 <div class="item">15</div> 89 <div class="item">16</div> 90 91 <div class="target" 92 data-offset-x=135 data-offset-y=70 93 data-expected-height=100></div> 94 </div> 95 </div> 96 </body>