position-try-switch-to-fixed-anchor.html (1223B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <meta charset="utf-8"> 4 <title>CSS Anchor Positioning Test: @position-try with different default anchors, switching to fixed-position anchor on scroll</title> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-rule"> 6 <link rel="match" href="position-try-switch-to-fixed-anchor-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <script src="/common/rendering-utils.js"></script> 9 <style> 10 body { 11 width: 150vw; 12 height: 150vh; 13 } 14 .anchor { 15 width: 50px; 16 height: 50px; 17 background: orange; 18 } 19 #anchor1 { 20 anchor-name: --anchor1; 21 position: absolute; 22 top: 100px; 23 left: 350px; 24 } 25 #anchor2 { 26 anchor-name: --anchor2; 27 position:fixed; 28 right: 0; 29 bottom: 0; 30 } 31 #anchored { 32 position-anchor: --anchor1; 33 position-area: top; 34 position-try-fallbacks: --fixed; 35 position: fixed; 36 width: 50px; 37 height: 50px; 38 background: blue; 39 } 40 @position-try --fixed { 41 position-area: top left; 42 position-anchor: --anchor2; 43 } 44 </style> 45 <div class="anchor" id="anchor1"></div> 46 <div class="anchor" id="anchor2"></div> 47 <div id="anchored"></div> 48 <script> 49 waitForAtLeastOneFrame().then(() => { 50 window.scrollTo(250, 100); 51 takeScreenshot(); 52 }); 53 </script>