<!DOCTYPE html>
<style>
x-x {
  color: rgb(0, 222, 0);
}

[is=x-y]:not(:unresolved) {
  color: rgb(0, 111, 0);
}

:unresolved {
  color: rgb(0, 0, 222);
}

[is=x-y]:unresolved {
  border-color: rgb(0, 0, 111);
}
</style>
<script src="../../../resources/js-test.js"></script>
<div id="container"></div>
<x-x id="a"></x-x>
<span id="b" is="x-y"></span>
<script>
description('Tests the :unresolved pseudoclass.');

var a = document.querySelector('#a');
shouldBe('document.querySelector("x-x:unresolved")', 'a');
shouldBe('window.getComputedStyle(a).color', '"rgb(0, 0, 222)"');

var b = document.querySelector('#b');
shouldBe('window.getComputedStyle(b).color', '"rgb(0, 0, 222)"');
shouldBe('window.getComputedStyle(b).borderColor', '"rgb(0, 0, 111)"');

var X = document.registerElement('x-x', {prototype: Object.create(HTMLElement.prototype)});
var c = new X();
document.body.insertBefore(c, b);
shouldBe('window.getComputedStyle(c).color', '"rgb(0, 222, 0)"');

// Registering x-x should have changed the styles of #a.
shouldBe('window.getComputedStyle(a).color', '"rgb(0, 222, 0)"');

var Y = document.registerElement('x-y', {extends: 'span', prototype: Object.create(HTMLSpanElement.prototype)});
var d = new Y();
document.body.insertBefore(d, b);
shouldBe('window.getComputedStyle(d).color', '"rgb(0, 111, 0)"');

// Registering is="x-y" should have changed the styles of #b.
shouldBe('window.getComputedStyle(b).color', '"rgb(0, 111, 0)"');

successfullyParsed = true;
</script>