empty-elements-insertion.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 6 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /editing/other/empty-elements-insertion.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<meta charset=utf-8>

<title>Placing selection and typing inside empty elements</title>

<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="/resources/testdriver-actions.js"></script>

<script src="../include/editor-test-utils.js"></script>

<style>

  #border {

    display: inline-block;

    border: 2px red solid;

  #padding {

    display: inline-block;

    padding: 1em;

  #unstyled-before::before,

  #unstyled-after::after,

  #unstyled-both::before,

  #unstyled-both::after {

    content: '';

    display: inline-block;

    border: 2px red solid;

</style>

<div contenteditable></div>

<script>

  const utils = new EditorTestUtils( document.querySelector( 'div[contenteditable]' ) );

  promise_test( async () => {

    utils.setupEditingHost( `<p><strong id="border"></strong></p>` );

    const target = document.querySelector( '#border' );

    const actions = new test_driver.Actions();

    await actions

      .pointerMove( 0, 0, { origin: target } )

      .pointerDown( { button: actions.ButtonType.LEFT } )

      .pointerUp( { button: actions.ButtonType.LEFT } )

      .send();

    document.execCommand( 'insertText', false, 'a' );

    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the styled <strong> element' );

  }, 'Insert text into the inline element styled with border' );

  promise_test( async () => {

    utils.setupEditingHost( `<p><strong id="padding"></strong></p>` );

    const target = document.querySelector( '#padding' );

    const actions = new test_driver.Actions();

    await actions

      .pointerMove( 0, 0, { origin: target } )

      .pointerDown( { button: actions.ButtonType.LEFT } )

      .pointerUp( { button: actions.ButtonType.LEFT } )

      .send();

    document.execCommand( 'insertText', false, 'a' );

    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the styled <strong> element' );

  }, 'Insert text into the inline element styled with padding' );

  promise_test( async () => {

    utils.setupEditingHost( `<p><strong id="unstyled"></strong></p>` );

    const target = document.querySelector( '#unstyled' );

    const actions = new test_driver.Actions();

    await actions

      .pointerMove( 0, 0, { origin: target } )

      .pointerDown( { button: actions.ButtonType.LEFT } )

      .pointerUp( { button: actions.ButtonType.LEFT } )

      .send();

    document.execCommand( 'insertText', false, 'a' );

    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the unstyled <strong> element' );

  }, 'Insert text into the unstyled inline element' );

  promise_test( async () => {

    utils.setupEditingHost( `<p><strong id="unstyled-before"></strong></p>` );

    const target = document.querySelector( '#unstyled-before' );

    const actions = new test_driver.Actions();

    await actions

      .pointerMove( 0, 0, { origin: target } )

      .pointerDown( { button: actions.ButtonType.LEFT } )

      .pointerUp( { button: actions.ButtonType.LEFT } )

      .send();

    document.execCommand( 'insertText', false, 'a' );

    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the <strong> element' );

  }, 'Insert text into the unstyled inline element with the styled ::before pseudoelement' );

  promise_test( async () => {

    utils.setupEditingHost( `<p><strong id="unstyled-after"></strong></p>` );

    const target = document.querySelector( '#unstyled-after' );

    const actions = new test_driver.Actions();

    await actions

      .pointerMove( 0, 0, { origin: target } )

      .pointerDown( { button: actions.ButtonType.LEFT } )

      .pointerUp( { button: actions.ButtonType.LEFT } )

      .send();

    document.execCommand( 'insertText', false, 'a' );

    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the <strong> element' );

  }, 'Insert text into the unstyled inline element with the styled ::after pseudoelement' );

  promise_test( async () => {

    utils.setupEditingHost( `<p><strong id="unstyled-both"></strong></p>` );

    const target = document.querySelector( '#unstyled-both' );

    const actions = new test_driver.Actions();

    await actions

      .pointerMove( 0, 0, { origin: target } )

      .pointerDown( { button: actions.ButtonType.LEFT } )

      .pointerUp( { button: actions.ButtonType.LEFT } )

      .send();

    document.execCommand( 'insertText', false, 'a' );

    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the <strong> element' );

  }, 'Insert text into the unstyled inline element with the styled ::before and ::after pseudoelements' );

</script>