text-node-modification-does-not-affect-siblings.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /soft-navigation-heuristics/icp/tentative/text-node-modification-does-not-affect-siblings.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8" />

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script>

<button id="testButton">Click here!</button>

<div id="outer">

  Plain text

  <div id="misc">More text in this child div</div>

  <div id="inner"></div>

  <h1 id="heading">This is a large heading and should be the LCP element, but not the ICP element</h1>

</div>

<script>

  promise_test(async t => {

    // This directly modifies a text node that aggregates up to a <div> with larger

    // (block) children. This also causes a layout shift, which might cause the

    // <h1> to be repainted depending on the UA's rendering implementation.

    // Modifying the text should cause the repaint of the <div> (aggregating node)

    // to be tracked, but the modification should not propagate to the the text node's

    // siblings, e.g. the <h1>.

    testButton.addEventListener('click', async () => {

      outer.childNodes[0].textContent =

          'This is new text that will aggregate up to "outer"';

      inner.innerText = 'layout shift';

    }, {once: true});

    const helper = new SoftNavigationTestHelper(t);

    const icpPromise = helper.waitForIcp();

    if (test_driver) {

      test_driver.click(testButton);

    const icps = await icpPromise;

    assert_equals(icps.length, 1, 'Expected exactly one ICP entry');

    assert_equals(

        icps[0].largestContentfulPaint.id, 'outer',

        'Expected the LCP element to be "outer"');

  }, 'InteractionContentfulPaint does not over-attribute to siblings of modified text nodes');

</script>