cross-fade-target-alpha.html (1464B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>cross-fade() with less than 100% total percentage gets faded correctly</title> 5 <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-images-4/#cross-fade-function"> 7 <link rel="match" href="cross-fade-target-alpha-ref.html"> 8 <!-- Implementations compositing in 8-bit may get fairly strong accuracy issues here, 9 so the fuzz needs to be set pretty liberally. --> 10 <meta name="fuzzy" content="0-8;0-300000"> 11 <style> 12 .outer { 13 display:block; 14 width: 500px; 15 height: 500px; 16 padding: 50px; 17 background: linear-gradient(90deg, red, green); 18 } 19 .inner { 20 display: block; 21 width: 100%; 22 height: 100%; 23 color: white; 24 /* NOTE: The same gradient several times, so that we can easily simulate this using opacity. */ 25 background: cross-fade( 26 10% linear-gradient(#e66465, #9198e5), 27 10% linear-gradient(#e66465, #9198e5), 28 10% linear-gradient(#e66465, #9198e5), 29 10% linear-gradient(#e66465, #9198e5), 30 10% linear-gradient(#e66465, #9198e5), 31 10% linear-gradient(#e66465, #9198e5) 32 ); 33 } 34 </style> 35 </head> 36 <p>The inner gradient should be (in total) 60% covering over the outer.</p> 37 <div class="outer"> 38 <div class="inner"> 39 </div> 40 </div> 41 </html>