summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/custom-elements/reaction-timing.html
blob: 9e5bafbedfec42d28eb94c95ed84396941bc61ac (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
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements: Custom element reactions must be invoked before returning to author scripts</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="Custom element reactions must be invoked before returning to author scripts">
<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#invoke-custom-element-reactions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<script>

class MyCustomElement extends HTMLElement {
    attributeChangedCallback(...args) {
        this.handler(...args);
    }

    handler() { }
}
MyCustomElement.observedAttributes = ['data-title', 'title'];
customElements.define('my-custom-element', MyCustomElement);

test(function () {
    var instance = document.createElement('my-custom-element');
    var anotherInstance = document.createElement('my-custom-element');

    var callbackOrder = [];
    instance.handler = function () {
        callbackOrder.push([this, 'begin']);
        anotherInstance.setAttribute('data-title', 'baz');
        callbackOrder.push([this, 'end']);
    }
    anotherInstance.handler = function () {
        callbackOrder.push([this, 'begin']);
        callbackOrder.push([this, 'end']);
    }

    instance.setAttribute('title', 'foo');
    assert_equals(callbackOrder.length, 4);

    assert_array_equals(callbackOrder[0], [instance, 'begin']);
    assert_array_equals(callbackOrder[1], [anotherInstance, 'begin']);
    assert_array_equals(callbackOrder[2], [anotherInstance, 'end']);
    assert_array_equals(callbackOrder[3], [instance, 'end']);

}, 'setAttribute and removeAttribute must enqueue and invoke attributeChangedCallback');

test(function () {
    var shouldCloneAnotherInstance = false;
    var anotherInstanceClone;
    var log = [];

    class SelfCloningElement extends HTMLElement {
        constructor() {
            super();
            log.push([this, 'begin']);
            if (shouldCloneAnotherInstance) {
                shouldCloneAnotherInstance = false;
                anotherInstanceClone = anotherInstance.cloneNode(false);
            }
            log.push([this, 'end']);
        }
    }
    customElements.define('self-cloning-element', SelfCloningElement);

    var instance = document.createElement('self-cloning-element');
    var anotherInstance = document.createElement('self-cloning-element');
    shouldCloneAnotherInstance = true;

    assert_equals(log.length, 4);
    var instanceClone = instance.cloneNode(false);

    assert_equals(log.length, 8);
    assert_array_equals(log[0], [instance, 'begin']);
    assert_array_equals(log[1], [instance, 'end']);
    assert_array_equals(log[2], [anotherInstance, 'begin']);
    assert_array_equals(log[3], [anotherInstance, 'end']);
    assert_array_equals(log[4], [instanceClone, 'begin']);
    assert_array_equals(log[5], [anotherInstanceClone, 'begin']);
    assert_array_equals(log[6], [anotherInstanceClone, 'end']);
    assert_array_equals(log[7], [instanceClone, 'end']);
}, 'Calling Node.prototype.cloneNode(false) must push a new element queue to the processing stack');

</script>
</body>
</html>