anchored-fallback-position-area.html (2211B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container anchored(fallback) matching <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: 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 /* Logical values are resolved against anchored / anchor container elements. 25 Changing the writing-mode for the target should have no effect. */ 26 writing-mode: vertical-lr; 27 @container anchored(fallback: bottom) { --bottom: yes; } 28 @container anchored(fallback: span-all bottom) { --span-all-bottom: yes; } 29 @container anchored(fallback: block-end) { --block-end: yes; } 30 @container anchored(fallback: block-end span-all) { --block-end-span-all: yes; } 31 @container anchored(fallback: self-block-end) { --self-block-end: yes; } 32 @container anchored(fallback: span-all self-block-end) { --span-all-self-block-end: yes; } 33 @container anchored(fallback: self-y-end) { --self-y-end: yes; } 34 } 35 </style> 36 <div id="anchor"></div> 37 <div id="anchored"> 38 <div id="target"></div> 39 </div> 40 <script> 41 test(() => { 42 const style = getComputedStyle(target); 43 assert_equals(style.getPropertyValue("--bottom"), "yes"); 44 assert_equals(style.getPropertyValue("--span-all-bottom"), "yes"); 45 assert_equals(style.getPropertyValue("--block-end"), "yes"); 46 assert_equals(style.getPropertyValue("--block-end-span-all"), "yes"); 47 assert_equals(style.getPropertyValue("--self-block-end"), "yes"); 48 assert_equals(style.getPropertyValue("--span-all-self-block-end"), "yes"); 49 assert_equals(style.getPropertyValue("--self-y-end"), "yes"); 50 }, "@container anchored(fallback) with <position-area> fallback applied"); 51 </script>