selectedcontent.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/selectedcontent.tentative.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>

<style>

select, select::picker(select) {

  appearance: base-select;

</style>

<form>

  <select>

    <button>

      <selectedcontent></selectedcontent>

    </button>

    <option class=one value=one>

      <span class=one>span</span> one

    </option>

    <option class=two value=two>

      <span class=two>span</span> two

    </option>

  </select>

</form>

<script>

promise_test(async () => {

  const optionOne = document.querySelector('option.one');

  const optionTwo = document.querySelector('option.two');

  const selectedcontent = document.querySelector('selectedcontent');

  const select = document.querySelector('select');

  const spanTwo = document.querySelector('span.two');

  const form = document.querySelector('form');

  const button = document.querySelector('button');

  assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,

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

  select.value = 'two';

  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,

    'The innerHTML of <selectedcontent> should change after the selected option is changed.');

  let oldInnerHTML = optionTwo.innerHTML;

  spanTwo.textContent = 'new span';

  assert_equals(selectedcontent.innerHTML, oldInnerHTML,

    '<selectedcontent> should not respond to <option> text content changes.');

  spanTwo.appendChild(document.createElement('div'));

  assert_equals(selectedcontent.innerHTML, oldInnerHTML,

    '<selectedcontent> should not respond to new elements being added to descendants of <option>.');

  spanTwo.setAttribute('data-foo', 'bar');

  assert_equals(selectedcontent.innerHTML, oldInnerHTML,

    '<selectedcontent> should not respond to attributes being added to descendants of <option>.');

  select.value = select.value;

  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,

    '<selectedcontent> should be updated in response to re-assigning select.value.');

  spanTwo.firstElementChild.remove();

  select.selectedIndex = select.selectedIndex;

  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,

    '<selectedcontent> should be updated in response to re-assigning select.selectedIndex.');

  form.reset();

  assert_equals(select.value, 'one',

    'form.reset() should change the selects value to one.');

  assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,

    'The innerHTML of <selectedcontent> should be updated in response to a form reset.');

  await test_driver.bless();

  select.showPicker();

  await test_driver.click(optionTwo);

  assert_equals(select.value, 'two',

    'Clicking on another option should change select.value.');

  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,

    'Clicking on an option element should update the <selectedcontent>.');

  selectedcontent.remove();

  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,

    'Removing the <selectedcontent> from the <select> should not make it clear its contents.');

  button.appendChild(selectedcontent);

  assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,

    'Re-inserting the <selectedcontent> should make it update its contents.');

  optionTwo.remove();

  assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,

    'The innerHTML of <selectedcontent> should be updated in response to selected <option> removal.');

  optionOne.remove();

  assert_equals(selectedcontent.innerHTML, '',

    'The content of <selectedcontent> should be cleared if there is no selected <option>.');

  // TODO(crbug.com/336844298): Add tests for mutation records during parsing

}, 'The <selectedcontent> element should reflect the HTML contents of the selected <option>.');

</script>

<select id=select2>

  <button>

    <selectedcontent></selectedcontent>

  </button>

  <option class=one>one</option>

  <option class=two>two</option>

  <option class=three>three</option>

</select>

<script>

promise_test(async () => {

  const select = document.getElementById('select2');

  const button = select.querySelector('button');

  const selectedcontent = select.querySelector('selectedcontent');

  assert_equals(selectedcontent.textContent, 'one',

    'selectedcontent should initially be one.');

  const selectedcontent2 = document.createElement('selectedcontent');

  button.appendChild(selectedcontent2);

  select.value = 'two';

  assert_equals(selectedcontent.textContent, 'two',

    'First selectedcontent should be kept up to date.');

  assert_equals(selectedcontent2.textContent, '',

    'Second selectedcontent should not be kept up to date.');

  button.insertBefore(selectedcontent2, selectedcontent);

  select.value = 'one';

  assert_equals(selectedcontent.textContent, '',

    'Second selectedcontent in tree order should be cleared after another is inserted.');

  assert_equals(selectedcontent2.textContent, 'one',

    'First selectedcontent in tree order should be kept up to date.');

  selectedcontent.textContent = 'two';

  selectedcontent.remove();

  assert_equals(selectedcontent.textContent, 'two',

    'selectedcontent should not have its children modified after removal.');

  select.value = 'three';

  assert_equals(selectedcontent2.textContent, 'three',

    'Remaining selectedcontent should be kept up to date.');

  assert_equals(selectedcontent.textContent, 'two',

    'Removed selectedcontent should not be kept up to date.');

  button.insertBefore(selectedcontent, selectedcontent2);

  assert_equals(selectedcontent.textContent, 'three',

    'Inserted selectedcontent should be updated if it is the first in tree order.');

  assert_equals(selectedcontent2.textContent, '',

    'Second selectedcontent in tree order should be cleared when another is inserted.');

  selectedcontent.remove();

  assert_equals(selectedcontent2.textContent, 'three',

    'Remaining selectedcontent should be updated when first in tree order is removed.');

}, 'When there are multiple <selectedcontent> elements, only the one in tree order should be kept up to date.');

promise_test(async () => {

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

  select.innerHTML = '<option>one</option><option>two</option>';

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

  select.appendChild(button);

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

  button.appendChild(selectedcontent);

  assert_equals(selectedcontent.textContent, '',

    '<selectedcontent> should not be updated when appending to a disconnected select.');

  select.value = 'two';

  assert_equals(selectedcontent.textContent, '',

    '<selectedcontent> should not be updated when changing value of a disconnected select.');

  document.body.appendChild(select);

  assert_equals(selectedcontent.textContent, 'two',

    '<selectedcontent> should be updated when <select> is connected to the document.');

}, '<seletedcontent> behavior in disconnected <select>.');

</script>