sticky-applied.yaml (10389B)
1 root: 2 items: 3 # Tests sticky-positioned items with previously-applied-offsets. 4 5 # This item is bottom-sticky; we indicate to WR that it already has had 6 # a sticky offset of y=-50 applied, and then scroll down by 50 pixels. WR 7 # should unapply the entire 50px that was applied, and leave the rect 8 # visually in the same spot. 9 - type: scroll-frame 10 id: 2 11 bounds: [10, 10, 50, 50] 12 content-size: [200, 200] 13 scroll-offset: [0, 50] 14 clip-to-frame: true 15 items: 16 - type: sticky-frame 17 bounds: [10, 10, 50, 50] 18 margin-bottom: 0 19 vertical-offset-bounds: [-500, 0] 20 previously-applied-offset: [0, -50] 21 items: 22 - type: rect 23 bounds: [10, 10, 50, 50] 24 color: green 25 clip-chain: [2] 26 # Same as above, but this time we only indicate a previous-applied-offset 27 # of 40 pixels, so that's the maximum WR will unapply 28 - type: scroll-frame 29 id: 3 30 bounds: [10, 70, 50, 50] 31 content-size: [200, 200] 32 scroll-offset: [0, 50] 33 clip-to-frame: true 34 items: 35 - type: sticky-frame 36 bounds: [10, 70, 50, 50] 37 margin-bottom: 0 38 vertical-offset-bounds: [-500, 0] 39 previously-applied-offset: [0, -40] 40 items: 41 - type: rect 42 bounds: [10, 70, 50, 50] 43 color: green 44 clip-chain: [3] 45 # This time we indicate a previously-applied-offset of 50 pixels, but only 46 # scroll by 40 pixels. In this case 40 of the 50 applied-offset pixels will 47 # be unapplied 48 - type: scroll-frame 49 id: 4 50 bounds: [10, 130, 50, 50] 51 content-size: [200, 200] 52 scroll-offset: [0, 40] 53 clip-to-frame: true 54 items: 55 - type: sticky-frame 56 bounds: [10, 130, 50, 50] 57 margin-bottom: 0 58 vertical-offset-bounds: [-500, 0] 59 previously-applied-offset: [0, -50] 60 items: 61 - type: rect 62 bounds: [10, 130, 50, 50] 63 color: green 64 clip-chain: [4] 65 # Here we indicate a previously-applied-offset of 50 pixels, but continue 66 # scrolling in WR in the same direction by another 10 pixels. This effectively 67 # increases the applied offset to 60 pixels. 68 - type: scroll-frame 69 id: 5 70 bounds: [10, 190, 50, 50] 71 content-size: [200, 200] 72 scroll-offset: [0, -10] 73 clip-to-frame: true 74 items: 75 - type: sticky-frame 76 bounds: [10, 190, 50, 50] 77 margin-bottom: 0 78 vertical-offset-bounds: [-500, 0] 79 previously-applied-offset: [0, -50] 80 items: 81 - type: rect 82 bounds: [10, 190, 50, 50] 83 color: green 84 clip-chain: [5] 85 # Same as previous case, but this time with the vertical-offset-bounds 86 # adjusted to limit the applied offset to only 55 pixels. 87 - type: scroll-frame 88 id: 6 89 bounds: [10, 250, 50, 50] 90 content-size: [200, 200] 91 scroll-offset: [0, -10] 92 clip-to-frame: true 93 items: 94 - type: sticky-frame 95 bounds: [10, 250, 50, 50] 96 margin-bottom: 0 97 vertical-offset-bounds: [-55, 0] 98 previously-applied-offset: [0, -50] 99 items: 100 - type: rect 101 bounds: [10, 250, 50, 50] 102 color: green 103 clip-chain: [6] 104 105 # Repeat all the above cases, for top-sticky 106 107 - type: scroll-frame 108 id: 7 109 bounds: [70, 10, 50, 50] 110 content-size: [200, 200] 111 scroll-offset: [0, -50] 112 clip-to-frame: true 113 items: 114 - type: sticky-frame 115 bounds: [70, 10, 50, 50] 116 margin-top: 0 117 vertical-offset-bounds: [0, 500] 118 previously-applied-offset: [0, 50] 119 items: 120 - type: rect 121 bounds: [70, 10, 50, 50] 122 color: green 123 clip-chain: [7] 124 - type: scroll-frame 125 id: 8 126 bounds: [70, 70, 50, 50] 127 content-size: [200, 200] 128 scroll-offset: [0, -50] 129 clip-to-frame: true 130 items: 131 - type: sticky-frame 132 bounds: [70, 70, 50, 50] 133 margin-top: 0 134 vertical-offset-bounds: [0, 500] 135 previously-applied-offset: [0, 40] 136 items: 137 - type: rect 138 bounds: [70, 70, 50, 50] 139 color: green 140 clip-chain: [8] 141 - type: scroll-frame 142 id: 9 143 bounds: [70, 130, 50, 50] 144 content-size: [200, 200] 145 scroll-offset: [0, -40] 146 clip-to-frame: true 147 items: 148 - type: sticky-frame 149 bounds: [70, 130, 50, 50] 150 margin-top: 0 151 vertical-offset-bounds: [0, 500] 152 previously-applied-offset: [0, 50] 153 items: 154 - type: rect 155 bounds: [70, 130, 50, 50] 156 color: green 157 clip-chain: [9] 158 - type: scroll-frame 159 id: 10 160 bounds: [70, 190, 50, 50] 161 content-size: [200, 200] 162 scroll-offset: [0, 10] 163 clip-to-frame: true 164 items: 165 - type: sticky-frame 166 bounds: [70, 190, 50, 50] 167 margin-top: 0 168 vertical-offset-bounds: [0, 500] 169 previously-applied-offset: [0, 50] 170 items: 171 - type: rect 172 bounds: [70, 190, 50, 50] 173 color: green 174 clip-chain: [10] 175 - type: scroll-frame 176 id: 11 177 bounds: [70, 250, 50, 50] 178 content-size: [200, 200] 179 scroll-offset: [0, 10] 180 clip-to-frame: true 181 items: 182 - type: sticky-frame 183 bounds: [70, 250, 50, 50] 184 margin-top: 0 185 vertical-offset-bounds: [0, 55] 186 previously-applied-offset: [0, 50] 187 items: 188 - type: rect 189 bounds: [70, 250, 50, 50] 190 color: green 191 clip-chain: [11] 192 193 # Repeat all the above cases, for right-sticky 194 195 - type: scroll-frame 196 id: 12 197 bounds: [130, 10, 50, 50] 198 content-size: [200, 200] 199 scroll-offset: [50, 0] 200 clip-to-frame: true 201 items: 202 - type: sticky-frame 203 bounds: [130, 10, 50, 50] 204 margin-right: 0 205 horizontal-offset-bounds: [-500, 0] 206 previously-applied-offset: [-50, 0] 207 items: 208 - type: rect 209 bounds: [130, 10, 50, 50] 210 color: green 211 clip-chain: [12] 212 - type: scroll-frame 213 id: 13 214 bounds: [130, 70, 50, 50] 215 content-size: [200, 200] 216 scroll-offset: [50, 0] 217 clip-to-frame: true 218 items: 219 - type: sticky-frame 220 bounds: [130, 70, 50, 50] 221 margin-right: 0 222 horizontal-offset-bounds: [-500, 0] 223 previously-applied-offset: [-40, 0] 224 items: 225 - type: rect 226 bounds: [130, 70, 50, 50] 227 color: green 228 clip-chain: [13] 229 - type: scroll-frame 230 id: 14 231 bounds: [130, 130, 50, 50] 232 content-size: [200, 200] 233 scroll-offset: [40, 0] 234 clip-to-frame: true 235 items: 236 - type: sticky-frame 237 bounds: [130, 130, 50, 50] 238 margin-right: 0 239 horizontal-offset-bounds: [-500, 0] 240 previously-applied-offset: [-50, 0] 241 items: 242 - type: rect 243 bounds: [130, 130, 50, 50] 244 color: green 245 clip-chain: [14] 246 - type: scroll-frame 247 id: 15 248 bounds: [130, 190, 50, 50] 249 content-size: [200, 200] 250 scroll-offset: [-10, 0] 251 clip-to-frame: true 252 items: 253 - type: sticky-frame 254 bounds: [130, 190, 50, 50] 255 margin-right: 0 256 horizontal-offset-bounds: [-500, 0] 257 previously-applied-offset: [-50, 0] 258 items: 259 - type: rect 260 bounds: [130, 190, 50, 50] 261 color: green 262 clip-chain: [15] 263 - type: scroll-frame 264 id: 16 265 bounds: [130, 250, 50, 50] 266 content-size: [200, 200] 267 scroll-offset: [-10, 0] 268 clip-to-frame: true 269 items: 270 - type: sticky-frame 271 bounds: [130, 250, 50, 50] 272 margin-right: 0 273 horizontal-offset-bounds: [-55, 0] 274 previously-applied-offset: [-50, 0] 275 items: 276 - type: rect 277 bounds: [130, 250, 50, 50] 278 color: green 279 clip-chain: [16] 280 281 # Repeat all the above cases, for left-sticky 282 283 - type: scroll-frame 284 id: 17 285 bounds: [190, 10, 50, 50] 286 content-size: [200, 200] 287 scroll-offset: [-50, 0] 288 clip-to-frame: true 289 items: 290 - type: sticky-frame 291 bounds: [190, 10, 50, 50] 292 margin-left: 0 293 horizontal-offset-bounds: [0, 500] 294 previously-applied-offset: [50, 0] 295 items: 296 - type: rect 297 bounds: [190, 10, 50, 50] 298 color: green 299 clip-chain: [17] 300 - type: scroll-frame 301 id: 18 302 bounds: [190, 70, 50, 50] 303 content-size: [200, 200] 304 scroll-offset: [-50, 0] 305 clip-to-frame: true 306 items: 307 - type: sticky-frame 308 bounds: [190, 70, 50, 50] 309 margin-left: 0 310 horizontal-offset-bounds: [0, 500] 311 previously-applied-offset: [40, 0] 312 items: 313 - type: rect 314 bounds: [190, 70, 50, 50] 315 color: green 316 clip-chain: [18] 317 - type: scroll-frame 318 id: 19 319 bounds: [190, 130, 50, 50] 320 content-size: [200, 200] 321 scroll-offset: [-40, 0] 322 clip-to-frame: true 323 items: 324 - type: sticky-frame 325 bounds: [190, 130, 50, 50] 326 margin-left: 0 327 horizontal-offset-bounds: [0, 500] 328 previously-applied-offset: [50, 0] 329 items: 330 - type: rect 331 bounds: [190, 130, 50, 50] 332 color: green 333 clip-chain: [19] 334 - type: scroll-frame 335 id: 20 336 bounds: [190, 190, 50, 50] 337 content-size: [200, 200] 338 scroll-offset: [10, 0] 339 clip-to-frame: true 340 items: 341 - type: sticky-frame 342 bounds: [190, 190, 50, 50] 343 margin-left: 0 344 horizontal-offset-bounds: [0, 500] 345 previously-applied-offset: [50, 0] 346 items: 347 - type: rect 348 bounds: [190, 190, 50, 50] 349 color: green 350 clip-chain: [20] 351 - type: scroll-frame 352 id: 21 353 bounds: [190, 250, 50, 50] 354 content-size: [200, 200] 355 scroll-offset: [10, 0] 356 clip-to-frame: true 357 items: 358 - type: sticky-frame 359 bounds: [190, 250, 50, 50] 360 margin-left: 0 361 horizontal-offset-bounds: [0, 55] 362 previously-applied-offset: [50, 0] 363 items: 364 - type: rect 365 bounds: [190, 250, 50, 50] 366 color: green 367 clip-chain: [21]