WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
271820
Disabling both underline and strikethrough break the typed text
https://bugs.webkit.org/show_bug.cgi?id=271820
Summary
Disabling both underline and strikethrough break the typed text
Valentin Perignon
Reported
2024-03-28 03:01:12 PDT
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.
Attachments
Step 1 above - Step 2 below
(12.77 KB, image/png)
2024-03-28 03:01 PDT
,
Valentin Perignon
no flags
Details
Reproducible test case
(4.51 MB, video/mp4)
2024-04-09 00:16 PDT
,
Valentin Perignon
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2024-04-04 03:02:17 PDT
<
rdar://problem/125898824
>
Ahmad Saleem
Comment 2
2024-04-05 04:57:52 PDT
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
Comment 3
2024-04-09 00:16:47 PDT
Created
attachment 470832
[details]
Reproducible test case
Valentin Perignon
Comment 4
2024-04-09 00:24:24 PDT
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
Comment 5
2024-04-09 05:30:39 PDT
(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.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug