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