Bug 271820 – Disabling both underline and strikethrough break the typed text

• Status: NEW
• Component: HTML Editing

[Valentin Perignon]

Created attachment 470635 [details]
Step 1 above - Step 2 below

The bug occurs on a contentEditable document when using `document.execCommand()`.

(Step 1) First we enable "underline" and "strikethrough", then type some text, it works as expected.
Then we disable both "underline" and "strikethrough".
(Step 2) When we type some text, the previous text that was underlined and crossed out looses its strikethrough property.

It is because, at the first step, the HTML looks like this:
```HTML
Coucou<u><strike>Tout</strike></u>
```
The word "Tout" is wrapped in two tags: u and strike.

But at the second step, the HTML looks like this:
```HTML
Coucou<strike style="text-decoration: underline;">Tout</strike>LeMonde

```
Juste the tag strike remains with a style attribute to apply the underline.
However, the `text-decoration: underline` override the webkit style `text-decoration-line: line-through`, so the text is just underlined.

You can refer to the attachment to see how it looks a the first and second steps.

[Radar WebKit Bug Importer]

<rdar://problem/125898824>

[Ahmad Saleem]

Valentin - can you share reproducible test case and also if you can confirm it is still an issue in Safari Technology Preview 192?

[Valentin Perignon]

Created attachment 470832 [details]
Reproducible test case

[Valentin Perignon]

Ahmad — Thanks for your reply.

Where can I download Safari TP 192? The latest released available on the Apple website is 191.

You can find a reproducible test case here: https://codepen.io/valentin-lab/pen/wvZjBoW.

This is a simple contentEditable div with two buttons to apply style.

To reproduce, follow the following steps:
 1. Select a word
 2. Click the button "S" (strikethrough) and "U" (underline) to apply both styles on the selected word
 3. Put the caret at the end of the word
 4. Click again both S and U buttons (the order doesn't matter)
 5. Write anything on the contentEditable div
 6. As you can see, the style previously applied change, the text is no longer underlined and striked through, it is only striked through.

I uploaded the video "Reproductible test case" that reproduce these steps.

[Ahmad Saleem]

(In reply to Valentin Perignon from comment #4)
> Ahmad — Thanks for your reply.
> 
> Where can I download Safari TP 192? The latest released available on the
> Apple website is 191.
> 
> You can find a reproducible test case here:
> https://codepen.io/valentin-lab/pen/wvZjBoW.
> 
> This is a simple contentEditable div with two buttons to apply style.
> 
> To reproduce, follow the following steps:
>  1. Select a word
>  2. Click the button "S" (strikethrough) and "U" (underline) to apply both
> styles on the selected word
>  3. Put the caret at the end of the word
>  4. Click again both S and U buttons (the order doesn't matter)
>  5. Write anything on the contentEditable div
>  6. As you can see, the style previously applied change, the text is no
> longer underlined and striked through, it is only striked through.
> 
> I uploaded the video "Reproductible test case" that reproduce these steps.

Correct! yes - I just typed STP192 by mistake.

I am definitely able to reproduce the bug and I can see that it does not retain style and what I noticed different from your case that in my case, it didn't even retained 'strike through'.

*** Safari & Firefox Nightly 126 ***

> Take 'ipsum' as selection and press 'S' and 'U'
> Now style applied, press 'down' key while selection is applicable to move the caret to end of 'ipsum' [selection needs to be manually made]
> then select any style 'U' (in my case) and then type anything

RESULT: No style applied to typed 'text'

*** Chrome Canary 125 ***

> Take 'ipsum' as selection and press 'S' and 'U'
> Now style applied, press 'down' key while selection is applicable to move the caret to end of 'ipsum'
> then select any style 'U' (in my case) and then type anything

RESULT: Preserve style.

______

NOTE - We might have older bug report (if I recall correctly) for not able to retain style so we might be able to duplicate this so I might do so in future.

But thanks again for reporting and sharing test case, it really helps to understand difference across browsers as well.