anchored-fallback-display-change.html (1504B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container anchored(fallback) changes display type</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 body { margin: 0; } 9 #anchor { 10 anchor-name: --a; 11 margin-top: 100px; 12 width: 100px; 13 height: 100px; 14 } 15 #anchored { 16 position: absolute; 17 position-anchor: --a; 18 position-area: top; 19 position-try-fallbacks: flip-block; 20 width: 100px; 21 height: 100px; 22 container-type: anchored; 23 } 24 #t1 { height: 100%; } 25 @container anchored(fallback: none) { 26 #t1 { display: none; } 27 } 28 @container anchored(fallback: flip-block) { 29 #t1 { display: block; } 30 } 31 </style> 32 <div id="anchor"></div> 33 <div id="anchored"> 34 <span id="t1"></span> 35 </div> 36 <script> 37 test(() => { 38 assert_equals(anchored.offsetTop, 0, "Non-fallback rendering"); 39 assert_equals(t1.offsetHeight, 0, "display:none - zero offsetHeight"); 40 }, "@container anchored() without applied fallback"); 41 42 test(() => { 43 anchor.style.marginTop = "50px"; // Trigger fallback 44 assert_equals(anchored.offsetTop, 150, "Anchored element rendered below anchor"); 45 assert_equals(t1.offsetHeight, 100, "Fallback applies display:block"); 46 }, "@container anchored() with fallback applied"); 47 </script>