position-try-switch-from-fixed-anchor.html (1683B)
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, 5 switching to fixed-position anchor on scroll and back on another scroll</title> 6 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-rule"> 7 <link rel="match" href="position-try-switch-from-fixed-anchor-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="/common/rendering-utils.js"></script> 10 <style> 11 html { 12 scrollbar-width: none; 13 } 14 body { 15 width: 150vw; 16 height: 150vh; 17 } 18 .anchor { 19 width: 50px; 20 height: 50px; 21 background: orange; 22 } 23 #anchor1 { 24 anchor-name: --anchor1; 25 position: absolute; 26 top: 100px; 27 left: 350px; 28 } 29 #anchor2 { 30 anchor-name: --anchor2; 31 position:fixed; 32 right: 0; 33 bottom: 0; 34 } 35 #anchored { 36 position-anchor: --anchor1; 37 position-area: top; 38 position-try-fallbacks: --fixed; 39 position: fixed; 40 width: 50px; 41 height: 50px; 42 background: blue; 43 } 44 @position-try --fixed { 45 position-area: top left; 46 position-anchor: --anchor2; 47 } 48 </style> 49 <div class="anchor" id="anchor1"></div> 50 <div class="anchor" id="anchor2"></div> 51 <div id="anchored"></div> 52 <script> 53 waitForAtLeastOneFrame().then(() => { 54 window.scrollTo(250, 100); 55 // The initial option no longer fits. Switch to fallback. 56 waitForAtLeastOneFrame().then(() => { 57 window.scrollTo(0, 0); 58 59 // The initial option would fit again, but so does the fallback. Redisplay 60 // to move away from the fallback option. 61 anchored.style.display = "none"; 62 waitForAtLeastOneFrame().then(() => { 63 anchored.style.display = "block"; 64 takeScreenshot(); 65 }); 66 }); 67 }); 68 </script>