[w3c/editing] indent elements in different lines created by forced breaks <br> (#190)

I found out an interoperability issue between Safari/Chrome and Firefox/Edge that I'd like to solve now and figure out which engines are the buggy ones.  Lets consider this simple case:

```
<div contenteditable="true">
    <div style="border: 1px solid blue">a<br>b</div>
</div>
select all, indent, then outdent
<button onclick="document.execCommand('indent', false);">indent</button>
<button onclick="document.execCommand('outdent', false);">outdent</button>
<br/>
Bug: 'indent' creates new blocks for each line; then 'outdent' removes block from first line
```

This is how the test case is rendered in the four major browsers:
![indent-outdent-test](https://user-images.githubusercontent.com/2230241/52378724-bd282180-2a68-11e9-874d-9f9fb0bac3d1.png)

After executing the 'indent' command on a selection including all the elements, this is the result in in the different browsers:

<table>
  <tr>
    <td>Chrome</td><td>Safari</td><td>Edge</td><td>Firefox</td>
  </tr>
  <tr>
    <td><img src="https://user-images.githubusercontent.com/2230241/52378296-974e4d00-2a67-11e9-80fc-9c8735b342e1.png"/></td>
    <td><img src="https://user-images.githubusercontent.com/2230241/52378304-9e755b00-2a67-11e9-861b-228d8752e1fb.png"/></td>
    <td><img src="https://user-images.githubusercontent.com/2230241/52378320-a92ff000-2a67-11e9-8c55-d6be1557a508.png"/></td>
    <td><img src="https://user-images.githubusercontent.com/2230241/52378341-b220c180-2a67-11e9-8ddc-478555b4135f.png"/></td>
  </tr>
</table>

I think that Firefox and Edge rendering is the correct one, while Chrome and Safari have the same bug; I couldn't find anything in the spec about creating new parents for the siblings participating in the indent operation.  

If we execute an 'outdent' command on the result, again selecting all the elements, this is how the different browsers render the test case:

<table>
  <tr>
    <td>Chrome</td><td>Safari</td><td>Edge</td><td>Firefox</td>
  </tr>
  <tr>
    <td><img src="https://user-images.githubusercontent.com/2230241/52380066-9cfa6180-2a6c-11e9-864b-8ee3dbb42b2a.png"/></td>
    <td><img src="https://user-images.githubusercontent.com/2230241/52380176-0da17e00-2a6d-11e9-80e6-809460799619.png"/></td>
    <td><img src="https://user-images.githubusercontent.com/2230241/52380087-abe11400-2a6c-11e9-8e4c-fa25f0d9a80c.png"/></td>
    <td><img src="https://user-images.githubusercontent.com/2230241/52380099-b8656c80-2a6c-11e9-9375-677e379b8279.png"/></td>
  </tr>
</table>

Again, both Firefox and Edge have the correct and expected behavior, getting the initial state before the indent operation. However, Chrome and Safari renders the test case incorrectly, again with the same bug, removing the block parent if the element in the first line.


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/editing/issues/190