text-overflow-ellipsis-textarea-with-caret.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/text-overflow-ellipsis-textarea-with-caret.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Overflow: text-overflow ellipsis in textarea with caret selection</title>

<link rel="help" href="https://drafts.csswg.org/css-overflow/#ellipsis-interaction">

<link rel="match" href="reference/text-overflow-ellipsis-textarea-with-caret-ref.html">

<meta name="assert" content="Check that text-overflow ellipsis behavior changes when caret selection is present in textarea element.">

<style>

  #textarea {

    font: 20px/1;

    width: 100px;

    height: 25px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    margin: 10px;

    resize: none;

    outline: none;

    border: none;

</style>

<textarea id="textarea">This is a very long text that should be clipped</textarea>

<script>

  // Focus the textarea and place caret

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

  textarea.focus();

  textarea.setSelectionRange(10, 10);

</script>