summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/resize-observer/observe.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/resize-observer/observe.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/resize-observer/observe.html')
-rw-r--r--testing/web-platform/tests/resize-observer/observe.html1007
1 files changed, 1007 insertions, 0 deletions
diff --git a/testing/web-platform/tests/resize-observer/observe.html b/testing/web-platform/tests/resize-observer/observe.html
new file mode 100644
index 0000000000..f6015bef78
--- /dev/null
+++ b/testing/web-platform/tests/resize-observer/observe.html
@@ -0,0 +1,1007 @@
+<!doctype html>
+<title>ResizeObserver tests</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/resizeTestHelper.js"></script>
+<body>
+<div id="log"></div>
+
+<script>
+'use strict';
+
+function test0() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test0: simple observation",
+ [
+ {
+ setup: observer => {
+ observer.observe(t);
+ t.style.width = "5px";
+ },
+ 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, 5, "target width");
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test1() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test1: multiple observation on same element trigger only one",
+ [
+ {
+ setup: observer => {
+ observer.observe(t);
+ observer.observe(t);
+ t.style.width = "10px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test2() {
+ test(() => {
+ assert_throws_js(TypeError, _=> {
+ let ro = new ResizeObserver(() => {});
+ ro.observe({});
+ });
+ },
+ "test2: throw exception when observing non-element"
+ );
+ return Promise.resolve();
+}
+
+function test3() {
+ let t1 = createAndAppendElement("div");
+ let t2 = createAndAppendElement("div");
+ t1.style.width = "100px";
+ t2.style.width = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test3: disconnect stops all notifications", [
+ {
+ setup: observer => {
+ observer.observe(t1);
+ observer.observe(t2);
+ observer.disconnect();
+ t1.style.width = "30px";
+ },
+ notify: entries => {
+ assert_unreached("no entries should be observed");
+ },
+ timeout: () => {
+ // expected
+ }
+ }
+ ]);
+ return helper.start(() => {
+ t1.remove();
+ t2.remove();
+ });
+}
+
+function test4() {
+ let t1 = createAndAppendElement("div");
+ let t2 = createAndAppendElement("div");
+ t1.style.width = "100px";
+ t2.style.width = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test4: unobserve target stops notifications, unobserve non-observed does nothing", [
+ {
+ setup: observer => {
+ observer.observe(t1);
+ observer.observe(t2);
+ observer.unobserve(t1);
+ observer.unobserve(document.body);
+ t1.style.width = "40px";
+ t2.style.width = "40px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "only t2");
+ assert_equals(entries[0].target, t2, "t2 was observed");
+ }
+ }
+ ]);
+ return helper.start(() => {
+ t1.remove();
+ t2.remove();
+ });
+}
+
+function test5() {
+ const img = new Image();
+ img.style.width = "15px";
+ img.style.height = "15px";
+ img.src = "resources/image.png";
+
+ return img.decode().then(() => {
+ return new Promise(resolve => {
+ requestAnimationFrame(() => {
+ document.body.appendChild(img);
+ resolve();
+ });
+ });
+ }).then(() => {
+ let helper = new ResizeTestHelper("test5: observe img",[
+ {
+ setup: observer => {
+ observer.observe(img);
+ },
+ notify: entries => {
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ img.style.width = "15.5px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].contentRect.width, 15.5);
+ }
+ }
+ ]);
+ return helper.start(() => img.remove());
+ }, () => {
+ // dummy test for dumping the error message.
+ test(_ => {
+ assert_unreached("decode image failed");
+ }, "test5: observe img");
+ });
+}
+
+function test6() {
+ let iframe = createAndAppendElement("iframe");
+ iframe.width = "300px";
+ iframe.height = "100px";
+ iframe.style.display = "block";
+
+ let resolvePromise;
+ let promise = new Promise((resolve) => {
+ resolvePromise = resolve;
+ });
+ let test = async_test('test6: iframe notifications');
+ let testRequested = false;
+ test.add_cleanup(() => iframe.remove());
+
+ window.addEventListener('message', event => {
+ switch(event.data) {
+ case 'readyToTest':
+ if (!testRequested) {
+ iframe.contentWindow.postMessage('startTest', '*');
+ testRequested = true;
+ }
+ break;
+ case 'success':
+ case 'fail':
+ window.requestAnimationFrame(() => {
+ resolvePromise();
+ test.step(() => {
+ assert_equals(event.data, 'success');
+ test.done();
+ });
+ });
+ break;
+ }
+ }, false);
+
+ iframe.src = "./resources/iframe.html";
+ return new Promise(function(resolve, reject) {
+ iframe.onload = () => resolve();
+ iframe.onerror = () => reject();
+ }).then(() => {
+ return promise;
+ }).catch(error => {
+ test.step(() => {
+ assert_unreached("loading iframe is error");
+ });
+ });
+}
+
+function test7() {
+ let harnessTest = async_test("test7: callback.this");
+ let resolvePromise;
+ let ro = new ResizeObserver( function(entries, obs) {
+ let callbackThis = this;
+ harnessTest.step(() => {
+ assert_equals(callbackThis, ro, "callback.this is ResizeObserver");
+ assert_equals(obs, ro, "2nd argument is ResizeObserver");
+ ro.disconnect();
+ // every reference to RO must be null before test completes
+ // to avoid triggering test leak-detection
+ ro = null;
+ callbackThis = null;
+ obs = null;
+ harnessTest.step_timeout( _ => {
+ harnessTest.done();
+ resolvePromise();
+ }, 0);
+ });
+ }
+ );
+
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ harnessTest.add_cleanup(() => t.remove());
+
+ ro.observe(t);
+
+ return new Promise( (resolve, reject) => {
+ resolvePromise = resolve;
+ });
+}
+
+function test8() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ t.style.height = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test8: simple content-box observation",
+ [
+ {
+ setup: observer => {
+
+ observer.observe(t, { box: "content-box" });
+ },
+ 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, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ t.style.width = "90px";
+ t.style.height = "90px";
+ },
+ 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, 90, "target width");
+ assert_equals(entries[0].contentRect.height, 90, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 90,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 90,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 90,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 90,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ t.style.padding = "5px";
+ },
+ notify: entries => {
+ assert_unreached("the 'content-box' ResizeObserver shouldn't fire " +
+ "for restyles that don't affect the content-box size");
+ },
+ timeout: () => {
+ // expected
+ // Note: the border-box size is 100px x 100px right now.
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test9() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ t.style.height = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test9: simple content-box observation but keep border-box size unchanged",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, { box: "content-box" });
+ },
+ 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, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ // Keep the border-box size the same, and change the content-box size.
+ t.style.width = "92px";
+ t.style.height = "92px";
+ t.style.padding = "4px";
+ },
+ 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, 92, "target width");
+ assert_equals(entries[0].contentRect.height, 92, "target height");
+ assert_equals(entries[0].contentRect.top, 4, "target top padding");
+ assert_equals(entries[0].contentRect.left, 4, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 92,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 92,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test10() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ t.style.height = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test10: simple border-box observation",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, { box: "border-box" });
+ },
+ 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, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ t.style.padding = "4px";
+ },
+ 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, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 4, "target top padding");
+ assert_equals(entries[0].contentRect.left, 4, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 108,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 108,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ t.style.width = "104px";
+ t.style.height = "104px";
+ t.style.padding = "2px";
+ },
+ notify: entries => {
+ assert_unreached("the 'border-box' ResizeObserver shouldn't fire " +
+ "for restyles that don't affect the border-box size");
+ },
+ timeout: () => {
+ // expected: 104 + 2 * 2 = 108. The border-box size is the same.
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test11() {
+ let wrapper = createAndAppendElement("div");
+ wrapper.style.width = "100px";
+ wrapper.style.height = "100px";
+ wrapper.style.writingMode = "vertical-rl";
+ let t = createAndAppendElement("div", wrapper);
+ t.style.inlineSize = "50px";
+ t.style.blockSize = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test11: simple observation with vertical writing mode",
+ [
+ {
+ 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, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 50, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 50,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ t.style.blockSize = "75px";
+ },
+ 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, 75, "target width");
+ assert_equals(entries[0].contentRect.height, 50, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 75,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 75,
+ "target border-box block size");
+ }
+ }
+ ]);
+
+ return helper.start(() => {
+ t.remove();
+ wrapper.remove();
+ });
+}
+
+function test12() {
+ let t = createAndAppendElement("div");
+ t.style.writingMode = "vertical-lr";
+ t.style.inlineSize = "100px";
+ t.style.blockSize = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test12: no observation is fired after the change of writing mode when " +
+ "box's specified size comes from logical size properties.",
+ [
+ {
+ 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, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 50,
+ "target content-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ t.style.writingMode = "horizontal-tb";
+ },
+ notify: entries => {
+ assert_unreached("the logical size of content-box doesn't change");
+ },
+ timeout: () => {
+ // expected: We don't change the logical size of content-box.
+ }
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+}
+
+function test13() {
+ let t = createAndAppendElement("div");
+ t.style.writingMode = "vertical-lr";
+ t.style.height = "100px";
+ t.style.width = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test13: an observation is fired after the change of writing mode when " +
+ "box's specified size comes from physical size properties.",
+ [
+ {
+ 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, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 50,
+ "target content-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ t.style.writingMode = "horizontal-tb";
+ },
+ 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, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ },
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+}
+
+function test14() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ t.style.height = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test14: observe the same target but using a different box should " +
+ "override the previous one",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, { box: "content-box" });
+ observer.observe(t, { box: "border-box" });
+ },
+ 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, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ // Change border-box size.
+ t.style.padding = "4px";
+ },
+ 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, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 4, "target top padding");
+ assert_equals(entries[0].contentRect.left, 4, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 108,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 108,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ // Change only content-box size.
+ t.style.width = "104px";
+ t.style.height = "104px";
+ t.style.padding = "2px";
+ },
+ notify: entries => {
+ assert_unreached("the 'border-box' ResizeObserver shouldn't fire " +
+ "for restyles that don't affect the border-box size");
+ },
+ timeout: () => {
+ // expected: 104 + 2 * 2 = 108. The border-box size is the same.
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test15() {
+ let t = createAndAppendElement("div");
+ t.style.height = "100px";
+ t.style.width = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test15: an observation is fired with box dimensions 0 when element's " +
+ "display property is set to inline",
+ [
+ {
+ 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, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ t.style.display = "inline";
+ },
+ notify: entries => {
+ assert_equals(entries[0].contentRect.width, 0, "target width");
+ assert_equals(entries[0].contentRect.height, 0, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 0,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 0,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 0,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 0,
+ "target border-box block size");
+ }
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+}
+
+function test16() {
+ let t = createAndAppendElement("span");
+
+ let helper = new ResizeTestHelper(
+ // See: https://drafts.csswg.org/resize-observer/#intro.
+ "test16: observations fire once with 0x0 size for non-replaced inline elements",
+ [
+ {
+ 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");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 0,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 0,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 0,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 0,
+ "target border-box block size");
+ }
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+
+}
+
+function test17() {
+ // <div id="outer">
+ // <div id="nested">
+ // </div>
+ // </div>
+
+ let outer = document.createElement('div');
+ outer.style.width = "100px";
+ outer.style.height = "100px";
+ outer.style.padding = "10px";
+ outer.style.border = "1px solid blue"
+ let nested = document.createElement('div');
+ nested.style.width = "60px";
+ nested.style.height = "50px";
+ nested.style.padding = "5%";
+ nested.style.boxSizing = "border-box";
+ nested.style.border = "5px solid black";
+ outer.appendChild(nested);
+ document.body.appendChild(outer);
+
+ let helper = new ResizeTestHelper(
+ "test17: Box sizing snd Resize Observer notifications",
+ [
+ {
+ setup: observer => {
+ observer.observe(nested, { box: "content-box" });
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, nested, "target is nested");
+ assert_equals(entries[0].contentRect.width, 40, "target width");
+ assert_equals(entries[0].contentRect.height, 30, "target height");
+ assert_equals(entries[0].contentRect.top, 5, "target top padding");
+ assert_equals(entries[0].contentRect.left, 5, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 40,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 30,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ // Changes to a parent's dimensions with a child's padding set as a percentage
+ // should fire observation if content-box is being observed
+ setup: observer => {
+ outer.style.height = "200px";
+ outer.style.width = "200px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, nested, "target is nested");
+ assert_equals(entries[0].contentRect.width, 30, "target width");
+ assert_equals(entries[0].contentRect.height, 20, "target height");
+ assert_equals(entries[0].contentRect.top, 10, "target top padding");
+ assert_equals(entries[0].contentRect.left, 10, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 30,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 20,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ // Changes to a parent's dimensions with a child's padding set as a percentage
+ // should fire observation if content-box is being observed
+ setup: observer => {
+ nested.style.border = "1px solid black";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, nested, "target is nested");
+ assert_equals(entries[0].contentRect.width, 38, "target width");
+ assert_equals(entries[0].contentRect.height, 28, "target height");
+ assert_equals(entries[0].contentRect.top, 10, "target top padding");
+ assert_equals(entries[0].contentRect.left, 10, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 38,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 28,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ observer.observe(nested, { box: "border-box" });
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, nested, "target is nested");
+ assert_equals(entries[0].contentRect.width, 38, "target width");
+ assert_equals(entries[0].contentRect.height, 28, "target height");
+ assert_equals(entries[0].contentRect.top, 10, "target top padding");
+ assert_equals(entries[0].contentRect.left, 10, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 38,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 28,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ return true;
+ }
+ },
+ {
+ // Changes to a parent's dimensions with a child's padding set as a percentage
+ // should not fire observation if border-box is being observed
+ setup: observer => {
+ outer.style.height = "100px";
+ },
+ notify: entries => {
+ assert_unreached("No observation should be fired when nested border box remains constant");
+ },
+ timeout: () => {
+ // expected
+ }
+ },
+
+ ]);
+ return helper.start(() => nested.remove());
+}
+
+function test18() {
+ let t = createAndAppendElement("div");
+ t.style.height = "100px";
+ t.style.width = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test18: an observation is fired when device-pixel-content-box is being " +
+ "observed",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, {box: "device-pixel-content-box"});
+ },
+ 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, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 50,
+ "target device-pixel-content-box inline size");
+ assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 100,
+ "target device-pixel-content-box block size");
+ }
+ },
+ ]);
+
+ return helper.start(() => t.remove());
+}
+
+function test19() {
+ // zoom is not a standard css property, so we should check it first. If the
+ // browser doesn't support it, we skip this test.
+ if (!CSS.supports("zoom", "3")) {
+ return Promise.resolve();
+ }
+
+ let t = createAndAppendElement("div");
+ t.style.height = "100px";
+ t.style.width = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test19: an observation is fired when device-pixel-content-box is being " +
+ "observed and zoom change",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, {box: "device-pixel-content-box"});
+ },
+ notify: entries => {
+ // No need to test again (see test18), so skip this event loop.
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ document.body.style.zoom = 3;
+ },
+ 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, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 150,
+ "target device-pixel-content-box inline size");
+ assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 300,
+ "target device-pixel-content-box block size");
+ return true;
+ }
+ },
+ {
+ setup: observer => {
+ document.body.style.zoom = '';
+ },
+ notify: entries => {}
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+}
+
+let guard;
+test(_ => {
+ assert_own_property(window, "ResizeObserver");
+ guard = async_test('guard');
+}, "ResizeObserver implemented")
+
+test0()
+ .then(() => test1())
+ .then(() => test2())
+ .then(() => test3())
+ .then(() => test4())
+ .then(() => test5())
+ .then(() => test6())
+ .then(() => test7())
+ .then(() => test8())
+ .then(() => test9())
+ .then(() => test10())
+ .then(() => test11())
+ .then(() => test12())
+ .then(() => test13())
+ .then(() => test14())
+ .then(() => test15())
+ .then(() => test16())
+ .then(() => test17())
+ .then(() => test18())
+ .then(() => test19())
+ .then(() => guard.done());
+
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-31 03:44:21 +0000