summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/resize-observer/notify.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/resize-observer/notify.html
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/resize-observer/notify.html')
-rw-r--r--testing/web-platform/tests/resize-observer/notify.html408
1 files changed, 408 insertions, 0 deletions
diff --git a/testing/web-platform/tests/resize-observer/notify.html b/testing/web-platform/tests/resize-observer/notify.html
new file mode 100644
index 0000000000..dc2e268b8a
--- /dev/null
+++ b/testing/web-platform/tests/resize-observer/notify.html
@@ -0,0 +1,408 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/resizeTestHelper.js"></script>
+<style>
+ div {
+ border: 1px dotted gray
+ }
+ .transform {
+ transform: scale(2,2) rotate(90deg)
+ }
+</style>
+<p>ResizeObserver tests</p>
+<div id="target1" style="width:100px;height:100px;">t1
+ <div id="target2" style="width:100px;height:100px;">t2
+ <div id="target3" style="width:100px;height:100px;">t3
+ <span id="inline">inline</span>
+ </div>
+ </div>
+</div>
+<div id="absolute" style="width:100.5px;height:100.5px;position:absolute;top:10.3px;left:10.3px"></div>
+<script>
+'use strict';
+
+let t1 = document.querySelector('#target1');
+let t2 = document.querySelector('#target2');
+let t3 = document.querySelector('#target3');
+let abs = document.querySelector('#absolute');
+let inline = document.querySelector('#inline');
+
+function test0() {
+ let helper = new ResizeTestHelper(
+ "test0: notification ordering",
+ [
+ {
+ setup: observer => {
+ observer.observe(t3);
+ observer.observe(t2);
+ observer.observe(t1);
+ t1.style.width = "5px";
+ t3.style.width = "5px";
+ t2.style.width = "5px";
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 3, "3 resizes");
+ assert_equals(entries[0].target, t3, "ordering");
+ assert_equals(entries[1].target, t2, "ordering");
+ assert_equals(entries[2].target, t1, "ordering");
+ observer.disconnect();
+ t1.style.width = "100px";
+ t2.style.width = "100px";
+ t3.style.width = "100px";
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test1() {
+ let helper = new ResizeTestHelper(
+ "test1: display:none triggers notification",
+ [
+ {
+ setup: observer => {
+ observer.observe(t1);
+ },
+ notify: (entries, observer) => {
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ t1.style.display = "none";
+ },
+ notify: (entries, observer) => {
+ t1.style.display = "";
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+
+function test2() {
+ let helper = new ResizeTestHelper(
+ "test2: remove/appendChild trigger notification",
+ [
+ {
+ setup: observer => {
+ observer.observe(t1);
+ },
+ notify: (entries, observer) => {
+ return true; // Delay next step
+ }
+ },
+ { // "removeChild triggers notification"
+ setup: observer => {
+ t1.parentNode.removeChild(t1);
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries[0].target, t1);
+ return true; // Delay next step
+ }
+ },
+ { // "appendChild triggers notification",
+ setup: observer => {
+ document.body.appendChild(t1);
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries[0].target, t1)
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+
+function test3() {
+ let helper = new ResizeTestHelper(
+ "test3: dimensions match",
+ [
+ {
+ setup: observer => {
+ observer.observe(t1);
+ t1.style.width = "200.5px";
+ t1.style.height = "100px";
+ t1.style.paddingLeft = "20px";
+ t1.style.paddingTop = "10px";
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries[0].contentRect.left,20);
+ assert_equals(entries[0].contentRect.top,10);
+ assert_between_inclusive(entries[0].contentRect.width, 200.4, 200.6, "width is not rounded");
+ assert_equals(entries[0].contentRect.height, 100);
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test4() {
+ let helper = new ResizeTestHelper(
+ "test4: transform do not cause notifications",
+ [
+ {
+ setup: observer => {
+ observer.observe(t2);
+ },
+ notify: (entries, observer) => {
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ t2.classList.add("transform");
+ },
+ notify: (entries, observer) => {
+ assert_unreached("transform must not trigger notifications");
+ },
+ timeout: () => {
+ t2.classList.remove("transform");
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test5() {
+ let helper = new ResizeTestHelper(
+ "test5: moving an element does not trigger notifications",
+ [
+ {
+ setup: observer => {
+ observer.observe(abs);
+ },
+ notify: (entries, observer) => {
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ abs.style.top = "20.33px";
+ abs.style.left = "20.33px";
+ },
+ notify: (entries, observer) => {
+ assert_unreached("movement should not cause resize notifications");
+ },
+ timeout: () => {
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test6() {
+ let helper = new ResizeTestHelper(
+ "test6: inline element notifies once with 0x0.",
+ [
+ {
+ setup: observer => {
+ observer.observe(inline);
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1, "observing inline element triggers notification");
+ assert_equals(entries[0].target, inline, "observing inline element triggers notification");
+ assert_equals(entries[0].contentRect.width, 0);
+ assert_equals(entries[0].contentRect.height, 0);
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ inline.style.width = "66px";
+ },
+ notify: (entries, observer) => {
+ assert_unreached("resizing inline element should not cause resize notifications");
+ },
+ timeout: () => {
+ // expected
+ }
+ },
+ { // "inline element that becomes block should notify",
+ setup: observer => {
+ inline.style.display = "block";
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1, "inline element becoming a non-zero sized block triggers a notification");
+ assert_equals(entries[0].target, inline, "inline element becoming a non-zero sized block triggers a notification");
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test7() {
+ let helper = new ResizeTestHelper(
+ "test7: unobserve inside notify callback",
+ [
+ {
+ setup: observer => {
+ observer.observe(t1);
+ observer.observe(t2);
+ },
+ notify: (entries, observer) => {
+ t1.style.width = "777px";
+ t2.style.width = "777px";
+ observer.unobserve(t1);
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1, "only t2 is observed");
+ assert_equals(entries[0].target, t2, "only t2 is observed");
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test8() {
+ let helper = new ResizeTestHelper(
+ "test8: observe inside notify callback",
+ [
+ {
+ setup: observer => {
+ observer.observe(t1);
+ },
+ notify: (entries, observer) => {
+ observer.observe(t2);
+ t2.style.width = "888px";
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1, "only t2 is observed");
+ assert_equals(entries[0].target, t2, "only t2 is observed");
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test9() {
+ let helper = new ResizeTestHelper(
+ "test9: disconnect inside notify callback",
+ [
+ {
+ setup: observer => {
+ observer.observe(t1);
+ },
+ notify: (entries, observer) => {
+ t1.style.width = "999px";
+ observer.disconnect();
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ },
+ notify: (entries, observer) => {
+ assert_unreached("there should be no notifications after disconnect");
+ },
+ timeout: () => {
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test10() {
+ var parent = t1.parentNode;
+ let helper = new ResizeTestHelper(
+ "test10: element notifies when parent removed",
+ [
+ {
+ setup: observer => {
+ observer.observe(t3);
+ },
+ notify: (entries, observer) => {
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ t1.parentNode.removeChild(t1);
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].target, t3);
+ parent.appendChild(t1);
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test11() {
+ let t = createAndAppendElement("div");
+ t.style.display = "none";
+
+ let helper = new ResizeTestHelper(
+ "test11: display:none element should be notified",
+ [
+ {
+ setup: observer => {
+ observer.observe(t);
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 0, "target width");
+ assert_equals(entries[0].contentRect.height, 0, "target height");
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test12() {
+ let t = createAndAppendElement("div");
+ t.style.width = "0px";
+
+ let helper = new ResizeTestHelper(
+ "test12: element sized 0x0 should be notified",
+ [
+ {
+ setup: observer => {
+ observer.observe(t);
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 0, "target width");
+ assert_equals(entries[0].contentRect.height, 0, "target height");
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+let guard;
+test(_ => {
+ assert_own_property(window, "ResizeObserver");
+ guard = async_test('guard');
+}, "ResizeObserver implemented")
+
+test0()
+ .then(() => { return test1(); })
+ .then(() => { return test2(); })
+ .then(() => { return test3(); })
+ .then(() => { return test4(); })
+ .then(() => { return test5(); })
+ .then(() => { return test6(); })
+ .then(() => { return test7(); })
+ .then(() => { return test8(); })
+ .then(() => { return test9(); })
+ .then(() => { return test10(); })
+ .then(() => { return test11(); })
+ .then(() => { return test12(); })
+ .then(() => { guard.done(); });
+
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-08 00:30:28 +0000