anchor-function-pseudo-element-basic.html (1990B)
1 <!DOCTYPE html> 2 <title>Positioning pseudo-elements using anchor functions</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#positioning"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 body { margin: 0 } 8 #anchor, #target::before, #target::after { 9 width: 100px; 10 height: 100px; 11 position: absolute; 12 } 13 #anchor.moved { 14 left: 200px; 15 top: 200px; 16 } 17 #anchor { 18 left: 50px; 19 top: 100px; 20 anchor-name: --a; 21 background: blue; 22 } 23 #target::before { 24 position-anchor: --a; 25 left: anchor(right); 26 top: anchor(top); 27 background: green; 28 content:''; 29 } 30 #target::after { 31 position-anchor: --a; 32 left: anchor(left); 33 top: anchor(bottom); 34 background: green; 35 content:''; 36 } 37 </style> 38 <div id=anchor></div> 39 <div id=target></div> 40 <script> 41 test(() => { 42 assert_equals(getComputedStyle(target, '::before').top, '100px', "#target::before top is positioned against anchor"); 43 assert_equals(getComputedStyle(target, '::before').left, '150px', "#target::before left is positioned against anchor"); 44 assert_equals(getComputedStyle(target, '::after').top, '200px', "#target::after top is positioned against anchor"); 45 assert_equals(getComputedStyle(target, '::after').left, '50px', "#target::after left is positioned against anchor"); 46 }, "Initial anchored position"); 47 48 test(() => { 49 anchor.classList.add("moved"); 50 assert_equals(getComputedStyle(target, '::before').top, '200px', "#target::before top is positioned against anchor"); 51 assert_equals(getComputedStyle(target, '::before').left, '300px', "#target::before left is positioned against anchor"); 52 assert_equals(getComputedStyle(target, '::after').top, '300px', "#target::after top is positioned against anchor"); 53 assert_equals(getComputedStyle(target, '::after').left, '200px', "#target::after left is positioned against anchor"); 54 }, "Anchored position after moving"); 55 </script>