anchored-fallback-scroll.html (1615B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container anchored(fallback) changes on scroll</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-2/#anchored-container-queries"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 7 <script src="/css/css-transitions/support/helper.js"></script> 8 <style> 9 body { margin: 0; } 10 #anchor { 11 anchor-name: --a; 12 margin-top: 100px; 13 width: 100px; 14 height: 100px; 15 } 16 #anchored { 17 position: fixed; 18 position-anchor: --a; 19 position-area: top; 20 position-try-fallbacks: flip-block; 21 width: 100px; 22 height: 100px; 23 container-type: anchored; 24 } 25 @container anchored(fallback: none) { 26 #t1 { --fallback: no; } 27 } 28 @container anchored(fallback: flip-block) { 29 #t1 { --fallback: yes; } 30 } 31 </style> 32 <div id="anchor"></div> 33 <div id="anchored"> 34 <div id="t1"></div> 35 </div> 36 <div style="height:3000px">XXX</div> 37 <script> 38 promise_test(async t => { 39 await waitForAnimationFrames(2); 40 assert_equals(document.documentElement.scrollTop, 0); 41 assert_equals(getComputedStyle(t1).getPropertyValue("--fallback"), "no"); 42 }, "@container anchored() without applied fallback at initial scroll position"); 43 44 promise_test(async t => { 45 document.documentElement.scrollTop = 100; 46 await waitForAnimationFrames(2); 47 assert_equals(getComputedStyle(t1).getPropertyValue("--fallback"), "yes"); 48 }, "@container anchored() applies fallback after scrolling down"); 49 </script>