clipPath-on-outflowElement-02b.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<style type="text/css">

  #outer {

    width: 100px;

    height: 100px;

    overflow: hidden;

  #clipped {

    clip-path: inset(10px 10px 10px 10px);

    width: 200px;

    height: 200px;

  #absolutePosition {

    position:absolute;

    top: 0;

    left: 0;

    width: 400px;

    height: 400px;

    background-color: rgba(0,0,255,0.5);

</style>

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

  <div id="outer">

    <div id="clipped">

      <div id="absolutePosition">

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

           overflow:hidden clip. -->

      </div>

    </div>

  </div>

  <svg height="0">

    <defs>

      <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"/>

      </clipPath>

    </defs>

  </svg>

</body>

</html>