<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.5" />
    <style type="text/css">
      body {
        margin: 0;
        /* background contains one extra transparent.gif because we want trick the
      contentful paint detection; We want to make sure the background is loaded
      before the test starts so we always wait for the contentful paint timestamp
      to exist, however, gradient isn't considered as contentful per spec, so Gecko
      wouldn't generate a timestamp for it. Hence, we added a transparent gif
      to the image list to trick the detection. */
        background: url("/assets/www/transparent.gif"),
          linear-gradient(135deg, red, white);
      }

      #one {
        background-color: red;
        width: 200vw;
        height: 33vh;
      }

      #two {
        background-color: green;
        width: 200vw;
        height: 33vh;
      }

      #three {
        background-color: blue;
        width: 200vw;
        height: 33vh;
      }

      #four {
        background-color: purple;
        width: 200vw;
        height: 200vh;
      }
    </style>
  </head>
  <body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <script>
      document.getElementById("two").addEventListener("touchstart", e => {
        console.log("preventing default");
        e.preventDefault();
      });

      document.getElementById("three").addEventListener("touchstart", e => {
        console.log("not preventing default");
      });
    </script>
  </body>
</html>
