| <!DOCTYPE html> |
| <title>CSS Conditional Test: @container anchored(fallback) matching <try-tactic></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> |
| #anchor { |
| anchor-name: --a; |
| width: 100px; |
| height: 100px; |
| } |
| .anchored { |
| position: absolute; |
| position-anchor: --a; |
| position-area: top; |
| width: 100px; |
| /* Too tall to fit over the anchor to trigger fallback */ |
| height: 100px; |
| container-type: anchored; |
| } |
| #a1 { |
| position-try-fallbacks: flip-block; |
| } |
| #a2 { |
| position-try-fallbacks: flip-inline flip-block; |
| } |
| #t1, #t2 { |
| --flip-block: no; |
| --flip-inline: no; |
| --flip-inline-block: no; |
| --flip-block-inline: no; |
| @container anchored(fallback: flip-block) { --flip-block: yes; } |
| @container anchored(fallback: flip-inline) { --flip-inline: yes; } |
| @container anchored(fallback: flip-inline flip-block) { --flip-inline-block: yes; } |
| @container anchored(fallback: flip-block flip-inline) { --flip-block-inline: yes; } |
| } |
| </style> |
| <div id="anchor"></div> |
| <div id="a1" class="anchored"> |
| <div id="t1"></div> |
| </div> |
| <div id="a2" class="anchored"> |
| <div id="t2"></div> |
| </div> |
| <script> |
| test(() => { |
| const style = getComputedStyle(t1); |
| assert_equals(style.getPropertyValue("--flip-block"), "yes"); |
| assert_equals(style.getPropertyValue("--flip-inline"), "no"); |
| assert_equals(style.getPropertyValue("--flip-inline-block"), "no"); |
| assert_equals(style.getPropertyValue("--flip-block-inline"), "no"); |
| }, "@container anchored(fallback) matching flip-block"); |
| |
| test(() => { |
| const style = getComputedStyle(t2); |
| assert_equals(style.getPropertyValue("--flip-block"), "no"); |
| assert_equals(style.getPropertyValue("--flip-inline"), "no"); |
| assert_equals(style.getPropertyValue("--flip-inline-block"), "yes"); |
| assert_equals(style.getPropertyValue("--flip-block-inline"), "no"); |
| }, "@container anchored(fallback) matching flip-inline flip-block"); |
| </script> |
