<!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>