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

[zp1996]

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

Consider this test case:

<style>
div {
  width: 1000px;
}
</style>
<div contenteditable>
  <p id="one">Demo 1</p>
  <p id="two">
    Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, <span contenteditable="false">11111</span> omnis voluptas assumenda est, omnis dolor repellendus.
  </p>
</div>

<p>Move the caret at the end of p#two, then click the button.</p>

<button>Modify</button>

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

The behavior of browsers:

• Safari, Edge, and Chrome: Same as the granularity of line.
• Firefox: Not support the granularity of paragraph.

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

• Safari, Edge, and Chrome: The caret position is Demo 1|.
• Firefox: Not support the granularity of paragraph.

[zp1996]

@rniwa Hi rniwa, can you help me see the correct behavior? In my opinion, the behavior of selection.modify should not be influenced by whether span is editable or not.