anchor-position-multicol-006.html (2011B)
1 <!DOCTYPE html> 2 <title>Tests two OOF anchors in different containing blocks in multicol.</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> 6 <link rel="author" href="mailto:kojii@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 <script src="support/test-common.js"></script> 11 <style> 12 .relpos { 13 position: relative; 14 } 15 .columns { 16 column-count: 3; 17 column-fill: auto; 18 column-gap: 10px; 19 column-width: 100px; 20 width: 320px; 21 height: 50px; 22 } 23 .anchor1 { 24 anchor-name: --a1; 25 position: absolute; 26 width: 10px; 27 height: 30px; 28 background: orange; 29 } 30 .anchor2 { 31 anchor-name: --a2; 32 position: absolute; 33 width: 30px; 34 height: 30px; 35 background: purple; 36 } 37 .target { 38 position: absolute; 39 width: 5px; 40 background: lime; 41 } 42 .target1 { 43 left: anchor(--a1 left); 44 top: anchor(--a1 top); 45 height: anchor-size(--a1 height); 46 } 47 .target2 { 48 left: anchor(--a2 left); 49 top: anchor(--a2 top); 50 height: anchor-size(--a2 height); 51 } 52 </style> 53 <body onload="checkLayoutForAnchorPos('.target')"> 54 <div class="spacer" style="height: 10px"></div> 55 <div class="relpos"> 56 <div class="columns"> 57 <div class="relpos"> 58 <div class="spacer" style="height: 30px"></div> 59 <div class="anchor1"></div> 60 </div> 61 <div class="spacer" style="height: 70px"></div> 62 <div class="relpos"> 63 <div class="spacer" style="height: 10px"></div> 64 <div class="anchor2"></div> 65 </div> 66 <div class="target target1" data-expected-height=50></div> 67 <div class="target target2" data-expected-height=30></div> 68 </div> 69 <div class="target target1" data-expected-height=50></div> 70 <div class="target target2" data-expected-height=30></div> 71 </div> 72 </body>