| <!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> |
