<!DOCTYPE html><!-- webkit-test-runner [ ColorFilterEnabled=true ] -->
<body onload="run();">
<svg width="450" height="350">
    <defs>
        <linearGradient id="g1">
            <stop offset="0" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g2a">
            <stop offset="0" stop-color="red"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g2b">
            <stop offset="0" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g3">
            <stop offset="0" stop-color="red"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g4">
            <stop offset="0" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g5">
            <stop offset="0" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g6" x2="0.5">
            <stop offset="0" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g7">
            <stop offset="0" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g8">
            <stop offset="0.5" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g9">
            <stop offset="0" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g10">
            <stop offset="0" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
        <linearGradient id="g11">
            <stop offset="0" stop-color="blue"/>
            <stop offset="1" stop-color="yellow"/>
        </linearGradient>
    </defs>

    <rect id="r1" x="50" y="50" width="50" height="50" fill="url(#g1)"/>
    <rect id="r2" x="150" y="50" width="50" height="50" fill="url(#g2b)"/>
    <rect id="r3" x="250" y="50" width="50" height="50"/>
    <rect id="r4" x="350" y="50" width="50" height="50" fill="url(#g4)" fill-opacity="0.5"/>
    <rect id="r5" x="50" y="150" width="75" height="50" fill="url(#g5)"/>
    <rect id="r6" x="150" y="150" width="50" height="50" fill="url(#g6)"/>
    <rect id="r7" x="250" y="150" width="50" height="50" fill="url(#g7)"/>
    <rect id="r8" x="350" y="150" width="50" height="50" fill="url(#g8)"/>
    <rect id="r9" x="50" y="250" width="50" height="50" fill="url(#g9)"/>
    <rect id="r10" x="150" y="250" width="50" height="50" fill="url(#g10)"/>
    <rect id="r11" x="250" y="250" width="50" height="50" fill="url(#g11)" style="-apple-color-filter: grayscale();"/>
</svg>
