46 lines
1.3 KiB
HTML
46 lines
1.3 KiB
HTML
<!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>
|