| <!DOCTYPE html> |
| <title>CSS Conditional Test: @container anchored(fallback) matching <position-area> - orthogonal writing modes</title> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-position-2/#anchored-container-queries"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> |
| <style> |
| #abs-container { |
| writing-mode: vertical-lr; |
| position: absolute; |
| width: 400px; |
| height: 400px; |
| } |
| #anchor { |
| direction: rtl; |
| anchor-name: --a; |
| width: 100px; |
| height: 100px; |
| } |
| .anchored { |
| container-type: anchored; |
| position: absolute; |
| writing-mode: horizontal-tb; |
| direction: rtl; |
| position-anchor: --a; |
| position-area: left; |
| /* Does not fit left of the anchor, triggers fallback */ |
| width: 100px; |
| height: 100px; |
| } |
| #a1 { position-try-fallbacks: self-block-end self-inline-start; } |
| #a2 { position-try-fallbacks: block-end inline-end; } |
| #t1, #t2 { |
| /* Logical values are resolved against anchored / anchor container elements. */ |
| @container anchored(fallback: bottom right) { --physical: yes; } |
| @container anchored(fallback: self-inline-start self-block-end) { --anchor: yes; } |
| @container anchored(fallback: inline-end block-end) { --abs-container: yes; } |
| } |
| </style> |
| <div id="abs-container"> |
| <div id="anchor"></div> |
| <div id="a1" class="anchored"> |
| <div id="t1"></div> |
| </div> |
| <div id="a2" class="anchored"> |
| <div id="t2"></div> |
| </div> |
| </div> |
| <script> |
| test(() => { |
| const t1_style = getComputedStyle(t1); |
| assert_equals(t1_style.getPropertyValue("--physical"), "yes", "queried physical position-area"); |
| assert_equals(t1_style.getPropertyValue("--anchor"), "yes", "queried logical self position-area"); |
| assert_equals(t1_style.getPropertyValue("--abs-container"), "yes", "queried logical container position-area"); |
| }, "@container anchored(fallback) with 'self-block-end self-inline-start' fallback applied"); |
| |
| test(() => { |
| const t2_style = getComputedStyle(t2); |
| assert_equals(t2_style.getPropertyValue("--physical"), "yes", "queried physical position-area"); |
| assert_equals(t2_style.getPropertyValue("--anchor"), "yes", "queried logical self position-area"); |
| assert_equals(t2_style.getPropertyValue("--abs-container"), "yes", "queried logical container position-area"); |
| }, "@container anchored(fallback) with 'block-end inline-end' fallback applied"); |
| |
| </script> |
