cross-fade-svg-size-diff.html | Explore in Territory

<!DOCTYPE html>
<title>Test SVG in -webkit-cross-fade image with identical but differently sized SVG elsewhere</title>
<style>
    #tst1 {
        width: 100px;
        height: 100px;
        background-image: -webkit-cross-fade(
            url("data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='35' fill='green'/></svg>"), 
            url("data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='25' fill='red'/></svg>"),
            0);
    }
    #tst2 {
        width: 100px;
        height: 100px;
        background-image: -webkit-cross-fade(
            url("data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='25' fill='red'/></svg>"),
            url("data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='35' fill='green'/></svg>"),
            1);
    }
    #ref {
        background-image: url("data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='35' fill='green'/></svg>");
        width: 300px;
        height: 300px;
    }
</style>
<p>There should be three circles below. One big and two small ones.
<div id=ref></div>
<div id=tst1></div>
<div id=tst2></div>
chromium/third_party/blink/web_tests/images/cross-fade-svg-size-diff.html
