47 lines
1.7 KiB
HTML
47 lines
1.7 KiB
HTML
<!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>
|