<!DOCTYPE html>
<html>
<head>
  <script>
    function print(text) {
      var p = document.createElement('p');
      p.textContent = text;
      document.body.appendChild(p);
    }
  </script>
</head>

<body style="background-color: rgb(255, 255, 255);">
  <!--
    For details of the options for loading for scripts, see Prepare() in
    html_script_element.cc, and paragraph 15 in the spec:
      https://www.w3.org/TR/html5/scripting-1.html#prepare-a-script
  -->

  <!-- Option 5: Otherwise(inline script). -->
  <script>
    var i = 1;
    print('i = ' + i);
  </script>

  <!-- Option 5: The element has a src attribute. -->
  <script async src='increment-and-print-i.js'></script>

  <!--
    Option 2: The element has a src attribute, and the element has been flagged
    as "parser-inserted", and the element does not have an async attribute.
  -->
  <script src='increment-and-print-i.js'></script>

  <!-- Option 6: Otherwise(inline script). -->
  <script>
    // Option 4
    // The element has a src attribute, does not have an async attribute, and
    // does not have the "force-async" flag set.
    a = document.createElement('script');
    a.src = 'increment-and-print-i.js';
    a.async = false;
    document.body.appendChild(a);

    // Option 5
    // The element has a src attribute.
    a = document.createElement('script');
    a.src = 'increment-and-print-i.js';
    a.async = true;
    document.body.appendChild(a);

    print('i = ' + i);
  </script>
</body>

</html>