Source code
Revision control
Copy as Markdown
Other Tools
root:
items:
# This is a scroll frame with an out-of-viewport rect that should be pushed into the
# viewport by its "bottom" sticky constraint.
- type: scroll-frame
id: 2
bounds: [10, 10, 50, 50]
content-size: [200, 200]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [10, 60, 50, 50]
margin-bottom: 0
vertical-offset-bounds: [-500, 0]
items:
- type: rect
bounds: [10, 60, 50, 50]
color: green
clip-chain: [2]
# Do the same thing, but now for the "top" constraint.
- type: scroll-frame
id: 3
bounds: [70, 10, 50, 50]
content-size: [200, 200]
scroll-offset: [0, 50]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [70, 10, 50, 50]
margin-top: 0
vertical-offset-bounds: [0, 500]
items:
- type: rect
bounds: [70, 10, 50, 50]
color: green
clip-chain: [3]
# Do the same thing, but now for the "right" constraint.
- type: scroll-frame
id: 4
bounds: [10, 70, 50, 50]
content-size: [200, 200]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [60, 70, 50, 50]
margin-right: 0
horizontal-offset-bounds: [-500, 0]
items:
- type: rect
bounds: [60, 70, 50, 50]
color: green
clip-chain: [4]
# Do the same thing, but now for the "left" constraint.
- type: scroll-frame
id: 5
bounds: [70, 70, 50, 50]
content-size: [200, 200]
scroll-offset: [50, 0]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [70, 70, 50, 50]
margin-left: 0
horizontal-offset-bounds: [0, 500]
items:
- type: rect
bounds: [70, 70, 50, 50]
color: green
clip-chain: [5]
# The same tests, but this time with a margin.
- type: scroll-frame
id: 6
bounds: [130, 10, 50, 50]
content-size: [200, 200]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [130, 60, 50, 50]
margin-bottom: 10
vertical-offset-bounds: [-500, 0]
items:
- type: rect
bounds: [130, 60, 50, 50]
color: green
clip-chain: [6]
# Do the same thing, but now for the "top" constraint.
- type: scroll-frame
id: 7
bounds: [190, 10, 50, 50]
content-size: [200, 200]
scroll-offset: [0, 50]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [190, 10, 50, 50]
margin-top: 10
vertical-offset-bounds: [0, 500]
items:
- type: rect
bounds: [190, 10, 50, 50]
color: green
clip-chain: [7]
# Do the same thing, but now for the "right" constraint.
- type: scroll-frame
id: 8
bounds: [130, 70, 50, 50]
content-size: [200, 200]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [180, 70, 50, 50]
margin-right: 10
horizontal-offset-bounds: [-500, 0]
items:
- type: rect
bounds: [180, 70, 50, 50]
color: green
clip-chain: [8]
# Do the same thing, but now for the "left" constraint.
- type: scroll-frame
id: 9
bounds: [190, 70, 50, 50]
content-size: [200, 200]
scroll-offset: [50, 0]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [190, 70, 50, 50]
margin-left: 10
horizontal-offset-bounds: [0, 500]
items:
- type: rect
bounds: [190, 70, 50, 50]
color: green
clip-chain: [9]
# The same tests, but this time with a limit.
- type: scroll-frame
id: 10
bounds: [250, 10, 50, 50]
content-size: [200, 200]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [250, 60, 50, 50]
margin-bottom: 0
vertical-offset-bounds: [-25, 0]
items:
- type: rect
bounds: [250, 60, 50, 50]
color: green
clip-chain: [10]
# Do the same thing, but now for the "top" constraint.
- type: scroll-frame
id: 11
bounds: [310, 10, 50, 50]
content-size: [200, 200]
scroll-offset: [0, 50]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [310, 10, 50, 50]
margin-top: 0
vertical-offset-bounds: [0, 25]
items:
- type: rect
bounds: [310, 10, 50, 50]
color: green
clip-chain: [11]
# Do the same thing, but now for the "right" constraint.
- type: scroll-frame
id: 12
bounds: [250, 70, 50, 50]
content-size: [200, 200]
clip-to-frame: true
items:
- type: sticky-frame
bounds: [300, 70, 50, 50]
margin-right: 0
horizontal-offset-bounds: [-25, 0]
items:
- type: rect
bounds: [300, 70, 50, 50]
color: green
clip-chain: [12]
# Do the same thing, but now for the "left" constraint.
- type: scroll-frame
id: 13
bounds: [310, 70, 50, 50]
content-size: [200, 200]
clip-to-frame: true
scroll-offset: [50, 0]
items:
- type: sticky-frame
bounds: [310, 70, 50, 50]
margin-left: 0
horizontal-offset-bounds: [0, 25]
items:
- type: rect
bounds: [310, 70, 50, 50]
color: green
clip-chain: [13]