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