| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>The :unresolved pseudoclass matching with Document.querySelector()</title> |
| <meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> |
| <meta name="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru"> |
| <meta name="assert" content="The :unresolved pseudoclass must match all custom elements whose created callback has not yet been invoked"> |
| <link rel="help" href="http://www.w3.org/TR/custom-elements/#unresolved-element-pseudoclass"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../testcommon.js"></script> |
| <link rel="stylesheet" href="/resources/testharness.css"> |
| </head> |
| <body> |
| <div id="log"></div> |
| <script> |
| test(function() { |
| var doc = newHTMLDocument(); |
| doc.body.innerHTML = '<x-a></x-a>'; |
| var customElement = doc.querySelector(':unresolved'); |
| |
| assert_not_equals(customElement, null, |
| 'Unresolved custom element should be accessible by :unresolved'); |
| assert_equals(customElement.localName, 'x-a', |
| 'Custom element returned by Document.querySelector(\':unresolved\') should be x-a'); |
| }, 'Test that unresolved custom element is accessible by Document.querySelector(\':unresolved\')'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| doc.body.innerHTML = '<x-b></x-b>'; |
| var customElement = doc.querySelector(':unresolved'); |
| assert_not_equals(customElement, null, |
| 'Unresolved custom element should be accessible by :unresolved'); |
| assert_equals(customElement.localName, 'x-b', |
| 'Custom element returned by Document.querySelector(\':unresolved\') should be x-b'); |
| |
| doc.registerElement('x-b'); |
| customElement = doc.querySelector(':unresolved'); |
| assert_equals(customElement, null, |
| 'Registered custom element should not be accessible by :unresolved pseudoclass'); |
| }, 'Test that registered custom element are not accessible by :unresolved'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| doc.body.innerHTML = '<x-c></x-c><x-d></x-d>'; |
| var customElement = doc.querySelector(':unresolved'); |
| assert_not_equals(customElement, null, |
| 'Unresolved custom element should be accessible by :unresolved pseudoclass'); |
| assert_equals(customElement.localName, 'x-c', |
| 'Custom element returned by Document.querySelector(\':unresolved\') should be x-c'); |
| |
| doc.registerElement('x-c'); |
| customElement = doc.querySelector(':unresolved'); |
| assert_not_equals(customElement, null, |
| 'Unresolved custom elements should be accessible by :unresolved pseudoclass'); |
| assert_equals(customElement.localName, 'x-d', |
| 'Custom element returned by Document.querySelector(\':unresolved\') should be x-d'); |
| }, 'If there are more than one unresolved custom element, all of them should be ' + |
| 'accessible by :unresolved pseudoclass'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| var customElement = doc.createElement('x-e'); |
| doc.body.appendChild(customElement); |
| var queryResult = doc.querySelector(':unresolved'); |
| |
| assert_not_equals(queryResult, null, |
| 'Unresolved custom element should be accessible by :unresolved'); |
| assert_equals(queryResult.localName, 'x-e', |
| 'Custom element returned by Document.querySelector(\':unresolved\') should be x-e'); |
| }, 'Unresolved custom element, created via Document.createElement(), should be ' + |
| 'accessible by Document.querySelector(\':unresolved\')'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| doc.body.innerHTML = '<div><x-f></x-f><div>'; |
| var customElement = doc.querySelector(':unresolved'); |
| |
| assert_not_equals(customElement, null, |
| 'Unresolved custom element should be accessible by :unresolved'); |
| assert_equals(customElement.localName, 'x-f', |
| 'Custom element returned by Document.querySelector(\':unresolved\') should be x-f'); |
| }, 'Unresolved custom element inside div element should be accessible by ' + |
| ':unresolved pseudoclass'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| doc.body.innerHTML = '<x-h><x-g></x-g></x-h>'; |
| var customElement = doc.querySelector(':unresolved'); |
| |
| assert_not_equals(customElement, null, |
| 'Unresolved custom element should be accessible by :unresolved pseudoclass'); |
| assert_equals(customElement.localName, 'x-h', |
| 'Custom element returned by Document.querySelector(\':unresolved\') ' + |
| 'should be x-h'); |
| |
| doc.registerElement('x-h'); |
| customElement = doc.querySelector(':unresolved'); |
| |
| assert_not_equals(customElement, null, |
| 'Unresolved custom element should be accessible by :unresolved pseudoclass'); |
| assert_equals(customElement.localName, 'x-g', |
| 'Custom element returned by Document.querySelector(\':unresolved\') ' + |
| 'should be x-g'); |
| }, 'All unresolved custom element including nested ones should be accessible ' + |
| 'by Document.querySelector(\':unresolved\')'); |
| |
| |
| testInIFrame('../../resources/x-element.html', function(doc) { |
| var customElement = doc.querySelector(':unresolved'); |
| |
| assert_not_equals(customElement, null, |
| 'Unresolved custom element should be accessible by :unresolved'); |
| assert_equals(customElement.localName, 'x-element', |
| 'Custom element returned by Document.querySelector(\':unresolved\') should be x-element'); |
| }, 'Document.querySelector(): Unresolved custom element should be accessible by :unresolved ' + |
| 'in loaded document'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| |
| HTML5_ELEMENTS.forEach(function(tagName) { |
| if (HTML5_DOCUMENT_ELEMENTS.indexOf(tagName) === -1) { |
| var obj = doc.createElement(tagName); |
| var name = 'x-i-' + tagName; |
| var id = 'x-i-' + tagName + '-id'; |
| if (HTML5_TABLE_ELEMENTS.indexOf(tagName) !== -1) { |
| doc.body.innerHTML = |
| '<table>' + |
| '<' + tagName + ' id="' + id + '" is="' + name + '"></' + tagName + '>' + |
| '</table>'; |
| } else { |
| doc.body.innerHTML = |
| '<' + tagName + ' id="' + id + '" is="' + name + '"></' + tagName + '>'; |
| } |
| var customElement = doc.querySelector(':unresolved'); |
| |
| assert_not_equals(customElement, null, |
| 'Unresolved custom element should be accessible by :unresolved pseudoclass'); |
| assert_equals(customElement.id, id, |
| 'ID of element returned by Document.querySelector(\':unresolved\') ' + |
| 'should be ' + id); |
| |
| var proto = Object.create(obj.constructor.prototype); |
| doc.registerElement(name, {prototype: proto, extends: tagName}); |
| var customElement2 = doc.querySelector(':unresolved'); |
| |
| assert_equals(customElement2, null, |
| 'Registered custom element should not be accessible by :unresolved pseudoclass'); |
| } |
| }); |
| }, 'Test that Document.querySelector(\':unresolved\') returns custom element, ' + |
| 'extending HTML elements by IS attribute'); |
| </script> |
| </body> |
| </html> |