diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/custom-elements/reaction-timing.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/custom-elements/reaction-timing.html')
| -rw-r--r-- | testing/web-platform/tests/custom-elements/reaction-timing.html | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/testing/web-platform/tests/custom-elements/reaction-timing.html b/testing/web-platform/tests/custom-elements/reaction-timing.html new file mode 100644 index 0000000000..454cc26c0f --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reaction-timing.html @@ -0,0 +1,113 @@ +<!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 instance = document.createElement('my-custom-element'); + var anotherInstance = document.createElement('my-custom-element'); + + var callbackOrder = []; + instance.handler = function () { + callbackOrder.push([this, 'begin']); + anotherInstance.toggleAttribute('data-title'); + callbackOrder.push([this, 'end']); + } + anotherInstance.handler = function () { + callbackOrder.push([this, 'begin']); + callbackOrder.push([this, 'end']); + } + + instance.toggleAttribute('title'); + 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']); + +}, 'toggleAttribute 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> |