<!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 different-origin CSS. Ensure reuse caching over different origins work</h3>
    <p>Expected: 2 orange circles.</p>
    <script>
function onFirstFrameLoaded()
{
    document.getElementById("frame2").innerHTML =
        '<iframe src="resources/image-with-css-cross-domain.svg" width="68" height="68" sandbox="" onload="onSecondFrameLoaded()"></iframe>';
}

function onSecondFrameLoaded()
{
    if (window.testRunner)
        testRunner.notifyDone();
}
if (window.testRunner)
    testRunner.waitUntilDone();
    </script>
    <p id="frame1">
      <iframe src="resources/image-with-css-cross-domain.svg" width="68" height="68" onload="onFirstFrameLoaded()"></iframe>
    </p>
    <p id="frame2">
    </p>
  </body>
</html>