dynamic-mask-pre-effects-bbox.html (2047B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <style> 5 #container { 6 border: 3px dotted black; 7 background: yellow; 8 overflow: hidden; 9 width: 400px; 10 max-height: 25px; 11 } 12 13 #container.masked { 14 mask: url('#fade_mask_bottom'); 15 } 16 .item { 17 font-size: 30px; 18 } 19 </style> 20 <script> 21 document.addEventListener("MozReftestInvalidate", doTest, false); 22 setTimeout(doTest, 4000); // fallback for running outside reftest 23 24 function doTest() { 25 clear(); 26 insert(); 27 } 28 29 function clear() { 30 // Force reflow: 31 container.offsetHeight; 32 33 // Remove mask: 34 container.classList.remove('masked'); 35 } 36 37 function insert() { 38 // Add new child: 39 var notificationNode = document.createElement('div'); 40 notificationNode.classList.add('item'); 41 notificationNode.appendChild(document.createTextNode("PASS")); 42 var container = document.getElementById('container'); 43 container.appendChild(notificationNode); 44 45 // Force reflow: 46 container.offsetHeight; 47 48 // Add back mask: 49 container.classList.add('masked'); 50 51 document.documentElement.classList.remove('reftest-wait'); 52 } 53 </script> 54 </head> 55 <body> 56 <div id='container' class="masked"></div> 57 58 <!-- BEGIN SVG MASK: --> 59 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 60 <mask id="fade_mask_bottom" 61 maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 62 <linearGradient id="fade_gradient_bottom" 63 gradientUnits="objectBoundingBox" x2="0" y2="1"> 64 <stop stop-color="white" stop-opacity="1" offset="0.7"></stop> 65 <stop stop-color="white" stop-opacity="0" offset="1"></stop> 66 </linearGradient> 67 <rect x="0" y="0" width="1" height="1" 68 fill="url(#fade_gradient_bottom)"></rect> 69 </mask> 70 </svg> 71 <!-- END SVG MASK --> 72 73 </body> 74 </html>