Bug 25006 – Style attribute contents are different after pasting

• Component: HTML Editing
• Status: RESOLVED CONFIGURATION CHANGED

[Annie Sullivan]

Steps to reproduce:
1. Go to midas demo: http://www.mozilla.org/editor/midasdemo/
2. Enter the following text
a
b
3. Highlight "a" and press Indent button. (Resulting HTML: <blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;">a</blockquote><div>b</div>)
4. Select all, copy, and paste at the end. (Resulting HTML: <blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;">a</blockquote><div>b</div><div><blockquote class="webkit-indent-blockquote" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 40px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">a</blockquote><div>b</div><div><br></div></div>)

Actual result:
Style attribute of pasted HTML is different than original:
Original: "margin: 0 0 0 40px; border: none; padding: 0px;"
Pasted: "margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 40px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "

Also, if the content is styled by CSS applied to the document, these styles get added to the inlined pasted CSS as well.

Expected result:
Pasted HTML should be same as original.

[Alexander Pavlov (apavlov)]

Created attachment 42092 [details]
Test case

I believe this issue has to do something with the CSS problems described at http://www.daniweb.com/forums/post439344.html#post439344 (the "Safari for Windows" section).
The bottom line is that WebKit breaks up shorthand properties like

padding
margin
border (or border-*)
overflow

into individual properties which are returned through CSSStyleRule.cssText.
Also, the CSSStyleRule.style (a CSSStyleDeclaration object) contains the individual properties, and there seems to be no way to retrieve the original shorthand property values.

A test case is attached.

[Tony Chang]

(In reply to comment #0)
> Also, if the content is styled by CSS applied to the document, these styles get
> added to the inlined pasted CSS as well.
> 
> Expected result:
> Pasted HTML should be same as original.

Just to be clear here, Annie, are you saying that you don't expect document CSS to get applied when pasting?  Here's an example:

http://www.plexode.com/cgi-bin/eval3.py#ht=%3Cdiv%20style%3D%22color%3Agreen%22%3E%0A%3Cul%3E%3Cli%3Efirst%3C%2Fli%3E%3Cli%3Ecopyme%3C%2Fli%3E%3Cli%3Ethird%3C%2Fli%3E%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20%20contentEditable%3Dtrue%3E%0A%3Cp%3Epastehere%3C%2Fp%3E%0A%3C%2Fdiv%3E&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1

If I copy one green list item and paste it in the "pastehere" line, WebKit colors the pasted text as green.  Firefox and IE don't copy the color.  However, TextEdit on Mac does copy the color when pasting.  OpenOffice Writer also copies the color and I bet MS Word and Pages also copy the color.

Anyway, the answer to this question impacts how I would approach fixing this bug.

[Ahmad Saleem]

From attached testcase:

*** Chrome Canary 108 ***

div.styled { padding: 0px; margin: 0px; overflow: auto; border: 1px solid black; }

*** Firefox Nightly 107 ***

div.styled { padding: 0px; margin: 0px; overflow: auto; border: 1px solid black; }

*** Safari Technology Preview 154 ***

div.styled { padding: 0px; margin: 0px; overflow: auto; border: 1px solid black; }

_____

All browsers are giving same outputs for the test case, do we need to do anything? Thanks!

[Brent Fulgham]

Seems like there is nothing to do here.