ptesny/parent.html

## parent.html
<!DOCTYPE html>
<html>
<head>
    <title>iOS background setTimeout test - parent</title>
</head>
<body>

    <h1>Parent</h1>

    <button id="open-popup">Open Popup</button>
    <ol id="info-panel">
    </ol>

    <button id="post-message-local">postMessage locally</button>

    <button id="dummy-button">Dummy Button</button>

    <script type="text/javascript" src="trace.js"></script>
    <script type="text/javascript">
        (function() {
            var i = 0;

            /* doing this as browsers will block opening popups if not initiated by user action */
            document.getElementById('open-popup').addEventListener('click', function() {
                window.open('popup.html', 'test-popup', 'width=400,height=400');
            });

            document.getElementById('dummy-button').addEventListener('click', function() {
                test.log('dummy button pressed');
            });

            document.getElementById('post-message-local').addEventListener('click', function() {
                window.postMessage('test-local-timeout at ' + (new Date()).toLocaleTimeString(), '*');
            });

            window.addEventListener('message', function(e) {
                var delay = 1000;
                var index = ++i;
                var intervalId = 0;
                var intervalCount = 0;

                var messageInfo = "parent setCallback index :" + index + ", for popup message " + e.data + ", using delay " + delay;

                test.log(e);

                test.log('settingTimeout for ' + messageInfo);
                setTimeout(function() {
                    test.log(' in Timeout callback ' + messageInfo);
                }, delay);

                test.log('settingInterval ' + messageInfo);
                intervalId = setInterval(function() {
                    test.log(' in Interval callback with count ' + intervalCount + ', ' + messageInfo);

                    intervalCount++;
                    if (intervalCount > 2) {
                        clearInterval(intervalId);
                    }
                }, delay);
            });
        }());
    </script>
</body>
</html>

## popup.html
<!DOCTYPE html>
<html>
<head>
    <title>iOS background setTimeout test - child</title>
</head>
<body>

    <h1>Child</h1>
    <ol id="info-panel">
    </ol>
    <script type="text/javascript" src="trace.js"></script>
    <script type="text/javascript">
        (function() {
            var delay = 1000;
            test.log('will post mesage in ' + delay + ' milli-seconds');
            setTimeout(function() {
                test.log('posting message');
                window.opener.postMessage('test-parent-timeout at ' + (new Date()).toLocaleTimeString(), '*');
            }, delay);
        }());
    </script>
</body>
</html>

## trace.js
(function() {
    var test = window.test;
    if (typeof test === "undefined") {
        test = {};
    }

    var infoPanel = document.getElementById('info-panel');
    test.log = function(message) {
        var li = document.createElement('li');
        var now = "[ " + (new Date()).toLocaleTimeString() + " ]";
        var logMessage = "";

        li.innerHTML = now + "\t" + message;
        infoPanel.appendChild(li);

        if (typeof message === "string") {
            console.log(now + "\t" + message);
        } else {
            console.log(now);
            console.log(message);
        }
    };

    window.test = test;
}());
(function() {
    test.log('loaded');
}());
	<!DOCTYPE html>
	<html>
	<head>
	<title>iOS background setTimeout test - parent</title>
	</head>
	<body>

	<h1>Parent</h1>

	<button id="open-popup">Open Popup</button>
	<ol id="info-panel">
	</ol>

	<button id="post-message-local">postMessage locally</button>

	<button id="dummy-button">Dummy Button</button>

	<script type="text/javascript" src="trace.js"></script>
	<script type="text/javascript">
	(function() {
	var i = 0;

	/* doing this as browsers will block opening popups if not initiated by user action */
	document.getElementById('open-popup').addEventListener('click', function() {
	window.open('popup.html', 'test-popup', 'width=400,height=400');
	});

	document.getElementById('dummy-button').addEventListener('click', function() {
	test.log('dummy button pressed');
	});

	document.getElementById('post-message-local').addEventListener('click', function() {
	window.postMessage('test-local-timeout at ' + (new Date()).toLocaleTimeString(), '*');
	});

	window.addEventListener('message', function(e) {
	var delay = 1000;
	var index = ++i;
	var intervalId = 0;
	var intervalCount = 0;

	var messageInfo = "parent setCallback index :" + index + ", for popup message " + e.data + ", using delay " + delay;

	test.log(e);

	test.log('settingTimeout for ' + messageInfo);
	setTimeout(function() {
	test.log(' in Timeout callback ' + messageInfo);
	}, delay);

	test.log('settingInterval ' + messageInfo);
	intervalId = setInterval(function() {
	test.log(' in Interval callback with count ' + intervalCount + ', ' + messageInfo);

	intervalCount++;
	if (intervalCount > 2) {
	clearInterval(intervalId);
	}
	}, delay);
	});
	}());
	</script>
	</body>
	</html>
	(function() {
	var test = window.test;
	if (typeof test === "undefined") {
	test = {};
	}

	var infoPanel = document.getElementById('info-panel');
	test.log = function(message) {
	var li = document.createElement('li');
	var now = "[ " + (new Date()).toLocaleTimeString() + " ]";
	var logMessage = "";

	li.innerHTML = now + "\t" + message;
	infoPanel.appendChild(li);

	if (typeof message === "string") {
	console.log(now + "\t" + message);
	} else {
	console.log(now);
	console.log(message);
	}
	};

	window.test = test;
	}());
	(function() {
	test.log('loaded');
	}());