selectedcontent-restore.optional.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/selectedcontent-restore.optional.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<link rel=author href="mailto:jarhar@chromium.org">

<link rel=help href="https://github.com/whatwg/html/issues/9799">

<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>

<!-- This test is marked optional because form control restoration is not explicitly specified. -->

<iframe id=iframe1 src="resources/selectedcontent-restore-iframe.html"></iframe>

<iframe id=iframe2 src="resources/selectedcontent-input.html"></iframe>

<script>

const iframe1 = document.getElementById('iframe1');

const iframe2 = document.getElementById('iframe2');

const iframe1load = new Promise(resolve => iframe1.onload = resolve);

const iframe2load = new Promise(resolve => iframe2.onload = resolve);

promise_test(async () => {

  await iframe1load;

  await test_driver.bless();

  iframe1.contentDocument.querySelector('select').value = 'two';

  assert_equals(iframe1.contentDocument.querySelector('select').value, 'two',

    'Assigning two to select.value should work.');

  iframe1.contentDocument.querySelector('form').submit();

  await new Promise(resolve => iframe1.onload = resolve);

  await test_driver.bless();

  iframe1.contentWindow.history.back();

  // Form controls are restored immediately after the load event is fired, so

  // one rAF is added after awaiting the load event. See

  // LocalDOMWindow::DispatchLoadAndPageshowEvents.

  await new Promise(resolve => iframe1.onload = resolve);

  await new Promise(requestAnimationFrame);

  assert_equals(iframe1.contentDocument.querySelector('select').value, 'two',

    'The selects value should be restored after navigating back.');

  assert_equals(iframe1.contentDocument.querySelector('selectedcontent').innerHTML,

    iframe1.contentDocument.querySelector('option[value=two]').innerHTML,

    'selectedcontent.innerHTML should match the selected <option>');

}, '<selectedcontent> should be up to date after form restoration.');

promise_test(async () => {

  await iframe2load;

  await test_driver.bless();

  iframe2.contentDocument.querySelector('select').value = 'two';

  iframe2.contentWindow.createInput();

  iframe2.contentDocument.querySelector('input').value = 'value';

  iframe2.contentDocument.querySelector('form').submit();

  await new Promise(resolve => iframe2.onload = resolve);

  await test_driver.bless();

  iframe2.contentWindow.history.back();

  // Form controls are restored immediately after the load event is fired, so

  // one rAF is added after awaiting the load event. See

  // LocalDOMWindow::DispatchLoadAndPageshowEvents.

  await new Promise(resolve => iframe2.onload = resolve);

  await new Promise(requestAnimationFrame);

  // A crash would happen here because the form restoration code would iterate

  // over all of the form controls and remove an input element to restore during

  // restoration of the selectedcontent element, then try to restore the

  // disconnected input.

  assert_equals(iframe2.contentDocument.querySelector('select').value, 'two',

    'The selects value should be restored after navigating back.');

  assert_equals(iframe2.contentDocument.querySelector('selectedcontent').innerHTML,

    iframe2.contentDocument.getElementById('two').innerHTML,

    'selectedcontent.innerHTML should match the selected <option>');

  assert_equals(iframe2.contentWindow.input.value, '',

    'The text inputs value should not be restored because it was removed before restoring.');

}, '<input> inside <selectedcontent> should be restored after form submission.');

</script>