position-try-003.html (3129B)
1 <!DOCTYPE html> 2 <title>Tests fallback positions that overflow the inset-modified containing block regardless of scrolling</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <script src="support/test-common.js"></script> 9 <style> 10 body { margin: 0; } 11 .ltr { direction: ltr; } 12 .rtl { direction: rtl; } 13 .vrl { writing-mode: vertical-rl; } 14 .vlr { writing-mode: vertical-lr; } 15 16 .cb { 17 width: 200px; 18 height: 200px; 19 transform: scale(1); 20 } 21 22 .spacer { 23 block-size: 50px; 24 } 25 26 .anchor { 27 width: 100px; 28 height: 100px; 29 margin-inline-start: 50px; 30 background: orange; 31 anchor-name: --a; 32 } 33 34 .anchored { 35 position: absolute; 36 width: 50px; 37 height: 50px; 38 background: lime; 39 } 40 41 /* Used on a element whose block and inline axes are the same with its 42 containing block, so that the first two positions will exceed the end edges 43 of the IMCB, and the last position will be used. */ 44 .exceeds-end { 45 position-try-fallbacks: --exceeds-end-1, --exceeds-end-2; 46 left: 0; 47 right: anchor(--a left); 48 width: 100px; 49 } 50 51 @position-try --exceeds-end-1 { 52 inset: auto; 53 top: 0; 54 bottom: anchor(--a top); 55 width: auto; 56 height: 100px; 57 } 58 59 @position-try --exceeds-end-2 { 60 inset: auto; 61 top: 11px; 62 left: 22px; 63 width: auto; 64 height: auto; 65 } 66 67 /* Used on a element whose block and inline axes are in the opposite directions 68 of its containing block, so that the first two positions will exceed the 69 start edges of the IMCB, and the last position will be used. */ 70 .exceeds-start { 71 position-try-fallbacks: --exceeds-start-1, --exceeds-start-2; 72 bottom: 0; 73 top: anchor(--a bottom); 74 height: 100px; 75 } 76 77 @position-try --exceeds-start-1 { 78 inset: auto; 79 right: 0; 80 left: anchor(--a right); 81 width: 100px; 82 height: auto; 83 } 84 85 @position-try --exceeds-start-2 { 86 inset: auto; 87 top: 11px; 88 left: 22px; 89 height: auto; 90 } 91 92 /* Both inset sides are `auto`, but the size is too big to fit in the containing 93 block. */ 94 .exceeds-size { 95 position-try-fallbacks: --exceeds-size-1, --exceeds-size-2; 96 top: anchor(--a bottom); 97 left: auto; 98 right: auto; 99 width: 300px; 100 } 101 102 @position-try --exceeds-size-1 { 103 inset: auto; 104 left: anchor(--a right); 105 width: auto; 106 height: 300px; 107 } 108 109 @position-try --exceeds-size-2 { 110 inset: auto; 111 width: auto; 112 top: 11px; 113 left: 22px; 114 } 115 </style> 116 117 <body onload="checkLayoutForAnchorPos('.anchored')"> 118 <div class=cb> 119 <div class=spacer></div> 120 <div class=anchor></div> 121 <div class="anchored exceeds-end" 122 data-offset-x=22 data-offset-y=11></div> 123 </div> 124 125 <div class="cb rtl vrl"> 126 <div class=spacer></div> 127 <div class=anchor></div> 128 <div class="anchored ltr vlr exceeds-start" 129 data-offset-x=22 data-offset-y=11></div> 130 </div> 131 132 <div class="cb"> 133 <div class=spacer></div> 134 <div class=anchor></div> 135 <div class="anchored exceeds-size" 136 data-offset-x=22 data-offset-y=11></div> 137 </div> 138 </body>