cefalse-on-boundaries.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /selection/contenteditable/cefalse-on-boundaries.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<meta charset=utf-8>

<title>Selection of contenteditable=false at the beginning and end of contenteditable element</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div contenteditable id="host">

  <div contenteditable="false" id="beginning">&nbsp;</div>

  <p id="paragraph">Lorem ipsum dolor sit amet.</p>

  <div contenteditable="false" id="end">&nbsp;</div>

</div>

<script>

test( () => {

  const range = document.createRange();

  range.setStartBefore( beginning );

  range.setEndAfter( paragraph );

  getSelection().removeAllRanges();

  getSelection().addRange( range );

  const selectedRange = getSelection().getRangeAt( 0 );

  assert_equals( selectedRange.startContainer, host );

  assert_equals( selectedRange.startOffset, 1 );

  assert_equals( selectedRange.endContainer, host );

  assert_equals( selectedRange.endOffset, 4 );

}, 'Selection can start on cE=false element at the beginning of the cE=true element' );

test( () => {

  const range = document.createRange();

  range.setStartBefore( paragraph );

  range.setEndAfter( end );

  getSelection().removeAllRanges();

  getSelection().addRange( range );

  const selectedRange = getSelection().getRangeAt( 0 );

  assert_equals( selectedRange.startContainer, host );

  assert_equals( selectedRange.startOffset, 3 );

  assert_equals( selectedRange.endContainer, host );

  assert_equals( selectedRange.endOffset, 6 );

}, 'Selection can end on cE=false element at the end of the cE=true element' );

test( () => {

  const range = document.createRange();

  range.setStartBefore( beginning );

  range.setEndAfter( end );

  getSelection().removeAllRanges();

  getSelection().addRange( range );

  const selectedRange = getSelection().getRangeAt( 0 );

  assert_equals( selectedRange.startContainer, host );

  assert_equals( selectedRange.startOffset, 1 );

  assert_equals( selectedRange.endContainer, host );

  assert_equals( selectedRange.endOffset, 6 );

}, 'Selection can start and end on cE=false elements at the boundaries of cE=true element' );

test( () => {

  const range = document.createRange();

  range.selectNodeContents( host );

  const selectedRange = getSelection().getRangeAt( 0 );

  assert_equals( selectedRange.startContainer, host );

  assert_equals( selectedRange.startOffset, 1 );

  assert_equals( selectedRange.endContainer, host );

  assert_equals( selectedRange.endOffset, 6 );

}, 'Range#selectNodeContents() correctly select contents of cE=true element with cE=false elements on boundaries' );

</script>