tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

task-attribution-link-load.html (2868B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8" />
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <script src="/resources/testdriver.js"></script>
      6 <script src="/resources/testdriver-vendor.js"></script>
      7 <script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script>
      8 
      9 <button id="navigateButton">Click here!</button>
     10 <div id="content"></div>
     11 
     12 <script>
     13  // The resources are relative to the directory of the initial url.
     14  const RESOURCE_PATH = document.location.href.substring(
     15      0, document.location.href.lastIndexOf('/') + 1);
     16 
     17  async function runTest(t, softNavUrl, styleUrl, mode) {
     18    navigateButton.addEventListener('click', async () => {
     19      // Eagarly update the URL, but don't update the DOM until the stylesheet
     20      // has been loaded.
     21      history.pushState({}, '', softNavUrl);
     22 
     23      // Step 3: modify the DOM.
     24      const updateUI = () => {
     25        content.innerHTML = '<div class="large">Hello World</div>';
     26      };
     27 
     28      // Step 2: optionally insert a style link and wait for the load handler.
     29      const maybeAddStyleLink = () => {
     30        if (mode !== 'style' && mode !== 'both') {
     31          updateUI();
     32          return;
     33        }
     34        // Add the style needed for the soft nav.
     35        const link = document.createElement('link');
     36        link.href = RESOURCE_PATH + styleUrl;
     37        link.rel = 'stylesheet';
     38        link.type = 'text/css';
     39        link.addEventListener('load', updateUI, {once: true});
     40        document.head.appendChild(link);
     41      };
     42 
     43      // Step 1: optionally preload a style link and wait for the load handler.
     44      if (mode === 'preload' || mode === 'both') {
     45        const link = document.createElement('link');
     46        link.href = RESOURCE_PATH + styleUrl;
     47        link.rel = 'preload';
     48        link.as = 'style';
     49        link.addEventListener('load', maybeAddStyleLink, {once: true});
     50        document.head.appendChild(link);
     51      } else {
     52        maybeAddStyleLink();
     53      }
     54    }, {once: true});
     55 
     56    const softNavPromise =
     57        SoftNavigationTestHelper.getPerformanceEntries('soft-navigation');
     58 
     59    if (test_driver) {
     60      test_driver.click(navigateButton);
     61    }
     62 
     63    const helper = new SoftNavigationTestHelper(t);
     64    const entries = await helper.withTimeoutMessage(
     65        softNavPromise, 'Soft navigation entry never arrived.', 3000);
     66    assert_equals(entries.length, 1, 'Expected exactly one soft navigation.');
     67    assert_true(
     68        entries[0].name.endsWith(softNavUrl), 'Unexpected Soft Navigation URL.');
     69  }
     70 
     71  promise_test(async t => {
     72    const softNavUrl = '/page-2';
     73    const styleUrl = 'resources/x-large-text.css';
     74    return runTest(t, softNavUrl, styleUrl, /*mode=*/'both');
     75  }, 'Soft Navigation Detection supports propagating through both preload and style link load events');
     76 </script>