cross-fade-natural-size-ref.html (1149B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS reftest Reference</title> 5 <style> 6 div { 7 margin: 2px; 8 } 9 .div1::before { 10 content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='375' height='350' style='background: black'><rect fill='red' width='140.625' height='131.25' fill-opacity='0.75'/><rect fill='blue' width='187.5' height='262.5' fill-opacity='0.25' style='mix-blend-mode: screen'/></svg>"); 11 } 12 .div2::before { 13 content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='375' height='350' style='background: black'><rect fill='red' width='140.625' height='131.25' fill-opacity='0.375'/><rect fill='blue' width='187.5' height='262.5' fill-opacity='0.125' style='mix-blend-mode: screen'/><rect fill='green' width='375' height='350' fill-opacity='0.5' style='mix-blend-mode: screen'/></svg>"); 14 } 15 </style> 16 </head> 17 <p>This image should be 375x350, with a black background.</p> 18 <div class="div1"></div> 19 <p>This image should be identical in both size and appearance, except for a green tinge.</p> 20 <div class="div2"></div> 21 </html>