| <!-- |
| 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> |
| |
