cross-fade-basic-ref.html (1066B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS reftest Reference</title> 5 <style> 6 div { 7 margin: 2px; 8 width: 50px; 9 height: 50px; 10 } 11 .div1 { 12 background-color: #7f007f; 13 } 14 .div2 { 15 background-color: #7f007f; 16 } 17 .div3 { 18 background-color: #7f007f; 19 } 20 .div4 { 21 width: 200px; 22 height: 200px; 23 background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' style='background: black'><rect fill='red' width='150' height='150' fill-opacity='0.75' style='mix-blend-mode: screen'/><rect fill='blue' x='50' y='50' width='150' height='150' fill-opacity='0.25' style='mix-blend-mode: screen'/></svg>"); 24 } 25 </style> 26 </head> 27 <p>These three should all look the same; a dark purple.</p> 28 <div class="div1"></div> 29 <div class="div2"></div> 30 <div class="div3"></div> 31 <p>This should show red and blue translucent squares on a black background, with the red being clearer.</p> 32 <div class="div4"></div> 33 </html>