mask-gradient-translucent-end-color-1.html (818B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <!DOCTYPE html> 6 <html lang="en" class="reftest-wait"> 7 <meta charset="utf-8"> 8 <title>Make sure that gradient masks are painted correctly with translucent end-color</title> 9 <!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1329411 --> 10 11 <style> 12 13 html { 14 background: white; 15 overflow: hidden; 16 } 17 18 div { 19 height: 5000px; 20 background-color: red; 21 mask-image: linear-gradient(transparent 0px, rgba(255, 0, 0, 0.5) 2000px); 22 } 23 24 </style> 25 <body style="margin: 0px;"> 26 <div></div> 27 28 <script> 29 window.addEventListener("MozReftestInvalidate", function () { 30 document.documentElement.scrollTop = 3000; // > 2000 31 document.documentElement.removeAttribute("class"); 32 }); 33 </script> 34 </body>