clipPath-and-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(#myMask);

    clip-path: url(#myClip);

  #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. -->

      </div>

    </div>

  </div>

  <svg height="0">

    <defs>

      <mask id="myMask" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse">

        <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>

        <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/>

        <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/>

      </mask>

      <clipPath id="myClip">

        <rect x="0" y="0" width="100" height="100"/>

        <rect x="100" y="100" width="100" height="100"/>

        <rect x="200" y="200" width="100" height="100"/>

        <!-- The forth rect should be clipped out -->

        <rect x="300" y="300" width="100" height="100"/>

      </clipPath>

    </defs>

  </svg>

</body>

</html>