anchored-fallback-try-tactic.html (3822B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container anchored(fallback) matching <try-tactic></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 width: 100px; 18 /* Too tall to fit over the anchor to trigger fallback */ 19 height: 100px; 20 container-type: anchored; 21 } 22 #a1 { 23 position-try-fallbacks: flip-block; 24 } 25 #a2 { 26 position-try-fallbacks: flip-inline flip-block; 27 } 28 #a3 { 29 position-try-fallbacks: flip-x flip-y; 30 } 31 #t1, #t2, #t3 { 32 --flip-block: no; 33 --flip-inline: no; 34 --flip-inline-block: no; 35 --flip-block-inline: no; 36 --flip-x: no; 37 --flip-y: no; 38 --flip-x-y: no; 39 --flip-y-x: no; 40 @container anchored(fallback: flip-block) { --flip-block: yes; } 41 @container anchored(fallback: flip-inline) { --flip-inline: yes; } 42 @container anchored(fallback: flip-inline flip-block) { --flip-inline-block: yes; } 43 @container anchored(fallback: flip-block flip-inline) { --flip-block-inline: yes; } 44 @container anchored(fallback: flip-x) { --flip-x: yes; } 45 @container anchored(fallback: flip-y) { --flip-y: yes; } 46 @container anchored(fallback: flip-x flip-y) { --flip-x-y: yes; } 47 @container anchored(fallback: flip-y flip-x) { --flip-y-x: yes; } 48 } 49 </style> 50 <div id="anchor"></div> 51 <div id="a1" class="anchored"> 52 <div id="t1"></div> 53 </div> 54 <div id="a2" class="anchored"> 55 <div id="t2"></div> 56 </div> 57 <div id="a3" class="anchored"> 58 <div id="t3"></div> 59 </div> 60 <script> 61 test(() => { 62 const style = getComputedStyle(t1); 63 assert_equals(style.getPropertyValue("--flip-block"), "yes"); 64 assert_equals(style.getPropertyValue("--flip-inline"), "no"); 65 assert_equals(style.getPropertyValue("--flip-inline-block"), "no"); 66 assert_equals(style.getPropertyValue("--flip-block-inline"), "no"); 67 assert_equals(style.getPropertyValue("--flip-x"), "no"); 68 assert_equals(style.getPropertyValue("--flip-y"), "no"); 69 assert_equals(style.getPropertyValue("--flip-x-y"), "no"); 70 assert_equals(style.getPropertyValue("--flip-y-x"), "no"); 71 }, "@container anchored(fallback) matching flip-block"); 72 73 test(() => { 74 const style = getComputedStyle(t2); 75 assert_equals(style.getPropertyValue("--flip-block"), "no"); 76 assert_equals(style.getPropertyValue("--flip-inline"), "no"); 77 assert_equals(style.getPropertyValue("--flip-inline-block"), "yes"); 78 assert_equals(style.getPropertyValue("--flip-block-inline"), "no"); 79 assert_equals(style.getPropertyValue("--flip-x"), "no"); 80 assert_equals(style.getPropertyValue("--flip-y"), "no"); 81 assert_equals(style.getPropertyValue("--flip-x-y"), "no"); 82 assert_equals(style.getPropertyValue("--flip-y-x"), "no"); 83 }, "@container anchored(fallback) matching flip-inline flip-block"); 84 85 test(() => { 86 const style = getComputedStyle(t3); 87 assert_equals(style.getPropertyValue("--flip-block"), "no"); 88 assert_equals(style.getPropertyValue("--flip-inline"), "no"); 89 assert_equals(style.getPropertyValue("--flip-inline-block"), "no"); 90 assert_equals(style.getPropertyValue("--flip-block-inline"), "no"); 91 assert_equals(style.getPropertyValue("--flip-x"), "no"); 92 assert_equals(style.getPropertyValue("--flip-y"), "no"); 93 assert_equals(style.getPropertyValue("--flip-x-y"), "yes"); 94 assert_equals(style.getPropertyValue("--flip-y-x"), "no"); 95 }, "@container anchored(fallback) matching flip-x flip-y"); 96 </script>