<!DOCTYPE html>
<title>Test SVG in -webkit-cross-fade image</title>
<style>
div {
    display: inline-block;
    width: 100px;
    height: 100px;
}
#tst1 {
    background-image: -webkit-cross-fade(
        url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='green'/></svg>"), 
        url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='red'/></svg>"),
        0);
}
#tst2 {
    background-image: -webkit-cross-fade(
        url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='red'/></svg>"), 
        url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='green'/></svg>"),
        1.0);
}
#tst3 {
    background-image: -webkit-cross-fade(
        url("resources/green-10.png"), 
        url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='green'/></svg>"),
        1.0);
}
#tst4 {
    background-image: -webkit-cross-fade(
        url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='green'/></svg>"),
        url("resources/green-10.png"), 
        0.0);
}
</style>
<p>There should be four green circles below.
<div id=tst1></div>
<div id=tst2></div>
<div id=tst3></div>
<div id=tst4></div>