| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Custom Elements: The ':defined' pseudo-class applies to elements that are defined.</title> |
| <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/> |
| <link rel="help" href="https://w3c.github.io/webcomponents/spec/custom/#the-defined-element-pseudo-class-defined"> |
| <link rel="match" href="reference/green-box.html"/> |
| </head> |
| <body> |
| <style> |
| .box { |
| display: block; |
| width: 100px; |
| height: 25px; |
| } |
| my-defined-element { background: red; color: green; } |
| my-defined-element:defined { background: green; } |
| my-defined-element:not(:defined) { color: red; } |
| |
| my-undefined-element { background: green; color: red; } |
| my-undefined-element:defined { background: red; } |
| my-undefined-element:not(:defined) { color: green; } |
| |
| failed-element { background: green; color: red; } |
| failed-element:defined { background: red; } |
| failed-element:not(:defined) { color: green; } |
| |
| div.box { background: green; color: red; } |
| div:defined { color: green; } |
| div:not(:defined) { background: red; } |
| </style> |
| <p>Test passes if you see a single 100px by 100px green box below.</p> |
| <my-defined-element class="box">FAIL</my-defined-element> |
| <my-undefined-element class="box">FAIL</my-undefined-element> |
| <failed-element class="box">FAIL</failed-element> |
| <div class="box"></div> |
| <script> |
| |
| customElements.define('my-defined-element', class extends HTMLElement {}); |
| customElements.define('failed-element', class extends HTMLElement { |
| constructor() { throw 'bad'; } |
| }); |
| |
| </script> |
| </body> |
| </html> |
