position-area-anchor-outside.html (2411B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area positioning - anchor outside containing block</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 #container { 8 position: relative; 9 width: 400px; 10 height: 400px; 11 margin: 0 auto; 12 border: 2px solid; 13 background: #eee; 14 } 15 #anchor { 16 position: absolute; 17 left: -200px; 18 top: 500px; 19 width: 100px; 20 height: 100px; 21 anchor-name: --anchor; 22 background: blue; 23 } 24 #anchored { 25 position: absolute; 26 align-self: stretch; 27 justify-self: stretch; 28 position-anchor: --anchor; 29 background: #FA08; 30 outline: 1px solid orange; 31 } 32 </style> 33 <div id="container"> 34 <div id="anchor"></div> 35 <div id="anchored"></div> 36 </div> 37 <script> 38 function test_position_area(position_area, expected_offsets) { 39 anchored.style.positionArea = position_area; 40 41 test(() => { 42 assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); 43 assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); 44 assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); 45 assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); 46 }, "Offsets for position-area: " + position_area); 47 } 48 49 test_position_area("span-all", {left:-200, top:0, width:600, height:600}); 50 51 test_position_area("left span-all", {left:-200, top:0, width:0, height:600}); 52 test_position_area("span-left span-all", {left:-200, top:0, width:100, height:600}); 53 test_position_area("span-all center", {left:-200, top:0, width:100, height:600}); 54 test_position_area("span-right span-all", {left:-200, top:0, width:600, height:600}); 55 test_position_area("right span-all", {left:-100, top:0, width:500, height:600}); 56 57 test_position_area("top span-all", {left:-200, top:0, width:600, height:500}); 58 test_position_area("span-top span-all", {left:-200, top:0, width:600, height:600}); 59 test_position_area("center span-all", {left:-200, top:500, width:600, height:100}); 60 test_position_area("span-bottom span-all", {left:-200, top:500, width:600, height:100}); 61 test_position_area("bottom span-all", {left:-200, top:600, width:600, height:0}); 62 </script>