<!DOCTYPE html>
<html>
<body>
<h1>random</h1>
<script src="./random-cached.cgi"></script>
<script>
const lastRandomNumberKey = "lastRandomNumber";

window.addEventListener("message", e => {
  if (e.data != "START") {
    window.opener.postMessage("FAIL: unknown; " + e.data, location.origin);
  } else {
    // window.top.randomNumber should be set by random-cached.cgi.
    if (window.top === undefined || window.top.randomNumber === undefined) {
      window.opener.postMessage("FAIL: randomNumber isn't defined",
                                location.origin);
      return;
    }

    // If location.reload() is already triggered, lastRandomNumberKey should be
    // stored in the sessionStorage. Otherwise, this is the first load.
    const lastRandomNumberString = sessionStorage.getItem(lastRandomNumberKey);
    if (lastRandomNumberString !== null) {
      // sessionStorage returns DOMString and need to be converted to Number.
      const lastRandomNumber = Number(lastRandomNumberString);

      // Because the random-cached.cgi is a sub-resource, and set HTTP headers
      // to allow caching, location.reload() should follow the cache-protocol to
      // reuse the cached resource. That is to say the randomNumber should not
      // be changed on the reload.
      window.opener.postMessage(lastRandomNumber == top.randomNumber
                                    ? "PASS"
                                    : "FAIL: randomNumber was changed",
                                location.origin);
    } else {
      // Store the first randomNumber to the sessionStorage, and call reload().
      // This window will send "READY" again, then receive "START".
      sessionStorage.setItem(lastRandomNumberKey, top.randomNumber);
      location.reload();
    }
  }
}, false);

// Send "READY" message first so that parent window can ensure to send messages.
window.opener.postMessage("READY", location.origin);
</script>
</body>
</html>