w3c / w3c/editing

indent elements in different lines created by forced breaks <br>

Open
#190 3 comments 1 reaction 2 assignees View on GitHub

@rniwa is already working on this.

Since Feb 6, 2019.

execCommand
Dominant language
HTML
Stars
202
Forks
43
PR merge metrics
No merged PRs in 30d

Description

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

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

ChromeSafariEdgeFirefox

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:

ChromeSafariEdgeFirefox

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.