support dimension bindings in cross-origin mode (#2989)

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -586,7 +586,7 @@ export default class ElementWrapper extends Wrapper {
 					);
 
 					block.chunks.destroy.push(
-						b`${resize_listener}.cancel();`
+						b`${resize_listener}();`
 					);
 				} else {
 					block.event_listeners.push(

src/runtime/internal/dom.ts

@@ -57,7 +57,7 @@ export function empty() {
 	return text('');
 }
 
-export function listen(node: Node, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions) {
+export function listen(node: EventTarget, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions) {
 	node.addEventListener(event, handler, options);
 	return () => node.removeEventListener(event, handler, options);
 }
@@ -234,37 +234,61 @@ export function select_multiple_value(select) {
 	return [].map.call(select.querySelectorAll(':checked'), option => option.__value);
 }
 
-export function add_resize_listener(element, fn) {
+// unfortunately this can't be a constant as that wouldn't be tree-shakeable
-	if (getComputedStyle(element).position === 'static') {
+// so we cache the result instead
-		element.style.position = 'relative';
+let crossorigin: boolean;
+
+export function is_crossorigin() {
+	if (crossorigin === undefined) {
+		crossorigin = false;
+
+		try {
+			if (typeof window !== 'undefined' && window.parent) {
+				void window.parent.document;
+			}
+		} catch (error) {
+			crossorigin = true;
+		}
 	}
 
-	const object = document.createElement('object');
+	return crossorigin;
-	object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
+}
-	object.setAttribute('aria-hidden', 'true');
-	object.type = 'text/html';
-	object.tabIndex = -1;
 
-	let win;
+export function add_resize_listener(node: HTMLElement, fn: () => void) {
+	const computed_style = getComputedStyle(node);
+	const z_index = (parseInt(computed_style.zIndex) || 0) - 1;
 
-	object.onload = () => {
+	if (computed_style.position === 'static') {
-		win = object.contentDocument.defaultView;
+		node.style.position = 'relative';
-		win.addEventListener('resize', fn);
+	}
-	};
 
-	if (/Trident/.test(navigator.userAgent)) {
+	const iframe = element('iframe');
-		element.appendChild(object);
+	iframe.setAttribute('style',
-		object.data = 'about:blank';
+		`display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ` +
+		`overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: ${z_index};`
+	);
+	iframe.setAttribute('aria-hidden', 'true');
+	iframe.tabIndex = -1;
+
+	let unsubscribe: () => void;
+
+	if (is_crossorigin()) {
+		iframe.src = `data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>`;
+		unsubscribe = listen(window, 'message', (event: MessageEvent) => {
+			if (event.source === iframe.contentWindow) fn();
+		});
 	} else {
-		object.data = 'about:blank';
+		iframe.src = 'about:blank';
-		element.appendChild(object);
+		iframe.onload = () => {
+			unsubscribe = listen(iframe.contentWindow, 'resize', fn);
+		};
 	}
 
-	return {
+	append(node, iframe);
-		cancel: () => {
+
-			win && win.removeEventListener && win.removeEventListener('resize', fn);
+	return () => {
-			element.removeChild(object);
+		detach(iframe);
-		}
+		if (unsubscribe) unsubscribe();
 	};
 }
 

test/js/samples/bind-width-height/expected.js

@@ -30,7 +30,7 @@ function create_fragment(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
-			div_resize_listener.cancel();
+			div_resize_listener();
 		}
 	};
 }

test/js/samples/video-bindings/expected.js

@@ -59,7 +59,7 @@ function create_fragment(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(video);
-			video_resize_listener.cancel();
+			video_resize_listener();
 			run_all(dispose);
 		}
 	};

test/runtime/samples/binding-width-height-a11y/_config.js

@@ -1,8 +1,8 @@
 export default {
 	async test({ assert, target }) {
-		const object = target.querySelector('object');
+		const iframe = target.querySelector('iframe');
 
-		assert.equal(object.getAttribute('aria-hidden'), "true");
+		assert.equal(iframe.getAttribute('aria-hidden'), "true");
-		assert.equal(object.getAttribute('tabindex'), "-1");
+		assert.equal(iframe.getAttribute('tabindex'), "-1");
 	}
 };