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