popover-anchor-multicol-display.tentative.html (1732B)
1 <!DOCTYPE html> 2 <title>Tests popovers with implicit anchors in out-of-flow boxes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#determining"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> 6 <link rel="author" href="mailto:xiaochengh@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/check-layout-th.js"></script> 10 11 <style> 12 .relpos { 13 position: relative; 14 } 15 .columns { 16 column-count: 2; 17 column-fill: auto; 18 column-gap: 10px; 19 column-width: 100px; 20 width: 210px; 21 height: 50px; 22 } 23 #anchor1 { 24 position: absolute; 25 width: 10px; 26 height: 30px; 27 background: orange; 28 } 29 .target { 30 /* 31 * We need a popover to use implicit anchors, and force showing it with CSS 32 * so that it's not in the top layer. 33 */ 34 display: block; 35 position: absolute; 36 margin: 0; 37 border: 0; 38 padding: 0; 39 width: anchor-size(width); 40 height: anchor-size(height); 41 background: lime; 42 } 43 </style> 44 <body onload="checkLayout('.target')"> 45 <div class="spacer" style="height: 10px"></div> 46 <div class="relpos"> 47 <div class="columns"> 48 <div class="spacer" style="height: 10px"></div> 49 <div class="relpos"> 50 <div class="spacer" style="height: 10px"></div> 51 <div class="relpos"> 52 <div class="spacer" style="height: 10px"></div> 53 <div id="anchor1"></div> 54 </div> 55 <div class="target" popover anchor="anchor1" data-expected-height=30></div> 56 </div> 57 <div class="target" popover anchor="anchor1" data-expected-height=50></div> 58 </div> 59 </div> 60 </body>