blob: 5b6ecf9d8af1685a2efa5fe32e3827091bb36fa0 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
color : yellow;
font-size: 20px;
left: 0px;
top: 0px;
position: absolute;
transition: background-color .25s;
transition-timing-function: ease;
}
.box1{
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 20px;
left: 0px;
top: 0px;
position:absolute;
transition: background-color .25s;
transition-timing-function: ease;
}
</style>
</head>
<body style="background-color: #1f52a5;">
<div class="box" id="box">Sample</div>
<div id="immediately" style="display:block;">
THIS SHOWS IMMEDIATELY
</div>
<div id="beforeUnload" style="display:none;">
THIS SHOWS AT BEFOREUNLOAD
</div>
<div id="transitionEnd" style="display:none;">
THIS SHOWS AT TRANSITIONEND
</div>
<script>
console.log('Running the script in beforeunload.html');
function updateTransition() {
var el = document.getElementById("box");
if (el.className == "box") {
el.className = "box1";
} else {
el.className = "box";
}
}
function transitionEndFunction() {
console.log("transitionend event");
// Set this to true to simulate an unresponsive splash screen which does
// not call window.close().
var unresponsive = true;
// This style change is only shown if unresponsive.
document.getElementById("transitionEnd").style.display="block";
// Comment this out to test out an unresponsive
// window.ontransitionend function.
if (!unresponsive) {
window.close();
}
}
// Either event handler or event listeners should work.
window.ontransitionend = transitionEndFunction;
//window.addEventListener("transitionend", transitionEndFunction, true);
function beforeUnloadFunction() {
console.log("beforeunload event");
document.getElementById("immediately").style.display="none";
document.getElementById("beforeUnload").style.display="block";
window.updateTransition();
// Returning a string shows a confirmation dialog in Chrome.
return "returning text is futile";
};
// Either event handler or event listeners should work.
// window.onbeforeunload = beforeUnloadFunction;
window.addEventListener("beforeunload", beforeUnloadFunction, true);
console.log("Ran the script in beforeunload.html");
</script>
</body>
</html>