anchored-fallback-basic.html (1585B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: Basic @container anchored(fallback) support</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 <style> 8 body { margin: 0; } 9 #anchor { 10 anchor-name: --a; 11 margin-top: 100px; 12 width: 100px; 13 height: 100px; 14 } 15 .anchored { 16 position: absolute; 17 position-anchor: --a; 18 position-area: top; 19 position-try-fallbacks: flip-block; 20 width: 100px; 21 height: 100px; 22 container-type: anchored; 23 } 24 .anchored + .anchored { 25 /* Too tall to fit over the anchor to trigger fallback */ 26 height: 200px; 27 } 28 @container anchored(fallback: none) { 29 div { --fallback: no; } 30 } 31 @container anchored(fallback: flip-block) { 32 div { --fallback: yes; } 33 } 34 </style> 35 <div id="anchor"></div> 36 <div class="anchored"> 37 <div id="t1"></div> 38 </div> 39 <div class="anchored"> 40 <div id="t2"></div> 41 </div> 42 <script> 43 test(() => { 44 assert_equals(document.querySelector(".anchored").offsetTop, 0); 45 assert_equals(getComputedStyle(t1).getPropertyValue("--fallback"), "no"); 46 }, "@container anchored() without applied fallback"); 47 48 test(() => { 49 assert_equals(document.querySelector(".anchored + .anchored").offsetTop, 200); 50 assert_equals(getComputedStyle(t2).getPropertyValue("--fallback"), "yes"); 51 }, "@container anchored() with fallback applied"); 52 </script>