summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/custom-elements/v0/custom-element-lifecycle/types-of-callbacks/detached-callback-move-element-test.html
blob: d69eb54dbb4fe59acf6af1d692ff0dcac85bbf46 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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>
</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>