position-try-fallbacks-limit.html (1702B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: position fallbacks list limit</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #container { 8 position: relative; 9 width: 200px; 10 height: 200px; 11 } 12 .positioned { 13 width: 200px; 14 height: 200px; 15 position: absolute; 16 top: 0; 17 left: 10px; /* overflowing #container */ 18 } 19 20 @position-try --bar { 21 left: 0; /* not overflowing #container */ 22 } 23 #t1 { 24 /* If --foo is not found, we should still try --bar even if we limit the 25 number of applied position fallbacks to five because the --foo's are not 26 added to the `position fallbacks list` per spec. */ 27 position-try-fallbacks: --foo, --foo, --foo, --foo, --foo, --foo, --foo, --bar; 28 } 29 30 /* --f1 .. --f4 all overflowing #container */ 31 @position-try --f1 { left: 10px; } 32 @position-try --f2 { left: 10px; } 33 @position-try --f3 { left: 10px; } 34 @position-try --f4 { left: 10px; } 35 @position-try --f5 { left: 20px; width: 20px; /* not overflowing #container */ } 36 #t2 { 37 position-try-fallbacks: --f1, --f2, --f3, --f4, --f5; 38 } 39 40 </style> 41 <div id="container"> 42 <div id="t1" class="positioned"></div> 43 <div id="t2" class="positioned"></div> 44 </div> 45 <script> 46 test(() => { 47 assert_equals(t1.offsetLeft, 0, "The --bar try fallback should be applied"); 48 }, "Try fallbacks which are not found are not part of the limit"); 49 50 test(() => { 51 assert_equals(t2.offsetLeft, 20, "The --f5 try fallback should be applied"); 52 }, "Must support At least five try fallbacks"); 53 </script>