anchored-fallback-implicit-any.html (1431B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container anchored(fallback) matching implicit '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: right 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 /* Implicit 'any' for the horizontal part of the query */ 25 @container anchored(fallback: span-bottom) { --span-bottom: yes; } 26 /* Implicit 'any' for the vertical part of the query */ 27 @container anchored(fallback: right) { --right: 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("--span-bottom"), "yes"); 38 assert_equals(style.getPropertyValue("--right"), "yes"); 39 }, "@container anchored(fallback: <position-area>) querying single axis with implicit 'any'"); 40 </script>