<!-- 
  Tests each feComposite operator.
  Only uses full opacity so that results are consistent across platforms.
-->
<style>
* { margin: 0; padding: 0; }
svg {width: 700px;}
</style>

<body>
<svg viewBox="0 0 700 100">
<defs>
    <filter id="composite1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
        <feFlood flood-color="#f00" flood-opacity="1" result="res1" x="0%" y="0%" width="75%" height="75%"/>
        <feFlood flood-color="#00f" flood-opacity="1" result="res2" x="25%" y="25%" width="75%" height="75%"/>
        <feComposite id="fecomposite1" operator="over" in2="res1" in="res2"/>
    </filter>
    <filter id="composite2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
        <feFlood flood-color="#f00" flood-opacity="1" result="res1" x="0%" y="0%" width="75%" height="75%"/>
        <feFlood flood-color="#00f" flood-opacity="1" result="res2" x="25%" y="25%" width="75%" height="75%"/>
        <feComposite id="fecomposite2" operator="in" in2="res1" in="res2"/>
    </filter>
    <filter id="composite3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
        <feFlood flood-color="#f00" flood-opacity="1" result="res1" x="0%" y="0%" width="75%" height="75%"/>
        <feFlood flood-color="#00f" flood-opacity="1" result="res2" x="25%" y="25%" width="75%" height="75%"/>
        <feComposite id="fecomposite3" operator="atop" in2="res1" in="res2"/>
    </filter>
    <filter id="composite4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
        <feFlood flood-color="#f00" flood-opacity="1" result="res1" x="0%" y="0%" width="75%" height="75%"/>
        <feFlood flood-color="#00f" flood-opacity="1" result="res2" x="25%" y="25%" width="75%" height="75%"/>
        <feComposite id="fecomposite4" operator="out" in2="res1" in="res2"/>
    </filter>
    <filter id="composite5" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
        <feFlood flood-color="#f00" flood-opacity="1" result="res1" x="0%" y="0%" width="75%" height="75%"/>
        <feFlood flood-color="#00f" flood-opacity="1" result="res2" x="25%" y="25%" width="75%" height="75%"/>
        <feComposite id="fecomposite5" operator="xor" in2="res1" in="res2"/>
    </filter>
    <filter id="composite6" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
        <feFlood flood-color="#f00" flood-opacity="1" result="res1" x="0%" y="0%" width="75%" height="75%"/>
        <feFlood flood-color="#00f" flood-opacity="1" result="res2" x="25%" y="25%" width="75%" height="75%"/>
        <feComposite id="fecomposite6" operator="arithmetic" in2="res1" in="res2" k1="1" k2="0.5" k3="0.5" k4="0"/>
    </filter>
    <filter id="composite7" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
        <feFlood flood-color="#f00" flood-opacity="1" result="res1" x="0%" y="0%" width="75%" height="75%"/>
        <feFlood flood-color="#00f" flood-opacity="1" result="res2" x="25%" y="25%" width="75%" height="75%"/>
        <feComposite id="fecomposite7" operator="lighter" in2="res1" in="res2"/>
    </filter>
</defs>
<rect x="0" y="0" width="100" height="100" filter="url(#composite1)"/>
<rect x="100" y="0" width="100" height="100" filter="url(#composite2)"/>
<rect x="200" y="0" width="100" height="100" filter="url(#composite3)"/>
<rect x="300" y="0" width="100" height="100" filter="url(#composite4)"/>
<rect x="400" y="0" width="100" height="100" filter="url(#composite5)"/>
<rect x="500" y="0" width="100" height="100" filter="url(#composite6)"/>
<rect x="600" y="0" width="100" height="100" filter="url(#composite7)"/>
</svg>