pseudo-element-anchor-dynamic.html (1662B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Pseudo elements as anchors</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 .cb { 8 position: relative; 9 width: 200px; 10 height: 200px; 11 } 12 #anchor1.enabled::before { 13 display: block; 14 width: 100px; 15 height: 100px; 16 content: ""; 17 anchor-name: --a1; 18 background: blue; 19 } 20 #anchor2.enabled::after { 21 display: block; 22 width: 100px; 23 height: 100px; 24 content: ""; 25 anchor-name: --a2; 26 background: pink; 27 } 28 .anchored { 29 position: absolute; 30 width: 100px; 31 height: 100px; 32 left: anchor(right); 33 top: anchor(bottom); 34 background: orange; 35 } 36 #anchored1 { position-anchor: --a1; } 37 #anchored2 { position-anchor: --a2; } 38 </style> 39 <div class="cb"> 40 <div id="anchor1"></div> 41 <div id="anchored1" class="anchored"></div> 42 </div> 43 <div class="cb"> 44 <div id="anchor2"></div> 45 <div id="anchored2" class="anchored"></div> 46 </div> 47 <script> 48 test(() => { 49 assert_equals(anchored1.offsetLeft, 0); 50 assert_equals(anchored1.offsetTop, 0); 51 anchor1.className = "enabled"; 52 assert_equals(anchored1.offsetLeft, 100); 53 assert_equals(anchored1.offsetTop, 100); 54 }, "::before as anchor dynamically generated"); 55 test(() => { 56 assert_equals(anchored2.offsetLeft, 0); 57 assert_equals(anchored2.offsetTop, 0); 58 anchor2.className = "enabled"; 59 assert_equals(anchored2.offsetLeft, 100); 60 assert_equals(anchored2.offsetTop, 100); 61 }, "::after as anchor dynamically generated"); 62 </script>