anchor-in-css-min-max-function.html (1343B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos"> 3 <link rel="author" href="mailto:kiet.ho@apple.com"> 4 <link rel="match" href="reference/anchor-in-css-min-max-function-ref.html"> 5 6 <style> 7 .container { 8 display: grid; 9 grid-template-columns: repeat(3, 100px); 10 gap: 10px; 11 } 12 13 .box { 14 width: 100px; 15 height: 100px; 16 } 17 18 .green { 19 background-color: green; 20 } 21 22 .red { 23 background-color: red; 24 } 25 26 #anchor1 { 27 anchor-name: --anchor1; 28 } 29 30 #anchor2 { 31 anchor-name: --anchor2; 32 } 33 34 #anchor3 { 35 anchor-name: --anchor3; 36 } 37 38 #target-fail { 39 position: relative; 40 left: 300px; 41 } 42 43 #target { 44 position: absolute; 45 top: min(anchor(--anchor1 bottom), anchor(--anchor2 bottom), anchor(--anchor3 top)); 46 left: max(anchor(--anchor1 left), anchor(--anchor2 left), anchor(--anchor3 left)); 47 z-index: 1; 48 } 49 </style> 50 51 <p>The test passes if there are three green boxes with no red.</p> 52 53 <div class="container"> 54 <!-- These boxes are 100px by 100px and sits next to each other in a row. 55 First two boxes are green and last box is red --> 56 <div class="box green" id="anchor1"></div> 57 <div class="box green" id="anchor2"></div> 58 <div class="box red" id="anchor3"></div> 59 </div> 60 61 <!-- If min()/max() works correctly, this green box should completely 62 cover the red box. --> 63 <div class="box green" id="target"></div>