Blitz - WPT: text-overflow-ellipsis-textarea-with-caret.html

wpt / css / css-overflow / text-overflow-ellipsis-textarea-with-caret.html

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

<!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;
    caret-color: transparent;
  }
</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>

/css/css-overflow/reference/text-overflow-ellipsis-textarea-with-caret-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Reference for text-overflow ellipsis in textarea with caret selection</title>
<style>
  #textarea {
    font: 20px/1;
    width: 100px;
    height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    margin: 10px;
    resize: none;
    outline: none;
    border: none;
    caret-color: transparent;
  }
</style>
<textarea id="textarea">This is a very long text that should be clipped</textarea>
<script>
  // Focus the textarea and place caret at the same position as test
  const textarea = document.getElementById('textarea');
  textarea.focus();
  textarea.setSelectionRange(10, 10);
</script>