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