| <!DOCTYPE html><!-- webkit-test-runner [ ColorFilterEnabled=true ] --> |
| <html > |
| <head> |
| <title>CSS Test: -apple-color-filter affects colors in inline SVG</title> |
| <link rel="author" title="Apple" href="http://www.apple.com/"> |
| <link rel="match" href="-apple-color-filter-inline-svg-expected.html"> |
| |
| <meta name="assert" content="-apple-color-filter affects colors in inline SVG"> |
| <style> |
| html { |
| -apple-color-filter: invert(); |
| } |
| |
| body { |
| margin: 0; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <svg viewBox="0 0 800 600" style="width: 800px; height: 600px"> |
| <defs> |
| <radialGradient id="grad"> |
| <stop offset="0" stop-color="red" /> |
| <stop offset="0.5" stop-color="rgb(255, 128, 255)" /> |
| <stop offset="0.75" stop-color="yellow" /> |
| </radialGradient> |
| |
| <filter id="flood" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> |
| <feFlood flood-color="rgb(255, 128, 255)" /> |
| </filter> |
| |
| <filter id="diffuse-light" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> |
| <feDiffuseLighting lighting-color="rgb(255, 128, 255)"> |
| <feDistantLight azimuth="100" elevation="100"/> |
| </feDiffuseLighting> |
| </filter> |
| |
| <filter id="specular-light" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> |
| <feSpecularLighting surfaceScale="2" specularExponent="2" specularConstant="2" lighting-color="rgb(255, 128, 255)"> |
| <fePointLight x="20" y="20" z="2"/> |
| </feSpecularLighting> |
| </filter> |
| |
| <filter id="shadow" x="0" y="0" width="160%" height="160%"> |
| <feDropShadow dx="50" dy="50" stdDeviation="0" flood-color="rgb(255, 128, 255)" flood-opacity="1" /> |
| </filter> |
| |
| <pattern id="pattern" patternUnits="userSpaceOnUse" x="20" y="0" width="50" height="50"> |
| <rect x="5" y="5" width="30" height="30" fill="rgb(255, 128, 255)"/> |
| </pattern> |
| </defs> |
| |
| <rect x="20" y="10" width="150" height="150" fill="url(#grad)" /> |
| |
| <rect x="200" y="10" width="150" height="150" fill="rgb(255, 128, 255)" /> |
| <rect x="400" y="10" width="150" height="150" fill="rgb(255, 128, 255)" stroke="yellow" stroke-width="15" /> |
| |
| <rect x="20" y="200" width="150" height="150" filter="url(#flood)"/> |
| <rect x="200" y="200" width="150" height="150" filter="url(#diffuse-light)"/> |
| <rect x="400" y="200" width="150" height="150" filter="url(#specular-light)"/> |
| |
| <rect x="20" y="400" width="150" height="150" fill="url(#pattern)"/> |
| |
| <rect x="200" y="400" width="100" height="100" fill="yellow" filter="url(#shadow)"/> |
| </svg> |
| |
| </body> |
| </html> |