insertion-removing-steps-iframe.window.js

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /dom/nodes/insertion-removing-steps/insertion-removing-steps-iframe.window.html - WPT Dashboard Interop Dashboard

// These tests ensure that:

//   1. The HTML element insertion steps for iframes [1] run *after* all DOM

//      insertion mutations associated with any given call to

//      #concept-node-insert [2] (which may insert many elements at once).

//      Consequently, a preceding element's insertion steps can observe the

//      side-effects of later elements being connected to the DOM, but cannot

//      observe the side-effects of the later element's own insertion steps [1],

//      since insertion steps are run in order after all DOM insertion mutations

//      are complete.

//   2. The HTML element removing steps for iframes [3] *do not* synchronously

//      run script during child navigable destruction. Therefore, script cannot

//      observe the state of the DOM in the middle of iframe removal, even when

//      multiple iframes are being removed in the same task. Iframe removal,

//      from the perspective of the parent's DOM tree, is atomic.

//

// [1]: https://html.spec.whatwg.org/C#the-iframe-element:html-element-insertion-steps

// [2]: https://dom.spec.whatwg.org/#concept-node-insert

// [3]: https://html.spec.whatwg.org/C#the-iframe-element:html-element-removing-steps

promise_test(async t => {

  const fragment = new DocumentFragment();

  const iframe1 = fragment.appendChild(document.createElement('iframe'));

  const iframe2 = fragment.appendChild(document.createElement('iframe'));

  t.add_cleanup(() => {

    iframe1.remove();

    iframe2.remove();

});

  let iframe1Loaded = false, iframe2Loaded = false;

  iframe1.onload = e => {

    // iframe1 assertions:

    iframe1Loaded = true;

    assert_equals(window.frames.length, 1,

        "iframe1 load event can observe its own participation in the frame " +

        "tree");

    assert_equals(iframe1.contentWindow, window.frames[0]);

    // iframe2 assertions:

    assert_false(iframe2Loaded,

        "iframe2's load event hasn't fired before iframe1's");

    assert_true(iframe2.isConnected,

        "iframe1 can observe that iframe2 is connected to the DOM...");

    assert_equals(iframe2.contentWindow, null,

        "... but iframe1 cannot observe iframe2's contentWindow because " +

        "iframe2's insertion steps have not been run yet");

};

  iframe2.onload = e => {

    iframe2Loaded = true;

    assert_equals(window.frames.length, 2,

        "iframe2 load event can observe its own participation in the frame tree");

    assert_equals(iframe1.contentWindow, window.frames[0]);

    assert_equals(iframe2.contentWindow, window.frames[1]);

};

  // Synchronously consecutively adds both `iframe1` and `iframe2` to the DOM,

  // invoking their insertion steps (and thus firing each of their `load`

  // events) in order. `iframe1` will be able to observe itself in the DOM but

  // not `iframe2`, and `iframe2` will be able to observe both itself and

  // `iframe1`.

  document.body.append(fragment);

  assert_true(iframe1Loaded, "iframe1 loaded");

  assert_true(iframe2Loaded, "iframe2 loaded");

}, "Insertion steps: load event fires synchronously *after* iframe DOM " +

   "insertion, as part of the iframe element's insertion steps");

// There are several versions of the removal variant, since there are several

// ways to remove multiple elements "at once". For example:

//   1. `node.innerHTML = ''` ultimately runs

//      https://dom.spec.whatwg.org/#concept-node-replace-all which removes all

//      of a node's children.

//   2. `node.replaceChildren()` which follows roughly the same path above.

//   3. `node.remove()` on a parent of many children will invoke not the DOM

//      remove algorithm, but rather the "removing steps" hook [1], for each

//      child.

//

// [1]: https://dom.spec.whatwg.org/#concept-node-remove-ext

function runRemovalTest(removal_method) {

  promise_test(async t => {

    const div = document.createElement('div');

    const iframe1 = div.appendChild(document.createElement('iframe'));

    const iframe2 = div.appendChild(document.createElement('iframe'));

    document.body.append(div);

    // Now that both iframes have been inserted into the DOM, we'll set up a

    // MutationObserver that we'll use to ensure that multiple synchronous

    // mutations (removals) are only observed atomically at the end. Specifically,

    // the observer's callback is not invoked synchronously for each removal.

    let observerCallbackInvoked = false;

    const removalObserver = new MutationObserver(mutations => {

      assert_false(observerCallbackInvoked,

          "MO callback is only invoked once, not multiple times, i.e., for " +

          "each removal");

      observerCallbackInvoked = true;

      assert_equals(mutations.length, 1, "Exactly one MutationRecord is recorded");

      assert_equals(mutations[0].removedNodes.length, 2);

      assert_equals(window.frames.length, 0,

          "No iframe Windows exist when the MO callback is run");

      assert_equals(document.querySelector('iframe'), null,

          "No iframe elements are connected to the DOM when the MO callback is " +

          "run");

});

    removalObserver.observe(div, {childList: true});

    t.add_cleanup(() => removalObserver.disconnect());

    let iframe1UnloadFired = false, iframe2UnloadFired = false;

    let iframe1PagehideFired = false, iframe2PagehideFired = false;

    iframe1.contentWindow.addEventListener('pagehide', e => {

      assert_false(iframe1UnloadFired, "iframe1 pagehide fires before unload");

      iframe1PagehideFired = true;

});

    iframe2.contentWindow.addEventListener('pagehide', e => {

      assert_false(iframe2UnloadFired, "iframe2 pagehide fires before unload");

      iframe2PagehideFired = true;

});

    iframe1.contentWindow.addEventListener('unload', e => iframe1UnloadFired = true);

    iframe2.contentWindow.addEventListener('unload', e => iframe2UnloadFired = true);

    // Each `removal_method` will trigger the synchronous removal of each of

    // `div`'s (iframe) children. This will synchronously, consecutively

    // invoke HTML's "destroy a child navigable" (per [1]), for each iframe.

//

    // [1]: https://html.spec.whatwg.org/C#the-iframe-element:destroy-a-child-navigable

    if (removal_method === 'replaceChildren') {

      div.replaceChildren();

    } else if (removal_method === 'remove') {

      div.remove();

    } else if (removal_method === 'innerHTML') {

      div.innerHTML = '';

    assert_false(iframe1PagehideFired, "iframe1 pagehide did not fire");

    assert_false(iframe2PagehideFired, "iframe2 pagehide did not fire");

    assert_false(iframe1UnloadFired, "iframe1 unload did not fire");

    assert_false(iframe2UnloadFired, "iframe2 unload did not fire");

    assert_false(observerCallbackInvoked,

        "MO callback is not invoked synchronously after removals");

    // Wait one microtask.

    await Promise.resolve();

    if (removal_method !== 'remove') {

      assert_true(observerCallbackInvoked,

          "MO callback is invoked asynchronously after removals");

  }, `Removing steps (${removal_method}): script does not run synchronously during iframe destruction`);

runRemovalTest('innerHTML');

runRemovalTest('replaceChildren');

runRemovalTest('remove');