position-area-basic.html (5973B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: basic position-area positioning</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 margin: 0 auto; 30 border: 2px solid; 31 background: #eee; 32 } 33 #anchored { 34 position: absolute; 35 align-self: stretch; 36 justify-self: stretch; 37 position-anchor: --anchor; 38 background: #FA08; 39 outline: 1px solid orange; 40 } 41 #anchor { 42 margin-top: 150px; 43 margin-left: 100px; 44 width: 150px; 45 height: 75px; 46 anchor-name: --anchor; 47 background: blue; 48 } 49 </style> 50 <div id="container"> 51 <div id="anchored"></div> 52 <div id="anchor"></div> 53 </div> 54 <script> 55 function test_position_area(position_area, expected_offsets) { 56 anchored.style.positionArea = position_area; 57 test(() => { 58 assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); 59 assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); 60 assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); 61 assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); 62 }, "Offsets for: " + position_area); 63 } 64 65 test_position_area("none", {left:0, top:0, width:0, height:0}); 66 test_position_area("span-all", {left:0, top:0, width:400, height:400}); 67 test_position_area("span-all span-all", {left:0, top:0, width:400, height:400}); 68 69 // Single region spans 70 test_position_area("top left", {left:0, top:0, width:100, height:150}); 71 test_position_area("top center", {left:100, top:0, width:150, height:150}); 72 test_position_area("top right", {left:250, top:0, width:150, height:150}); 73 test_position_area("center left", {left:0, top:150, width:100, height:75}); 74 test_position_area("center center", {left:100, top:150, width:150, height:75}); 75 test_position_area("center right", {left:250, top:150, width:150, height:75}); 76 test_position_area("bottom left", {left:0, top:225, width:100, height:175}); 77 test_position_area("bottom center", {left:100, top:225, width:150, height:175}); 78 test_position_area("bottom right", {left:250, top:225, width:150, height:175}); 79 80 test_position_area("start start", {left:0, top:0, width:100, height:150}); 81 test_position_area("start center", {left:100, top:0, width:150, height:150}); 82 test_position_area("start end", {left:250, top:0, width:150, height:150}); 83 test_position_area("center start", {left:0, top:150, width:100, height:75}); 84 test_position_area("center end", {left:250, top:150, width:150, height:75}); 85 test_position_area("end start", {left:0, top:225, width:100, height:175}); 86 test_position_area("end center", {left:100, top:225, width:150, height:175}); 87 test_position_area("end end", {left:250, top:225, width:150, height:175}); 88 89 test_position_area("self-start self-start", {left:0, top:0, width:100, height:150}); 90 test_position_area("self-start center", {left:100, top:0, width:150, height:150}); 91 test_position_area("self-start self-end", {left:250, top:0, width:150, height:150}); 92 test_position_area("center self-start", {left:0, top:150, width:100, height:75}); 93 test_position_area("center self-end", {left:250, top:150, width:150, height:75}); 94 test_position_area("self-end self-start", {left:0, top:225, width:100, height:175}); 95 test_position_area("self-end center", {left:100, top:225, width:150, height:175}); 96 test_position_area("self-end self-end", {left:250, top:225, width:150, height:175}); 97 98 test_position_area("y-start x-start", {left:0, top:0, width:100, height:150}); 99 test_position_area("y-start center", {left:100, top:0, width:150, height:150}); 100 test_position_area("y-start x-end", {left:250, top:0, width:150, height:150}); 101 test_position_area("center x-start", {left:0, top:150, width:100, height:75}); 102 test_position_area("center x-end", {left:250, top:150, width:150, height:75}); 103 test_position_area("y-end x-start", {left:0, top:225, width:100, height:175}); 104 test_position_area("y-end center", {left:100, top:225, width:150, height:175}); 105 test_position_area("y-end x-end", {left:250, top:225, width:150, height:175}); 106 107 test_position_area("self-y-start self-x-start", {left:0, top:0, width:100, height:150}); 108 test_position_area("self-y-start center", {left:100, top:0, width:150, height:150}); 109 test_position_area("self-y-start self-x-end", {left:250, top:0, width:150, height:150}); 110 test_position_area("center self-x-start", {left:0, top:150, width:100, height:75}); 111 test_position_area("center self-x-end", {left:250, top:150, width:150, height:75}); 112 test_position_area("self-y-end self-x-start", {left:0, top:225, width:100, height:175}); 113 test_position_area("self-y-end center", {left:100, top:225, width:150, height:175}); 114 test_position_area("self-y-end self-x-end", {left:250, top:225, width:150, height:175}); 115 116 // Multi-region spans 117 test_position_area("span-self-y-start span-self-x-end", {left:100, top:0, width:300, height:225}); 118 test_position_area("span-bottom span-all", {left:0, top:150, width:400, height:250}); 119 120 // No implicit anchor means the position-area should not apply. 121 anchored.style.positionAnchor = "auto"; 122 test_position_area("span-all top", {left:0, top:0, width:0, height:0}); 123 </script>