<!DOCTYPE HTML>
<html>
 <head>
  <title>Offline Application Cache</title>
  <link rel="stylesheet" href="../resources/css/result.css">
 </head>
 <body>
  <h1>navigator_online_event</h1>

  <ol>
  <li>Change the 'work offline' mode.</li>
  <li>If actual result and expected result are same, then test is <span class="manualpass">Pass</span>, otherwise <span class="manualfail">Fail</span>.</li>
  </ol>

  <hr>

  <h2>Actual Result</h2>
  <div id="actualResult">
    <span id="actualMsg"></span>
  </div>

  <h2>Expected Result</h2>
  <div id="expectedResult">
    <span id="expectedMsg">apply 'work offline': offline event is raised.<p>release 'work offline': online event is raised.</span>
  </div>
  <script>

  function showOnline(e) {
    let msg = 'online event is raised';
    if (e.target != window)
      msg += ' (on the WRONG target)';
    document.getElementById('actualMsg').innerHTML = msg + '.';
  }

  function showOffline(e) {
    let msg = 'offline event is raised';
    if (e.target != window)
      msg += ' (on the WRONG target)';
    document.getElementById('actualMsg').innerHTML = msg + '.';
  }

  window.addEventListener("online", showOnline, false);
  window.addEventListener("offline", showOffline, false);
  </script>
 </body>
</html>
