anchored-fallback-position-area-wm.html (2544B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container anchored(fallback) matching <position-area> - orthogonal writing modes</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 #abs-container { 9 writing-mode: vertical-lr; 10 position: absolute; 11 width: 400px; 12 height: 400px; 13 } 14 #anchor { 15 direction: rtl; 16 anchor-name: --a; 17 width: 100px; 18 height: 100px; 19 } 20 .anchored { 21 container-type: anchored; 22 position: absolute; 23 writing-mode: horizontal-tb; 24 direction: rtl; 25 position-anchor: --a; 26 position-area: left; 27 /* Does not fit left of the anchor, triggers fallback */ 28 width: 100px; 29 height: 100px; 30 } 31 #a1 { position-try-fallbacks: self-block-end self-inline-start; } 32 #a2 { position-try-fallbacks: block-end inline-end; } 33 #t1, #t2 { 34 /* Logical values are resolved against anchored / anchor container elements. */ 35 @container anchored(fallback: bottom right) { --physical: yes; } 36 @container anchored(fallback: self-inline-start self-block-end) { --anchor: yes; } 37 @container anchored(fallback: inline-end block-end) { --abs-container: yes; } 38 } 39 </style> 40 <div id="abs-container"> 41 <div id="anchor"></div> 42 <div id="a1" class="anchored"> 43 <div id="t1"></div> 44 </div> 45 <div id="a2" class="anchored"> 46 <div id="t2"></div> 47 </div> 48 </div> 49 <script> 50 test(() => { 51 const t1_style = getComputedStyle(t1); 52 assert_equals(t1_style.getPropertyValue("--physical"), "yes", "queried physical position-area"); 53 assert_equals(t1_style.getPropertyValue("--anchor"), "yes", "queried logical self position-area"); 54 assert_equals(t1_style.getPropertyValue("--abs-container"), "yes", "queried logical container position-area"); 55 }, "@container anchored(fallback) with 'self-block-end self-inline-start' fallback applied"); 56 57 test(() => { 58 const t2_style = getComputedStyle(t2); 59 assert_equals(t2_style.getPropertyValue("--physical"), "yes", "queried physical position-area"); 60 assert_equals(t2_style.getPropertyValue("--anchor"), "yes", "queried logical self position-area"); 61 assert_equals(t2_style.getPropertyValue("--abs-container"), "yes", "queried logical container position-area"); 62 }, "@container anchored(fallback) with 'block-end inline-end' fallback applied"); 63 64 </script>