position-try-pseudo-element.html (1372B)
1 <!DOCTYPE html> 2 <title>@position-try for ::before and ::after pseudo elements</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #container { 8 background: maroon; 9 position: relative; 10 width: 195px; 11 height: 200px; 12 } 13 #target::before { 14 position-try-fallbacks: --f1, --f2; 15 background: lime; 16 position: absolute; 17 left: 200px; 18 top: 200px; 19 width: 100px; 20 height: 200px; 21 content: ""; 22 } 23 #target::after { 24 position-try-fallbacks: --f1, --f2; 25 background: green; 26 position: absolute; 27 left: 100px; 28 width: 100px; 29 height: 100px; 30 content: ""; 31 } 32 @position-try --f1 { 33 top: 100px; 34 left: 50px; 35 } 36 @position-try --f2 { 37 top: 0px; 38 left: 0px; 39 } 40 </style> 41 <div id="container"> 42 <div id="target"></div> 43 </div> 44 <script> 45 test(() => { 46 const before_style = getComputedStyle(target, "::before"); 47 assert_equals(before_style.top, "0px"); 48 assert_equals(before_style.left, "0px"); 49 }, "::before using second fallback"); 50 test(() => { 51 const after_style = getComputedStyle(target, "::after"); 52 assert_equals(after_style.top, "100px"); 53 assert_equals(after_style.left, "50px"); 54 }, "::after using first fallback"); 55 </script>