title: How to use stencil buffer to achieve hierarchical clipping
body: <p>What I'm trying to achieve is illustrated on the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/DP007.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DP007.png" alt="illustration"></a></p>
  
  <p>Let's say we have stencil buffer in a state so only red section is filled at the moment. What actions do I need to perform when I update stencil buffer with a section which is marked yellow, so in the end only green section would be the final state of the stencil buffer?</p>
  
  <p>I need this to achieve nested element content clipping, to prevent content of the element to be rendered beyond the boundaries of them both combined.</p>
  
  <p>So far I have tried various boolean operations involving stencil test to no avail, which brought more confusion than any progress.</p>
  
  <p>Please note that scissor test is not actual for this task, because elements may have arbitrary shape and rotation.</p>