position-area-align-justify.html (2587B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area positioning - alignment</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 <style> 7 /* A 300x300 container with a 100x100 centered anchor */ 8 #container { 9 position: relative; 10 width: 300px; 11 height: 300px; 12 } 13 #anchor { 14 position: absolute; 15 top: 100px; 16 left: 100px; 17 width: 100px; 18 height: 100px; 19 anchor-name: --anchor; 20 } 21 #anchored { 22 position: absolute; 23 width: 10px; 24 height: 10px; 25 inset: 10px 15px 20px 25px; 26 position-anchor: --anchor; 27 } 28 </style> 29 <div id="container"> 30 <div id="anchor"></div> 31 <div id="anchored"></div> 32 </div> 33 <script> 34 function test_position_area(position_area, expected_offsets) { 35 anchored.style.positionArea = position_area; 36 37 test(() => { 38 assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); 39 assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); 40 assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); 41 assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); 42 }, "Offsets for position-area: " + position_area); 43 } 44 45 // anchor-center in both directions 46 test_position_area("span-all", {left:145, top:145, width:10, height:10}); 47 48 // Single region spans 49 test_position_area("top left", {left:75, top:70, width:10, height:10}); 50 test_position_area("top center", {left:150, top:70, width:10, height:10}); 51 test_position_area("top right", {left:225, top:70, width:10, height:10}); 52 test_position_area("center left", {left:75, top:140, width:10, height:10}); 53 test_position_area("center center", {left:150, top:140, width:10, height:10}); 54 test_position_area("center right", {left:225, top:140, width:10, height:10}); 55 test_position_area("bottom left", {left:75, top:210, width:10, height:10}); 56 test_position_area("bottom center", {left:150, top:210, width:10, height:10}); 57 test_position_area("bottom right", {left:225, top:210, width:10, height:10}); 58 59 // Multi-region spans 60 test_position_area("top span-left", {left:175, top:70, width:10, height:10}); 61 test_position_area("top span-right", {left:125, top:70, width:10, height:10}); 62 test_position_area("span-top left", {left:75, top:170, width:10, height:10}); 63 test_position_area("span-bottom left", {left:75, top:110, width:10, height:10}); 64 65 </script>