[wpt-sync] Sync PR 35862 - Add tests for contenteditable=false elements inside contenteditable=true elements and for selection in empty elements
Categories
(Core :: DOM: Editor, task, P4)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox110 | --- | fixed |
People
(Reporter: wpt-sync, Unassigned)
References
(Depends on 1 open bug, )
Details
(Whiteboard: [wptsync downstream])
Sync web-platform-tests PR 35862 into mozilla-central (this bug is closed when the sync is complete).
PR: https://github.com/web-platform-tests/wpt/pull/35862
Details from upstream follow.
Tomasz Jakut <vepomoc@gmail.com> wrote:
Add tests for contenteditable=false elements inside contenteditable=true elements and for selection in empty elements
I've been asked by @johanneswilm to prepare some tests for selection issues in CKEditor as a part of Interop 2022.
There are two main issues for us:
- selection of the
[contenteditable=false]elements inside the[contenteditable=true]elements (especially at their beginning and end),- placing selection inside empty elements.
Tests
For the first issue I've prepared 4 tests:
- automatic:
selection/contenteditable/cefalse-on-boundaries.html,- manual:
editing/cefalse-beginning-deletion-manual.html,editing/cefalse-boundaries-deletion-manual.html,editing/cefalse-end-deletion-manual.html.Unfortunately, manual tests were needed because Chrome shows the correct selection and it seems to work fine with the JS API (e.g.
range#deleteContents()) but trying to interact in person with such selection results in a broken experience (the selected content can't be deleted).For the issue with putting selection inside empty elements, I've prepared two tests:
- automatic:
selection/caret/empty-elements.html,- manual:
editing/empty-elements-manual.html.Once again, a manual test was needed as Firefox allows putting the selection inside such an element but typing inside it does not work (the typed content is moved outside the empty element).
Context
The first issue required us to create dedicated plugins for CKEditor 4 and CKEditor 5 whose task is to add editable elements around non-editable ones (especially ones at the beginning or end of the editor) to fix the incorrect selection of them. However, in CKE4, even with this plugin, the issue is still present, especially in Safari.
The second one requires us to use various fillers (CKEditor 4 version and CKEditor 5 one) to be able to put the selection in such places. There is also a similar issue connected with editing at the edge of elements, e.g. links. As visible in CKEditor's 5 link demo, putting the caret inside any of the links, moving it to the end of the link, and pressing space will produce an
filler, needed to inform the browser that the intention is to stay inside the link.
|
Assignee | |
Updated•3 years ago
|
|
|
Assignee | |
Comment 1•2 years ago
|
||
|
|
Assignee | |
Comment 2•2 years ago
|
||
CI Results
Ran 0 Firefox configurations based on mozilla-central, and Firefox, Chrome, and Safari on GitHub CI
Total 5 tests and 4 subtests
Status Summary
Firefox
OK : 5
PASS : 10
FAIL : 6
Chrome
OK : 5
PASS : 7
FAIL : 9
Safari
OK : 4
FAIL : 10
ERROR: 1
Links
Details
New Tests That Don't Pass
- /editing/other/empty-elements-insertion.html [wpt.fyi]
- Insert text into the inline element styled with border:
FAIL(Chrome:PASS) - Insert text into the inline element styled with padding:
FAIL(Chrome:PASS) - Insert text into the unstyled inline element:
FAIL(Chrome:FAIL) - Insert text into the unstyled inline element with the styled ::before pseudoelement:
FAIL(Chrome:FAIL) - Insert text into the unstyled inline element with the styled ::after pseudoelement:
FAIL(Chrome:FAIL) - Insert text into the unstyled inline element with the styled ::before and ::after pseudoelements:
FAIL(Chrome:FAIL)
- Insert text into the inline element styled with border:
|
||
Comment 4•2 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/1f0731f7c91c
https://hg.mozilla.org/mozilla-central/rev/e82023fded1a
Description
•