sticky-nested.yaml (6969B)
1 root: 2 items: 3 # This is a scroll frame with an out-of-viewport rect that should be pushed into the 4 # viewport by its "bottom" sticky constraint. 5 - type: scroll-frame 6 id: 2 7 bounds: [10, 10, 50, 50] 8 content-size: [200, 200] 9 clip-to-frame: true 10 items: 11 - type: sticky-frame 12 bounds: [10, 60, 50, 50] 13 margin-bottom: 0 14 vertical-offset-bounds: [-500, 0] 15 items: 16 - type: clip 17 id: 22 18 bounds: [10, 60, 50, 50] 19 content-size: [100, 100] 20 - type: rect 21 bounds: [10, 60, 50, 50] 22 color: green 23 clip-chain: [2, 22] 24 # Do the same thing, but now for the "top" constraint. 25 - type: scroll-frame 26 id: 3 27 bounds: [70, 10, 50, 50] 28 content-size: [200, 200] 29 scroll-offset: [0, 50] 30 clip-to-frame: true 31 items: 32 - type: sticky-frame 33 bounds: [70, 10, 50, 50] 34 margin-top: 0 35 vertical-offset-bounds: [0, 500] 36 items: 37 - type: clip 38 id: 23 39 bounds: [70, 10, 50, 50] 40 content-size: [100, 100] 41 - type: rect 42 bounds: [70, 10, 50, 50] 43 color: green 44 clip-chain: [3, 23] 45 # Do the same thing, but now for the "right" constraint. 46 - type: scroll-frame 47 id: 4 48 bounds: [10, 70, 50, 50] 49 content-size: [200, 200] 50 clip-to-frame: true 51 items: 52 - type: sticky-frame 53 bounds: [60, 70, 50, 50] 54 margin-right: 0 55 horizontal-offset-bounds: [-500, 0] 56 items: 57 - type: clip 58 id: 24 59 bounds: [60, 70, 50, 50] 60 content-size: [100, 100] 61 - type: rect 62 bounds: [60, 70, 50, 50] 63 color: green 64 clip-chain: [4, 24] 65 # Do the same thing, but now for the "left" constraint. 66 - type: scroll-frame 67 id: 5 68 bounds: [70, 70, 50, 50] 69 content-size: [200, 200] 70 scroll-offset: [50, 0] 71 clip-to-frame: true 72 items: 73 - type: sticky-frame 74 bounds: [70, 70, 50, 50] 75 margin-left: 0 76 horizontal-offset-bounds: [0, 500] 77 items: 78 - type: clip 79 id: 25 80 bounds: [70, 70, 50, 50] 81 content-size: [100, 100] 82 - type: rect 83 bounds: [70, 70, 50, 50] 84 color: green 85 clip-chain: [5, 25] 86 87 # The same tests, but this time with a margin. 88 - type: scroll-frame 89 id: 6 90 bounds: [130, 10, 50, 50] 91 content-size: [200, 200] 92 clip-to-frame: true 93 items: 94 - type: sticky-frame 95 bounds: [130, 60, 50, 50] 96 margin-bottom: 10 97 vertical-offset-bounds: [-500, 0] 98 items: 99 - type: clip 100 id: 26 101 bounds: [130, 60, 50, 50] 102 content-size: [100, 100] 103 - type: rect 104 bounds: [130, 60, 50, 50] 105 color: green 106 clip-chain: [6, 26] 107 108 # Do the same thing, but now for the "top" constraint. 109 - type: scroll-frame 110 id: 7 111 bounds: [190, 10, 50, 50] 112 content-size: [200, 200] 113 scroll-offset: [0, 50] 114 clip-to-frame: true 115 items: 116 - type: sticky-frame 117 bounds: [190, 10, 50, 50] 118 margin-top: 10 119 vertical-offset-bounds: [0, 500] 120 items: 121 - type: clip 122 id: 27 123 bounds: [190, 10, 50, 50] 124 content-size: [100, 100] 125 - type: rect 126 bounds: [190, 10, 50, 50] 127 color: green 128 clip-chain: [7, 27] 129 130 # Do the same thing, but now for the "right" constraint. 131 - type: scroll-frame 132 id: 8 133 bounds: [130, 70, 50, 50] 134 content-size: [200, 200] 135 clip-to-frame: true 136 items: 137 - type: sticky-frame 138 bounds: [180, 70, 50, 50] 139 margin-right: 10 140 horizontal-offset-bounds: [-500, 0] 141 items: 142 - type: clip 143 id: 28 144 bounds: [180, 70, 50, 50] 145 content-size: [100, 100] 146 - type: rect 147 bounds: [180, 70, 50, 50] 148 color: green 149 clip-chain: [8, 28] 150 151 # Do the same thing, but now for the "left" constraint. 152 - type: scroll-frame 153 id: 9 154 bounds: [190, 70, 50, 50] 155 content-size: [200, 200] 156 scroll-offset: [50, 0] 157 clip-to-frame: true 158 items: 159 - type: sticky-frame 160 bounds: [190, 70, 50, 50] 161 margin-left: 10 162 horizontal-offset-bounds: [0, 500] 163 items: 164 - type: clip 165 id: 29 166 bounds: [190, 70, 50, 50] 167 content-size: [100, 100] 168 - type: rect 169 bounds: [190, 70, 50, 50] 170 color: green 171 clip-chain: [9, 29] 172 173 # The same tests, but this time with a limit. 174 - type: scroll-frame 175 id: 10 176 bounds: [250, 10, 50, 50] 177 content-size: [200, 200] 178 clip-to-frame: true 179 items: 180 - type: sticky-frame 181 bounds: [250, 60, 50, 50] 182 margin-bottom: 0 183 vertical-offset-bounds: [-25, 0] 184 items: 185 - type: clip 186 id: 30 187 bounds: [250, 60, 50, 50] 188 content-size: [100, 100] 189 - type: rect 190 bounds: [250, 60, 50, 50] 191 color: green 192 clip-chain: [10, 30] 193 194 # Do the same thing, but now for the "top" constraint. 195 - type: scroll-frame 196 id: 11 197 bounds: [310, 10, 50, 50] 198 content-size: [200, 200] 199 scroll-offset: [0, 50] 200 clip-to-frame: true 201 items: 202 - type: sticky-frame 203 bounds: [310, 10, 50, 50] 204 margin-top: 0 205 vertical-offset-bounds: [0, 25] 206 items: 207 - type: clip 208 bounds: [310, 10, 50, 50] 209 content-size: [100, 100] 210 id: 31 211 - type: rect 212 bounds: [310, 10, 50, 50] 213 color: green 214 clip-chain: [11, 31] 215 216 # Do the same thing, but now for the "right" constraint. 217 - type: scroll-frame 218 id: 12 219 bounds: [250, 70, 50, 50] 220 content-size: [200, 200] 221 clip-to-frame: true 222 items: 223 - type: sticky-frame 224 bounds: [300, 70, 50, 50] 225 margin-right: 0 226 horizontal-offset-bounds: [-25, 0] 227 items: 228 - type: clip 229 id: 32 230 bounds: [300, 70, 50, 50] 231 content-size: [100, 100] 232 - type: rect 233 bounds: [300, 70, 50, 50] 234 color: green 235 clip-chain: [12, 32] 236 237 # Do the same thing, but now for the "left" constraint. 238 - type: scroll-frame 239 id: 13 240 bounds: [310, 70, 50, 50] 241 content-size: [200, 200] 242 scroll-offset: [50, 0] 243 clip-to-frame: true 244 items: 245 - type: sticky-frame 246 bounds: [310, 70, 50, 50] 247 margin-left: 0 248 horizontal-offset-bounds: [0, 25] 249 items: 250 - type: clip 251 id: 33 252 bounds: [310, 70, 50, 50] 253 content-size: [100, 100] 254 - type: rect 255 bounds: [310, 70, 50, 50] 256 color: green 257 clip-chain: [13, 33]