anchored-fallback-position-area-any.html (1556B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container anchored(fallback) matching 'any' <position-area></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 #anchor { 9 anchor-name: --a; 10 width: 100px; 11 height: 100px; 12 } 13 #anchored { 14 position: absolute; 15 position-anchor: --a; 16 position-area: top; 17 position-try-fallbacks: span-bottom; 18 width: 100px; 19 /* Too tall to fit over the anchor to trigger fallback */ 20 height: 100px; 21 container-type: anchored; 22 } 23 #target { 24 @container anchored(fallback: any) { --any: yes; } 25 @container anchored(fallback: any span-bottom) { --any-span-bottom: yes; } 26 @container anchored(fallback: span-end any) { --span-end-any: yes; } 27 @container anchored(fallback: any span-all) { --any-span-all: yes; } 28 } 29 </style> 30 <div id="anchor"></div> 31 <div id="anchored"> 32 <div id="target"></div> 33 </div> 34 <script> 35 test(() => { 36 const style = getComputedStyle(target); 37 assert_equals(style.getPropertyValue("--any"), "yes"); 38 assert_equals(style.getPropertyValue("--any-span-bottom"), "yes"); 39 assert_equals(style.getPropertyValue("--span-end-any"), "yes"); 40 assert_equals(style.getPropertyValue("--any-span-all"), "yes"); 41 }, "@container anchored(fallback: <position-area>) querying 'any'"); 42 </script>