src/third_party/WebKit/LayoutTests/w3c/web-platform-tests/custom-elements/registering-custom-elements/unresolved-element-pseudoclass/unresolved-element-pseudoclass-matching-query-selector.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>The :unresolved pseudoclass matching with Document.querySelector()</title>
   5 <meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
   6 <meta name="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
   7 <meta name="assert" content="The :unresolved pseudoclass must match all custom elements whose created callback has not yet been invoked">
   8 <link rel="help" href="http://www.w3.org/TR/custom-elements/#unresolved-element-pseudoclass">
   9 <script src="../../../../../resources/testharness.js"></script>
  10 <script src="../../../../../resources/testharnessreport.js"></script>
  11 <script src="../../testcommon.js"></script>
  12 <link rel="stylesheet" href="../../../../../resources/testharness.css">
  13 </head>
  14 <body>
  15 <div id="log"></div>
  16 <script>
  17 test(function() {
  18     var doc = newHTMLDocument();
  19     doc.body.innerHTML = '<x-a></x-a>';
  20     var customElement = doc.querySelector(':unresolved');
  21
  22     assert_not_equals(customElement, null,
  23         'Unresolved custom element should be accessible by :unresolved');
  24     assert_equals(customElement.localName, 'x-a',
  25         'Custom element returned by Document.querySelector(\':unresolved\') should be x-a');
  26 }, 'Test that unresolved custom element is accessible by Document.querySelector(\':unresolved\')');
  27
  28
  29 test(function() {
  30     var doc = newHTMLDocument();
  31     doc.body.innerHTML = '<x-b></x-b>';
  32     var customElement = doc.querySelector(':unresolved');
  33     assert_not_equals(customElement, null,
  34         'Unresolved custom element should be accessible by :unresolved');
  35     assert_equals(customElement.localName, 'x-b',
  36         'Custom element returned by Document.querySelector(\':unresolved\') should be x-b');
  37
  38     doc.registerElement('x-b');
  39     customElement = doc.querySelector(':unresolved');
  40     assert_equals(customElement, null,
  41         'Registered custom element should not be accessible by :unresolved pseudoclass');
  42 }, 'Test that registered custom element are not accessible by :unresolved');
  43
  44
  45 test(function() {
  46     var doc = newHTMLDocument();
  47     doc.body.innerHTML = '<x-c></x-c><x-d></x-d>';
  48     var customElement = doc.querySelector(':unresolved');
  49     assert_not_equals(customElement, null,
  50         'Unresolved custom element should be accessible by :unresolved pseudoclass');
  51     assert_equals(customElement.localName, 'x-c',
  52         'Custom element returned by Document.querySelector(\':unresolved\') should be x-c');
  53
  54     doc.registerElement('x-c');
  55     customElement = doc.querySelector(':unresolved');
  56     assert_not_equals(customElement, null,
  57         'Unresolved custom elements should be accessible by :unresolved pseudoclass');
  58     assert_equals(customElement.localName, 'x-d',
  59         'Custom element returned by Document.querySelector(\':unresolved\') should be x-d');
  60 }, 'If there are more than one unresolved custom element, all of them should be ' +
  61     'accessible by :unresolved pseudoclass');
  62
  63
  64 test(function() {
  65     var doc = newHTMLDocument();
  66     var customElement = doc.createElement('x-e');
  67     doc.body.appendChild(customElement);
  68     var queryResult = doc.querySelector(':unresolved');
  69
  70     assert_not_equals(queryResult, null,
  71         'Unresolved custom element should be accessible by :unresolved');
  72     assert_equals(queryResult.localName, 'x-e',
  73         'Custom element returned by Document.querySelector(\':unresolved\') should be x-e');
  74 }, 'Unresolved custom element, created via Document.createElement(), should be ' +
  75     'accessible by Document.querySelector(\':unresolved\')');
  76
  77
  78 test(function() {
  79     var doc = newHTMLDocument();
  80     doc.body.innerHTML = '<div><x-f></x-f><div>';
  81     var customElement = doc.querySelector(':unresolved');
  82
  83     assert_not_equals(customElement, null,
  84         'Unresolved custom element should be accessible by :unresolved');
  85     assert_equals(customElement.localName, 'x-f',
  86         'Custom element returned by Document.querySelector(\':unresolved\') should be x-f');
  87 }, 'Unresolved custom element inside div element should be accessible by ' +
  88     ':unresolved pseudoclass');
  89
  90
  91 test(function() {
  92     var doc = newHTMLDocument();
  93     doc.body.innerHTML = '<x-h><x-g></x-g></x-h>';
  94     var customElement = doc.querySelector(':unresolved');
  95
  96     assert_not_equals(customElement, null,
  97         'Unresolved custom element should be accessible by :unresolved pseudoclass');
  98     assert_equals(customElement.localName, 'x-h',
  99         'Custom element returned by Document.querySelector(\':unresolved\') ' +
 100         'should be x-h');
 101
 102     doc.registerElement('x-h');
 103     customElement = doc.querySelector(':unresolved');
 104
 105     assert_not_equals(customElement, null,
 106         'Unresolved custom element should be accessible by :unresolved pseudoclass');
 107         assert_equals(customElement.localName, 'x-g',
 108         'Custom element returned by Document.querySelector(\':unresolved\') ' +
 109         'should be x-g');
 110 }, 'All unresolved custom element including nested ones should be accessible ' +
 111     'by Document.querySelector(\':unresolved\')');
 112
 113
 114 testInIFrame('../../resources/x-element.html', function(doc) {
 115     var customElement = doc.querySelector(':unresolved');
 116
 117     assert_not_equals(customElement, null,
 118         'Unresolved custom element should be accessible by :unresolved');
 119     assert_equals(customElement.localName, 'x-element',
 120         'Custom element returned by Document.querySelector(\':unresolved\') should be x-element');
 121 }, 'Document.querySelector(): Unresolved custom element should be accessible by :unresolved ' +
 122     'in loaded document');
 123
 124
 125 test(function() {
 126     var doc = newHTMLDocument();
 127
 128     HTML5_ELEMENTS.forEach(function(tagName) {
 129         if (HTML5_DOCUMENT_ELEMENTS.indexOf(tagName) === -1) {
 130             var obj = doc.createElement(tagName);
 131             var name = 'x-i-' + tagName;
 132             var id = 'x-i-' + tagName + '-id';
 133             if (HTML5_TABLE_ELEMENTS.indexOf(tagName) !== -1) {
 134                 doc.body.innerHTML =
 135                     '<table>' +
 136                     '<' + tagName + ' id="' + id + '" is="' + name + '"></' + tagName + '>' +
 137                     '</table>';
 138             } else {
 139                 doc.body.innerHTML =
 140                     '<' + tagName + ' id="' + id + '" is="' + name + '"></' + tagName + '>';
 141             }
 142             var customElement = doc.querySelector(':unresolved');
 143
 144             assert_not_equals(customElement, null,
 145                 'Unresolved custom element should be accessible by :unresolved pseudoclass');
 146             assert_equals(customElement.id, id,
 147                 'ID of element returned by Document.querySelector(\':unresolved\') ' +
 148                 'should be ' + id);
 149
 150             var proto = Object.create(obj.constructor.prototype);
 151             doc.registerElement(name, {prototype: proto, extends: tagName});
 152             var customElement2 = doc.querySelector(':unresolved');
 153
 154             assert_equals(customElement2, null,
 155                 'Registered custom element should not be accessible by :unresolved pseudoclass');
 156         }
 157     });
 158 }, 'Test that Document.querySelector(\':unresolved\') returns custom element, ' +
 159     'extending HTML elements by IS attribute');
 160 </script>
 161 </body>
 162 </html>