| <html> | |
| <head> | |
| <style type="text/css"> | |
| a { | |
| border: 2px solid red; | |
| position: relative; | |
| } | |
| a span.relative { | |
| border: 2px solid blue; | |
| white-space: nowrap; | |
| position: relative; | |
| top: 10em; | |
| } | |
| a span.absolute { | |
| border: 2px solid green; | |
| white-space: nowrap; | |
| position: absolute; | |
| top: 12em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| Both <a href="#" id="link">this and <span class="relative">this should have correctly placed focus rings</span> <span class = "absolute">but not this</span>.</a> | |
| </div> | |
| <script> | |
| document.getElementById('link').focus(); | |
| </script> | |
| </body> | |
| </html> |