<!DOCTYPE html>
<html>
<head>
<title>Test detached callback of a custom element when moving custom element between different documents</title>
<meta name="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<meta name="assert" content="detached callback ... must be enqueued whenever custom element is removed from the document and this document has a browsing context.">
<link rel="help" href="http://www.w3.org/TR/custom-elements/#types-of-callbacks">
<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();
    var proto = newHTMLElementPrototype();
    doc.registerElement('x-a', {prototype: proto});

    var customElement = doc.createElement('x-a');
    doc.body.appendChild(customElement);

    var divElement = doc.createElement('div');
    doc.body.appendChild(divElement);
    divElement.appendChild(customElement);

    assert_equals(proto.detachedCallbackCalledCounter, 0,
        'Callback detached should not be called in document without a browsing context');
}, 'Test detached callback is not called if moving custom element inside document ' +
    'without browsing context');


testInIFrame('../../resources/blank.html', function(docWithBrowsingContext) {
    var docNoBrowsingContext = newHTMLDocument();
    var proto1 = newHTMLElementPrototype();
    docNoBrowsingContext.registerElement('x-b', {prototype: proto1});

    var customElement = docNoBrowsingContext.createElement('x-b');
    docNoBrowsingContext.body.appendChild(customElement);
    var proto2 = newHTMLElementPrototype();
    docWithBrowsingContext.registerElement('x-b', {prototype: proto2});
    docWithBrowsingContext.body.appendChild(customElement);

    assert_equals(proto1.detachedCallbackCalledCounter, 0,
        'Callback detached should not be called in document without browsing context');
    assert_equals(proto2.detachedCallbackCalledCounter, 0,
        'Callback detached, defined in receiving document, should not be called');
}, 'Test detached callback is not called if moving custom element from ' +
    'document without browsing context to document with browsing context');


testInIFrame('../../resources/blank.html', function(docWithBrowsingContext) {
    var proto1 = newHTMLElementPrototype();
    docWithBrowsingContext.registerElement('x-c', {prototype: proto1});

    var customElement = docWithBrowsingContext.createElement('x-c');
    docWithBrowsingContext.body.appendChild(customElement);

    var docNoBrowsingContext = newHTMLDocument();
    var proto2 = newHTMLElementPrototype();
    docNoBrowsingContext.registerElement('x-c', {prototype: proto2});
    docNoBrowsingContext.body.appendChild(customElement);
    assert_equals(proto1.detachedCallbackCalledCounter, 1,
        'Callback detached should be called in documents with browsing context');
    assert_equals(proto2.detachedCallbackCalledCounter, 0,
        'Callback detached, defined in receiving document, should not be called');
}, 'Test detached callback if moving custom element from ' +
    'document with browsing context to document without browsing context');


testInIFrame('../../resources/blank.html', function(doc) {
    var proto = newHTMLElementPrototype();
    doc.registerElement('x-d', {prototype: proto});

    var customElement = doc.createElement('x-d');
    doc.body.appendChild(customElement);
    var divElement = doc.createElement('div');
    doc.body.appendChild(divElement);
    divElement.appendChild(customElement);
    assert_equals(proto.detachedCallbackCalledCounter, 1,
        'Callback detached should be called in documents with browsing context');
}, 'Test detached callback if moving custom element inside document ' +
    'with browsing context');


var moveTest =  async_test('Test detached callback if moving custom element from ' +
    'document with browsing context to document with browsing context');

moveTest.step(function() {
    var iframe1 = newIFrame('../../resources/blank.html');
    iframe1.onload = moveTest.step_func(function() {
        var doc1 = iframe1.contentDocument;

        // register custom element type
        var proto1 = newHTMLElementPrototype();
        doc1.registerElement('x-e', {prototype: proto1});

        // create custom element
        var customElement = doc1.createElement('x-e');
        doc1.body.appendChild(customElement);
        assert_equals(proto1.detachedCallbackCalledCounter, 0,
            'Callback detached should not be called when element is created');

        // create second iframe
        var iframe2 = newIFrame('../../resources/x-element.html');
        iframe2.onload = moveTest.step_func(function() {
            var doc2 = iframe2.contentDocument;

            // register custom element type
            var proto2 = newHTMLElementPrototype();
            doc2.registerElement('x-e', {prototype: proto2});

            // move element
            doc2.body.appendChild(customElement);
            assert_equals(proto1.detachedCallbackCalledCounter, 1,
                'Callback detached should be called in documents with browsing context');
            assert_equals(proto2.detachedCallbackCalledCounter, 0,
                'Callback detached, defined in receiving document, should not be called');

            // test clean up
            iframe1.remove();
            iframe2.remove();
            moveTest.done();
        });

    });
});
</script>
</body>
</html>