mask-on-outflowElement-01b.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<style type="text/css">

  #outer {

    width: 100px;

    height: 100px;

    overflow: hidden;

  #clipped {

    mask: url(mask-on-outflowElement.svg);

    width: 300px;

    height: 300px;

  #absolutePosition {

    position:absolute;

    top: 0;

    left: 0;

    width: 400px;

    height: 400px;

    background-color: blue;

</style>

<body style="margin: 0px;">

  <div id="outer">

    <div id="clipped">

      <div id="absolutePosition">

      <!-- This should only be clipped by the mask, not by the 100x100

           overflow:hidden clip.

           image mask is always clipped by the rect of associated element. The

           forth rectangle in mask-on-outflowElement.svg is clipped out since

           the size  of #clipped is (w=300, height=300)

-->

      </div>

    </div>

  </div>

</body>

</html>