dynamic-mask-pre-effects-bbox.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html class="reftest-wait">

  <head>

    <style>

      #container {

        border: 3px dotted black;

        background: yellow;

        overflow: hidden;

        width: 400px;

        max-height: 25px;

      #container.masked {

        mask: url('#fade_mask_bottom');

      .item {

        font-size: 30px;

    </style>

    <script>

      function go() {

        clear();

        insert();

      function clear() {

        // Force reflow:

        container.offsetHeight;

        // Remove mask:

        container.classList.remove('masked');

      function insert() {

        // Add new child:

        var notificationNode = document.createElement('div');

        notificationNode.classList.add('item');

        notificationNode.appendChild(document.createTextNode("PASS"));

        var container = document.getElementById('container');

        container.appendChild(notificationNode);

        // Force reflow:

        container.offsetHeight;

        // Add back mask:

        container.classList.add('masked');

        document.documentElement.classList.remove('reftest-wait');

    </script>

  </head>

  <body onload="go();">

    <div id='container' class="masked"></div>

    <!-- BEGIN SVG MASK: -->

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

      <mask id="fade_mask_bottom"

            maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">

        <linearGradient id="fade_gradient_bottom"

                        gradientUnits="objectBoundingBox" x2="0" y2="1">

          <stop stop-color="white" stop-opacity="1" offset="0.7"></stop>

          <stop stop-color="white" stop-opacity="0" offset="1"></stop>

        </linearGradient>

        <rect x="0" y="0" width="1" height="1"

              fill="url(#fade_gradient_bottom)"></rect>

      </mask>

    </svg>

  <!-- END SVG MASK -->

  </body>

</html>