chromium_src/chrome/test/data/actor/page_stability.html · OpenHarmony-TPC/chromium_src - AtomGit

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <title>Page Stability Tests</title>
    <script>
      onload = () => {
        // Note: this file doesn't exist. Tests intercept and manually provide a
        // response. This must match kFetchPath in
        // page_stability_browsertest.cc.
        const fetch_path = '/fetchtarget.html';

        const fetch_button = document.getElementById('btnFetch');
        const fetch_and_work_button = document.getElementById('btnFetchAndWork');
        const work_forever_button = document.getElementById('btnWorkForever');
        const paint_button = document.getElementById('btnPaint');
        const output = document.getElementById('output');

        window.doFetch = function(afterFetch) {
          window.fetch(fetch_path)
              .then((res) => {
                if (!res.ok) {
                  output.innerText = `FAILED: ${res.status}`;
                } else {
                  res.text().then((str) => {
                    output.innerText = str;
                    afterFetch();
                  });
                }
              })
              .catch(error => { output.innerText = error; });
        }

        window.doBusyWork = function(tasks_to_run = 3, task_duration_ms = 300) {
          // Use 0 delay to keep the main thread busy.
          const task_delay_ms = 0;

          let task = (num_tasks) => {
            start_time = performance.now();
            while(performance.now() - start_time < task_duration_ms) {
              // spin
            }
            num_tasks--;
            if (num_tasks > 0) {
              setTimeout(() => task(num_tasks), task_delay_ms)
            } else {
              output.innerText = "WORK DONE";
            }
          }

          setTimeout(() => task(tasks_to_run), task_delay_ms);
        }

        // This button performs a fetch
        fetch_button.onclick = () => doFetch(() => {});

        // This button performs a fetch but then follows it up by multiple long
        // running tasks.
        fetch_and_work_button.onclick = () => doFetch(doBusyWork);

        // This button endlessly queues more work. Used to test timeouts.
        work_forever_button.onclick = () => {
          doBusyWork(10000);
        };

        let paint_count = 0;
        paint_button.onclick = () => {
          paint_count++;
          output.innerText = 'PAINT ' + paint_count;
        };

        // Add a handler for new same-document navigations. This will cause a
        // fetch.
        window.navigation.addEventListener('navigate', (e) => {
          if (!e.hashChange) {
            return;
          }

          const hash = e.destination.url.split('#').slice(-1);
          if (hash.length == 0) {
            console.log("Unexpected URL: ", e.destination.url);
            return;
          }

          if (hash[0] === 'fetch') {
            doFetch(() => {})
          } else {
            console.log("Unexpected fragment: ", hash[0]);
          }
        });
      }
    </script>
  </head>
  <body>
    <button id="btnFetch">Fetch</button>
    <button id="btnFetchAndWork">Fetch and Work</button>
    <button id="btnWorkForever">Work Forever</button>
    <button id="btnPaint">Paint</button>
    <p id="output">INITIAL</p>
  </body>
</html>