# The "preserve-3d" context has a "flat" child. Rotation by 180 degrees and positive Z offset
# should compensate each other, resulting in a green rectangle.
---
root:
  items:
    - type: stacking-context
      bounds: [0, 0, 100, 100]
      transform-style: preserve-3d
      transform: rotate-x(180)
      items:
        - type: rect
          bounds: [0, 0, 100, 100]
          color: green
        - type: stacking-context
          bounds: [0, 0, 100, 100]
          transform: translate(0, 0, 10)
          items:
            - type: rect
              bounds: [0, 0, 100, 100]
              color: red