rendering-exercise.html | Explore in Territory

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href='rendering-exercise.css'>
    <script>
      let intersectionCallback = () => ({});
      let blockingHandlerCallback = () => ({});
      let imageLoadedCallback = () => ({});
      window.__intersectionPromise = new Promise(res => intersectionCallback = res);
      window.__blockingHandlerPromise = new Promise(res => blockingHandlerCallback = res);
      window.__imageLoadedPromise = new Promise(res => imageLoadedCallback = res);

      function something() {
        const startTime = performance.now();
        while (performance.now() - startTime < 200);
        blockingHandlerCallback()
      }
      function executeSomething() {
        addIntersectionObserver();
        something();
      }
      function addIntersectionObserver() {
        const target = document.querySelector('img');
        const observer = new IntersectionObserver(intersectionCallback);
        observer.observe(target);
      }
      </script>
  </head>
  <body onscroll="executeSomething()">
    <img src="./big-image.png" onload="imageLoadedCallback()">
    <p>
    This is a text that will be animated when the page loads.
    </p>
  </body>
</html>

chromium/third_party/blink/web_tests/http/tests/inspector-protocol/resources/rendering-exercise.html