position-try-backdrop.html (896B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-try-fallbacks on ::backdrop</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @position-try --pt { 8 left: 300px; 9 } 10 #anchor { 11 width: 100px; 12 height: 100px; 13 margin-left: 150px; 14 margin-top: 50px; 15 background: coral; 16 } 17 dialog::backdrop { 18 background: seagreen; 19 width:100px; 20 height:100px; 21 left: 9999px; /* Force overflow */ 22 position-try-fallbacks: --pt; 23 } 24 </style> 25 <div id=anchor>Anchor</div> 26 <dialog id=dialog>Dialog</dialog> 27 <script> 28 test((t) => { 29 dialog.showModal(); 30 let style = getComputedStyle(dialog, '::backdrop'); 31 assert_equals(style.left, '300px'); 32 }, '::backdrop can use position-try-fallbacks'); 33 </script>