empty-elements-insertion-padding.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /editing/other/empty-elements-insertion-padding.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<meta charset=utf-8>

<title>Placing selection and typing inside an empty element styled with padding</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>

  #padding {

    display: inline-block;

    padding: 1em;

</style>

<div contenteditable></div>

<script>

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

  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' );

</script>