third_party/WebKit/LayoutTests/fast/dom/custom/unresolved-pseudoclass.html

   1 <!DOCTYPE html>
   2 <style>
   3 x-x {
   4   color: rgb(0, 222, 0);
   5 }
   6
   7 [is=x-y]:not(:unresolved) {
   8   color: rgb(0, 111, 0);
   9 }
  10
  11 :unresolved {
  12   color: rgb(0, 0, 222);
  13 }
  14
  15 [is=x-y]:unresolved {
  16   border-color: rgb(0, 0, 111);
  17 }
  18 </style>
  19 <script src="../../../resources/js-test.js"></script>
  20 <div id="container"></div>
  21 <x-x id="a"></x-x>
  22 <span id="b" is="x-y"></span>
  23 <script>
  24 description('Tests the :unresolved pseudoclass.');
  25
  26 var a = document.querySelector('#a');
  27 shouldBe('document.querySelector("x-x:unresolved")', 'a');
  28 shouldBe('window.getComputedStyle(a).color', '"rgb(0, 0, 222)"');
  29
  30 var b = document.querySelector('#b');
  31 shouldBe('window.getComputedStyle(b).color', '"rgb(0, 0, 222)"');
  32 shouldBe('window.getComputedStyle(b).borderColor', '"rgb(0, 0, 111)"');
  33
  34 var X = document.registerElement('x-x', {prototype: Object.create(HTMLElement.prototype)});
  35 var c = new X();
  36 document.body.insertBefore(c, b);
  37 shouldBe('window.getComputedStyle(c).color', '"rgb(0, 222, 0)"');
  38
  39 // Registering x-x should have changed the styles of #a.
  40 shouldBe('window.getComputedStyle(a).color', '"rgb(0, 222, 0)"');
  41
  42 var Y = document.registerElement('x-y', {extends: 'span', prototype: Object.create(HTMLSpanElement.prototype)});
  43 var d = new Y();
  44 document.body.insertBefore(d, b);
  45 shouldBe('window.getComputedStyle(d).color', '"rgb(0, 111, 0)"');
  46
  47 // Registering is="x-y" should have changed the styles of #b.
  48 shouldBe('window.getComputedStyle(b).color', '"rgb(0, 111, 0)"');
  49
  50 successfullyParsed = true;
  51 </script>