---
root:
  items:
        - type: stacking-context
          bounds: [50, 50, 100, 100]
          transform: rotate(-30)
          items:
            - type: rect
              bounds: [ 10, 10, 80, 80 ]
              color: [0, 255, 0]
            - type: box-shadow
              bounds: [ 10, 10, 80, 80 ]
              blur-radius: 25
              clip-mode: inset

            - type: rect
              bounds: [ 140, 10, 80, 80 ]
              color: [0, 255, 0]
            - type: box-shadow
              bounds: [ 140, 10, 80, 80 ]
              blur-radius: 25
              clip-mode: outset

            - type: border
              bounds: [ 250, 10, 100, 100 ]
              width: [ 10, 10, 10, 10 ]
              border-type: normal
              style: solid
              color: [ red, green, blue, black ]
              radius: {
                top-left: [20, 20],
                top-right: [10, 10],
                bottom-left: [25, 25],
                bottom-right: [0, 0],
              }

            - bounds: [150, 150, 128, 128]
              image: checkerboard(4, 15, 8)
              stretch-size: 128 128

            - type: radial-gradient
              bounds: 300 150 100 100
              center: 50 50
              radius: 50 50
              stops: [0, red, 1, blue]