---
root:
  items:
    - type: stacking-context
      bounds: [0, 0, 100, 100]
      items:
      # Stacking context snapshotted as "snap0".
      # Note that the snapshot area is smaller than
      # the bounds of the stacking context.
      - type: stacking-context
        bounds: [0, 0, 200, 200]
        snapshot:
          name: "snap0"
          area: [10, 10, 80, 180]
        items:
          - type: rect
            bounds: [0, 0, 90, 100]
            color: [0, 150, 0]
          - type: rect
            bounds: [10, 100, 90, 100]
            color: [150, 0, 0]
      # Stacking context snapshotted as "snap1".
      # Note that the snapshot area is larger than
      # the bounds of the stacking context.
      - type: stacking-context
        bounds: [0, 300, 200, 200]
        snapshot:
          name: "snap1"
          area: [-10, -10, 120, 220]
        items:
          - type: rect
            bounds: [0, 0, 90, 100]
            color: [0, 150, 0]
          - type: rect
            bounds: [10, 100, 90, 100]
            color: [150, 0, 0]
      # Show the two stacking contexts again, as images.
      # The sizes of the images are match the snapshot areas
      # to avoid stretching.
      - image: snapshot(snap0)
        bounds: [310, 10, 80, 180]

      - image: snapshot(snap1)
        bounds: [290, 290, 120, 220]