# A backdrop-filter that scrolls with its content, in a scroll frame whose
# content is clipped below the top of the window, like page content under a
# toolbar. Scrolled to 460, the first row of tiles is on screen but entirely
# above the clip, so it is never drawn.
root:
  items:
    - type: clip
      id: 2
      bounds: [0, 100, 400, 400]
    - type: clip-chain
      id: 3
      clips: [2]
    - type: scroll-frame
      bounds: [0, 100, 400, 400]
      content-size: [400, 2000]
      scroll-offset: [0, 460]
      items:
        - type: rect
          color: red
          bounds: [20, 100, 360, 300]
          clip-chain: 3
        - type: rect
          color: green
          bounds: [20, 400, 360, 300]
          clip-chain: 3
        - type: rect
          color: blue
          bounds: [20, 700, 360, 300]
          clip-chain: 3
        - type: rect
          color: yellow
          bounds: [20, 1000, 360, 300]
          clip-chain: 3
        - type: backdrop-filter
          bounds: [40, 140, 320, 1000]
          filters: blur(8,8)
          clip-chain: 3
        - type: rect
          color: 255 255 255 0.4
          bounds: [40, 140, 320, 1000]
          clip-chain: 3