| <!DOCTYPE html> |
| <script src="../../../resources/run-after-layout-and-paint.js"></script> |
| <script src="../resources/common.js"></script> |
| <body style="background-color: red"> |
| <!-- no style for reference --> |
| <input type="button" id="focusTarget" value="button" /> |
| <br> |
| <br> |
| <input type="checkbox" checked id="focusTarget" /> |
| <br> |
| <br> |
| <input type="radio" id="focusTarget" /> |
| <br> |
| <br> |
| <input type="text" value="example text" id="focusTarget" /> |
| <br> |
| <br> |
| <a href="#" id="focusTarget" >Test</a> |
| <br> |
| <br> |
| <!-- outline-offset: 4px --> |
| <input type="button" style="outline-offset: 4px" value="button" id="focusTarget" /> |
| <br> |
| <br> |
| <input type="checkbox" style="outline-offset: 4px" checked id="focusTarget" /> |
| <br> |
| <br> |
| <input type="radio" style="outline-offset: 4px" id="focusTarget" /> |
| <br> |
| <br> |
| <input type="text" style="outline-offset: 4px" value="example text" id="focusTarget" /> |
| <br> |
| <br> |
| <a href="#" style="outline-offset: 4px" id="focusTarget">Test</a> |
| <br> |
| <script> |
| runAfterLayoutAndPaint(function() { |
| document.querySelectorAll("#focusTarget").forEach(node => { |
| internals.setPseudoClassState(node, ":focus", true); |
| // console.log(node); |
| }); |
| }, true); |
| </script> |
| </body> |
