| <!DOCTYPE html> |
| <html> |
| <body> |
| <p>Test passes if you see a single 100px by 100px green box below.</p> |
| <div><span>click here</span></div> |
| <style> |
| div { |
| display: block; |
| width: 100px; |
| height: 100px; |
| background: green; |
| } |
| </style> |
| <script src="../../resources/ui-helper.js"></script> |
| <script> |
| |
| var div = document.querySelector('div'); |
| div.attachShadow({mode: 'closed'}).innerHTML = ` |
| <style> |
| a, ::slotted(*) { |
| display: block; |
| width: 100%; |
| height: 100%; |
| } |
| |
| a:active { |
| background: red; |
| } |
| </style> |
| <a href="#" onclick="this.style.color = this.matches(':active') ? 'black' : 'green'"><slot></slot></a>`; |
| |
| if (window.testRunner) |
| UIHelper.wait(UIHelper.activateAt(div.offsetLeft + 5, div.offsetTop + 5)); |
| |
| </script> |
| </body> |
| </html> |
