| <!DOCTYPE html> |
| <title>CSS Anchor Positioning: basic inset-area positioning</title> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <!-- The grid: |
| |
| 100 150 150 |
| +--------+--------+--------+ |
| | | | | |
| 150 | | | | |
| | | | | |
| +--------+--------+--------+ |
| | | | | |
| 75 | | | | |
| | | | | |
| +--------+--------+--------+ |
| | | | | |
| 175 | | | | |
| | | | | |
| +--------+--------+--------+ |
| |
| --> |
| <style> |
| #container { |
| position: absolute; |
| width: 400px; |
| height: 400px; |
| } |
| #anchored { |
| position: absolute; |
| align-self: stretch; |
| justify-self: stretch; |
| position-anchor: --anchor; |
| } |
| #anchor { |
| margin-top: 150px; |
| margin-left: 100px; |
| width: 150px; |
| height: 75px; |
| anchor-name: --anchor; |
| } |
| </style> |
| <div id="container"> |
| <div id="anchored"></div> |
| <div id="anchor"></div> |
| </div> |
| <script> |
| function test_inset_area(inset_area, expected_offsets) { |
| anchored.style.insetArea = inset_area; |
| test(() => { |
| assert_equals(anchored.offsetLeft, expected_offsets.left); |
| assert_equals(anchored.offsetTop, expected_offsets.top); |
| assert_equals(anchored.offsetWidth, expected_offsets.width); |
| assert_equals(anchored.offsetHeight, expected_offsets.height); |
| }, "Offsets for: " + inset_area); |
| } |
| |
| test_inset_area("none", {left:0, top:0, width:0, height:0}); |
| test_inset_area("all", {left:0, top:0, width:400, height:400}); |
| test_inset_area("all / all", {left:0, top:0, width:400, height:400}); |
| |
| // Single region spans |
| test_inset_area("top / left", {left:0, top:0, width:100, height:150}); |
| test_inset_area("top / center", {left:100, top:0, width:150, height:150}); |
| test_inset_area("top / right", {left:250, top:0, width:150, height:150}); |
| test_inset_area("center / left", {left:0, top:150, width:100, height:75}); |
| test_inset_area("center / center", {left:100, top:150, width:150, height:75}); |
| test_inset_area("center / right", {left:250, top:150, width:150, height:75}); |
| test_inset_area("bottom / left", {left:0, top:225, width:100, height:175}); |
| test_inset_area("bottom / center", {left:100, top:225, width:150, height:175}); |
| test_inset_area("bottom / right", {left:250, top:225, width:150, height:175}); |
| |
| test_inset_area("start / start", {left:0, top:0, width:100, height:150}); |
| test_inset_area("start / center", {left:100, top:0, width:150, height:150}); |
| test_inset_area("start / end", {left:250, top:0, width:150, height:150}); |
| test_inset_area("center / start", {left:0, top:150, width:100, height:75}); |
| test_inset_area("center / end", {left:250, top:150, width:150, height:75}); |
| test_inset_area("end / start", {left:0, top:225, width:100, height:175}); |
| test_inset_area("end / center", {left:100, top:225, width:150, height:175}); |
| test_inset_area("end / end", {left:250, top:225, width:150, height:175}); |
| |
| test_inset_area("self-start / self-start", {left:0, top:0, width:100, height:150}); |
| test_inset_area("self-start / center", {left:100, top:0, width:150, height:150}); |
| test_inset_area("self-start / self-end", {left:250, top:0, width:150, height:150}); |
| test_inset_area("center / self-start", {left:0, top:150, width:100, height:75}); |
| test_inset_area("center / self-end", {left:250, top:150, width:150, height:75}); |
| test_inset_area("self-end / self-start", {left:0, top:225, width:100, height:175}); |
| test_inset_area("self-end / center", {left:100, top:225, width:150, height:175}); |
| test_inset_area("self-end / self-end", {left:250, top:225, width:150, height:175}); |
| |
| test_inset_area("y-start / x-start", {left:0, top:0, width:100, height:150}); |
| test_inset_area("y-start / center", {left:100, top:0, width:150, height:150}); |
| test_inset_area("y-start / x-end", {left:250, top:0, width:150, height:150}); |
| test_inset_area("center / x-start", {left:0, top:150, width:100, height:75}); |
| test_inset_area("center / x-end", {left:250, top:150, width:150, height:75}); |
| test_inset_area("y-end / x-start", {left:0, top:225, width:100, height:175}); |
| test_inset_area("y-end / center", {left:100, top:225, width:150, height:175}); |
| test_inset_area("y-end / x-end", {left:250, top:225, width:150, height:175}); |
| |
| test_inset_area("y-self-start / x-self-start", {left:0, top:0, width:100, height:150}); |
| test_inset_area("y-self-start / center", {left:100, top:0, width:150, height:150}); |
| test_inset_area("y-self-start / x-self-end", {left:250, top:0, width:150, height:150}); |
| test_inset_area("center / x-self-start", {left:0, top:150, width:100, height:75}); |
| test_inset_area("center / x-self-end", {left:250, top:150, width:150, height:75}); |
| test_inset_area("y-self-end / x-self-start", {left:0, top:225, width:100, height:175}); |
| test_inset_area("y-self-end / center", {left:100, top:225, width:150, height:175}); |
| test_inset_area("y-self-end / x-self-end", {left:250, top:225, width:150, height:175}); |
| |
| // Multi-region spans |
| test_inset_area("y-self-start center / self-end center", {left:100, top:0, width:300, height:225}); |
| test_inset_area("bottom center / x-start x-end", {left:0, top:150, width:400, height:250}); |
| |
| // Non-orthogonal axes. |
| test_inset_area("x-start / left", {left:0, top:0, width:0, height:0}); |
| test_inset_area("y-end / y-self-start", {left:0, top:0, width:0, height:0}); |
| |
| // No implicit anchor means the inset-area should not apply. |
| anchored.style.positionAnchor = "implicit"; |
| test_inset_area("all / top", {left:0, top:0, width:0, height:0}); |
| </script> |
