paint-on-maskLayer-1b.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<title>Paint positioned mask onto mask layer</title>

<style type="text/css">

  #inner {

    width: 200px;

    height: 200px;

    box-sizing:border-box;

    background: blue;

    /* make mask pained on mask layer */

    border: 1px solid transparent;

    will-change: transform;

  #outer {

    width: 200px;

    height: 200px;

    mask-image: url(#mymask);

    /* make it fixed so that inner div has different AGR with outter div */

    position: fixed;

</style>

<div id="outer">

  <div id="inner"></div>

</div>

<svg height="0">

  <defs>

    <mask id="mymask" x="0" y="0" width="1" height="1">

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

    </mask>

  </defs>

</svg>

</html>