| <!DOCTYPE html> |
| <html> |
| <body> |
| <style> |
| .box { |
| display: block; |
| width: 100px; |
| height: 25px; |
| } |
| defined-element { background: red; color: green; } |
| defined-element:defined { background: green; } |
| defined-element:not(:defined) { color: red; } |
| |
| defined-element div { background: red; color: green; } |
| defined-element:defined div { background: green; } |
| defined-element:not(:defined) div { color: red; } |
| |
| defined-element + .sibling { background: red; color: green; } |
| defined-element:defined + .sibling { background: green; } |
| defined-element:not(:defined) + .sibling { color: red; } |
| |
| defined-element#foo { background: red; color: green; } |
| defined-element#foo:defined { background: green; } |
| defined-element#foo:not(:defined) { color: red; } |
| |
| </style> |
| <p>Test passes if you see a single 100px by 100px green box below.</p> |
| <defined-element class="box">FAIL</defined-element> |
| <defined-element class="box"><div>FAIL</div></defined-element> |
| <div class="sibling box">FAIL</div> |
| <defined-element id="foo" class="box">FAIL</defined-element> |
| <script> |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| setTimeout(() => { |
| customElements.define('defined-element', class extends HTMLElement {}); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }, 0); |
| |
| </script> |
| </body> |
| </html> |
