Clarify how `selection.modify()` when the granularity parameter is `paragraphboundary` handles non-editable elements in an editing host

[zp1996]

The specification doesn't define the behavior of seleciton.modify() when the granularity parameter is paragraphboundary.

Consider this test case

<div contenteditable id="container">
  this <a contenteditable="false">link</a> after
</div>

<p>1. Make the selection like "this link after|".</p>
<p>2. Click button to move the caret by line.</p>

<button>Move</button>

<script>
document.querySelector('button').addEventListener('click', (event) => {
  document.getElementById('container').focus();
  const selection = window.getSelection();
  selection.modify('move', 'backward', 'paragraphboundary');
});
</script>

The behavior of browsers:

• Safari, Edge, and Chrome: The caret position is this link| after.
• Firefox: Not support the granularity of paragraphboundary.

If we make a to be editable, the behavior of browsers:

• Safari, Edge, and Chrome: The caret position is |this link after.
• Firefox: Not support the granularity of paragraphboundary.

The behavior of selection.modify() when the granularity parameter is paragraphboundary should be be consistent, whether a is editable or not.

[zp1996]

We believe the new behavior is correct, therefore we will implement it in Chromium and will add a tentative test.