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]
