<!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>