anchored-fallback-name.html (1624B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container anchored(fallback) matching <custom-ident></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 @position-try --foo { 14 position-area: bottom; 15 } 16 @position-try --bar { 17 position-area: top; 18 } 19 .anchored { 20 position: absolute; 21 position-anchor: --a; 22 position-area: top; 23 width: 100px; 24 /* Too tall to fit over the anchor to trigger fallback */ 25 height: 100px; 26 container-type: anchored; 27 } 28 #a1 { 29 position-try-fallbacks: --foo; 30 } 31 #t1 { 32 @container anchored(fallback: --foo) { --pass: yes; } 33 } 34 #a2 { 35 position-try-fallbacks: --bar, --bar flip-block; 36 } 37 #t2 { 38 @container anchored(fallback: --bar flip-block) { --pass: yes; } 39 @container anchored(fallback: --bar) { --pass: no; } 40 } 41 </style> 42 <div id="anchor"></div> 43 <div id="a1" class="anchored"> 44 <div id="t1"></div> 45 </div> 46 <div id="a2" class="anchored"> 47 <div id="t2"></div> 48 </div> 49 <script> 50 test(() => { 51 assert_equals(getComputedStyle(t1).getPropertyValue("--pass"), "yes"); 52 }, "@container anchored(fallback) matching name"); 53 54 test(() => { 55 assert_equals(getComputedStyle(t2).getPropertyValue("--pass"), "yes"); 56 }, "@container anchored(fallback) matching name with tactics, but not name"); 57 </script>