commit 6350ba1768626c9da3e55dfdcf3a7ea6f9e9c6b1
parent c04e0f28163af2058345fc0bc303e2f04bdbf85a
Author: Kiet Ho <kiet.ho@apple.com>
Date: Wed, 7 Jan 2026 09:47:58 +0000
Bug 2006784 [wpt PR 56836] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=304295, a=testonly
Automatic update from web-platform-tests
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=304295
--
wpt-commits: 2a90b71c3c8a99fc5a8c8c2e45773ef8176b8aa2
wpt-pr: 56836
Diffstat:
2 files changed, 124 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/resize-observer/observer-in-cross-origin-frame.sub.html b/testing/web-platform/tests/resize-observer/observer-in-cross-origin-frame.sub.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+
+<title>Tests that Resize Observer in a cross-origin frame works when observing its own element</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/resizeTestHelper.js"></script>
+
+<style>
+ #iframe {
+ width: 300px;
+ height: 200px;
+ outline: 1px black solid;
+ }
+</style>
+
+<body>
+
+<iframe id="iframe" src="http://{{hosts[alt][]}}:{{ports[http][0]}}/resize-observer/resources/cross-origin-subframe.html" sandbox="allow-scripts" frameborder="0"></iframe>
+
+<script>
+let borderBoxBlockSize = null;
+let borderBoxInlineSize = null;
+
+function rafPromise() {
+ return new Promise(requestAnimationFrame);
+}
+
+async function setSize(width, height) {
+ iframe.contentWindow.postMessage({
+ msgName: "setSize",
+ width: width,
+ height: height
+ }, "*");
+
+ await rafPromise();
+ await rafPromise();
+ await rafPromise();
+}
+
+promise_setup(() => {
+ // Wait for iframe to be loaded.
+ return new Promise(resolve => {
+ window.addEventListener("message", event => {
+ if (event.data.msgName === "loaded") {
+ // Install a long-lasting event listener, since this listener is one-shot
+ window.addEventListener("message", event => {
+ if (event.data.msgName === "event") {
+ borderBoxBlockSize = event.data.borderBoxBlockSize;
+ borderBoxInlineSize = event.data.borderBoxInlineSize;
+ }
+ });
+
+ resolve();
+ }
+ }, { once: true });
+ });
+});
+
+promise_test(async t => {
+ await setSize("200px", "100px");
+
+ assert_equals(borderBoxInlineSize, 200);
+ assert_equals(borderBoxBlockSize, 100)
+}, "Cross-origin observer responds to explicitly set physical size");
+
+promise_test(async t => {
+ // Initial iframe size is 300x200
+ await setSize("50vw", "50vh");
+ assert_equals(borderBoxInlineSize, 150);
+ assert_equals(borderBoxBlockSize, 100);
+
+ iframe.style.width = "400px";
+ iframe.style.height = "500px";
+ await setSize("50vw", "50vh");
+
+ assert_equals(borderBoxInlineSize, 200);
+ assert_equals(borderBoxBlockSize, 250);
+}, "When size is viewport-dependant, cross-origin observer responds to viewport size changes");
+
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/resize-observer/resources/cross-origin-subframe.html b/testing/web-platform/tests/resize-observer/resources/cross-origin-subframe.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+ <style>
+ #target { background: green; }
+ </style>
+</head>
+
+<body>
+ <p>Cross-origin iframe</p>
+ <div id="target"></div>
+
+ <script>
+ function messageHandler(msg) {
+ if (msg.msgName === "setSize") {
+ target.style.width = msg.width;
+ target.style.height = msg.height;
+ }
+ }
+
+ const observer = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ window.top.postMessage({
+ msgName: "event",
+ borderBoxBlockSize: entry.borderBoxSize[0].blockSize,
+ borderBoxInlineSize: entry.borderBoxSize[0].inlineSize
+ }, "*");
+ }
+ });
+
+ window.addEventListener("load", () => {
+ observer.observe(target);
+ window.addEventListener("message", (event) => messageHandler(event.data));
+
+ window.top.postMessage({ "msgName": "loaded" }, "*");
+ }, { once: true });
+ </script>
+</body>
+
+</html>
