LayoutTests/svg/custom/focus-ring.svg

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .ring {
      outline: auto;
      outline-offset: 2px;
    }
  </style>
    
  <circle cx="65" cy="60" r="50" fill="orange" class="ring" />
  <path d="M 140 10 l 50 100 l 50 -50 l -20 0 l -20 -30 Z" fill="orange" class="ring" />
  <g class="ring">
    <rect x="270" y="10" width="100" height="100" fill="orange" />
  </g>
  
  <g transform="translate(60, 140) rotate(30)">
    <rect width="100" height="100" fill="orange" class="ring" />
  </g>
  <rect width="100" height="100" fill="orange" transform="translate(200, 140) rotate(30)" class="ring" />
  <g class="ring">
    <rect width="100" height="100" fill="orange" transform="translate(360, 140) rotate(30)" />
  </g>
  
  <text x="10" y="320" class="ring">focused text</text>
  <text transform="translate(100, 320) rotate(30)" class="ring">focused text</text>
  <g class="ring">
    <text transform="translate(200, 320) rotate(30)" class="ring">focused text</text>
  </g>
  
  <clipPath id="clip">
    <rect width="100" height="100" />
  </clipPath>
  <image xlink:href="resources/green-checker.png" x="10" y="400" width="530" height="410" clip-path="url(#clip)" class="ring" />
  <image xlink:href="resources/green-checker.png" transform="translate(200, 400) rotate(30)" width="530" height="410" class="ring" clip-path="url(#clip)"/>
  <g class="ring" transform="translate(360, 400) rotate(30)">
    <image xlink:href="resources/green-checker.png" width="530" height="410" clip-path="url(#clip)"/>
  </g>
  
</svg>