| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="svg-image-with-css-cross-domain.css"/> |
| </head> |
| <body> |
| <h1>WebKit bug</h1> |
| <h3>SVG circle with same-origin and different-origin CSS</h3> |
| <p>Expected: 2 gray circles, 4 orange circles with red borders, 2 gray circle.</p> |
| <p> |
| <span class="image"> |
| <svg height="68" width="68" viewBox="-34 -34 68 68"> |
| <circle cx="0" cy="0" r="24" fill="#c8c8c8" /> |
| </svg> |
| </span> |
| <span class="image"> |
| <svg height="68" width="68" viewBox="-34 -34 68 68"> |
| <circle cx="0" cy="0" r="24" fill="#c8c8c8" /> |
| </svg> |
| </span> |
| <span class="image"> |
| <svg height="68" width="68" viewBox="-34 -34 68 68"> |
| <circle cx="0" cy="0" r="24" stroke="red" stroke-width="2" fill="orange" /> |
| </svg> |
| </span> |
| <span class="image"> |
| <svg height="68" width="68" viewBox="-34 -34 68 68"> |
| <circle cx="0" cy="0" r="24" stroke="red" stroke-width="2" fill="orange" /> |
| </svg> |
| </span> |
| <span class="image"> |
| <svg height="68" width="68" viewBox="-34 -34 68 68"> |
| <circle cx="0" cy="0" r="24" stroke="red" stroke-width="2" fill="orange" /> |
| </svg> |
| </span> |
| <span class="image"> |
| <svg height="68" width="68" viewBox="-34 -34 68 68"> |
| <circle cx="0" cy="0" r="24" stroke="red" stroke-width="2" fill="orange" /> |
| </svg> |
| </span> |
| <span class="image"> |
| <svg height="68" width="68" viewBox="-34 -34 68 68"> |
| <circle cx="0" cy="0" r="24" fill="#c8c8c8" /> |
| </svg> |
| </span> |
| <span class="image"> |
| <svg height="68" width="68" viewBox="-34 -34 68 68"> |
| <circle cx="0" cy="0" r="24" fill="#c8c8c8" /> |
| </svg> |
| </span> |
| </p> |
| </body> |
| </html> |
