empty-elements-insertion.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/external/wpt/editing/other/empty-elements-insertion.html
