| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Natural size of cross-fade()</title> |
| <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-images-4/#cross-fade-function"> |
| <link rel="match" href="cross-fade-natural-size-ref.html"> |
| <meta name="fuzzy" content="0-1;0-300000"> |
| <style> |
| div { |
| margin: 2px; |
| } |
| .div1::before { |
| content: cross-fade( |
| 75% url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' style='background: black'><rect fill='red' width='150' height='150'/></svg>"), |
| 25% url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200' style='background: black'><rect fill='blue' width='150' height='150'/></svg>") |
| ); |
| } |
| .div2::before { |
| content: cross-fade( |
| 37.5% url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' style='background: black'><rect fill='red' width='150' height='150'/></svg>"), |
| 12.5% url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200' style='background: black'><rect fill='blue' width='150' height='150'/></svg>"), |
| green |
| ); |
| } |
| </style> |
| </head> |
| <p>This image should be 375x350, with a black background.</p> |
| <div class="div1"></div> |
| <p>This image should be identical in both size and appearance, except for a green tinge.</p> |
| <div class="div2"></div> |
| </html> |
