Bug 209535

Summary:	Joining elements in contenteditable with CSS variables formatting creates unexpected span elements
Product:	WebKit	Reporter:	Floris Bernard <floris.bernard>
Component:	HTML Editing	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	lode, megan_gardner, rniwa, webkit-bug-importer, wenson_hsieh
Priority:	P2	Keywords:	InRadar
Version:	Safari 13
Hardware:	All
OS:	All

Description Floris Bernard 2020-03-25 01:49:48 PDT

Steps to reproduce the problem:
1. Create 2 elements in a contenteditable wrapper
2. Add formatting on the element using CSS variables. This doesn't have to be on the elements themselves -- you can also style a common ancestor
3. At runtime, join the 2 elements by removing the gap between them

Reproduction link: 
https://codesandbox.io/s/reproduction-contenteditable-bug-t07we

What is the expected behavior?
The elements are merged together without unwanted artifacts

What went wrong?
The second element now contains a unexpected <span> with the formatting applied as inline styling.

Here are some related issues. However I think they are separate because those are not directly related to CSS variables:
https://bugs.webkit.org/show_bug.cgi?id=106110
https://bugs.webkit.org/show_bug.cgi?id=127242

I filed this same issue with Blink:
https://bugs.chromium.org/p/chromium/issues/detail?id=1064358

Comment 1 Radar WebKit Bug Importer 2020-03-25 18:14:27 PDT

<rdar://problem/60898548>