position-area-with-insets.html (2884B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area positioning with additional insets</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <!-- The grid: 7 8 100 150 150 9 +--------+--------+--------+ 10 | | | | 11 150 | | | | 12 | | | | 13 +--------+--------+--------+ 14 | | | | 15 75 | | | | 16 | | | | 17 +--------+--------+--------+ 18 | | | | 19 175 | | | | 20 | | | | 21 +--------+--------+--------+ 22 23 --> 24 <style> 25 #container { 26 position: absolute; 27 width: 400px; 28 height: 400px; 29 } 30 #anchored { 31 position: absolute; 32 align-self: stretch; 33 justify-self: stretch; 34 position-anchor: --anchor; 35 } 36 #anchor { 37 margin-top: 150px; 38 margin-left: 100px; 39 width: 150px; 40 height: 75px; 41 anchor-name: --anchor; 42 } 43 </style> 44 <div id="container"> 45 <div id="anchored"></div> 46 <div id="anchor"></div> 47 </div> 48 <script> 49 function test_position_area(position_area, insets, expected_offsets) { 50 anchored.style.positionArea = position_area; 51 for (const [prop, value] of Object.entries(insets)) { 52 anchored.style[prop] = value; 53 } 54 55 test(() => { 56 assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); 57 assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); 58 assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); 59 assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); 60 }, "Offsets for position-area: " + position_area + " and insets: " + JSON.stringify(insets)); 61 } 62 63 test_position_area("span-all", {top:"5px", bottom:"5px", left:"5px", right:"5px"}, 64 {left:5, top:5, width:390, height:390}); 65 66 test_position_area("center center", {top:"10px", bottom:"40px", left:"5px", right:"15px"}, 67 {left:105, top:160, width:130, height:25}); 68 69 test_position_area("left bottom", {top:"10px", bottom:"40px", left:"5px", right:"15px"}, 70 {left:5, top:235, width:80, height:125}); 71 72 test_position_area("span-right center", {top:"20%", bottom:"auto", left:"auto", right:"25%"}, 73 {left:100, top:165, width:225, height:60}); 74 75 // No implicit anchor means the position-area should not apply, but the insets still should. 76 anchored.style.positionAnchor = "auto"; 77 test_position_area("bottom right", {left:"50px", right:"100px", top:"30px" , bottom:"10px"}, 78 {left:50, top:30, width:250, height:360}); 79 </script>