1106759 - first-letter pseudo selector is not applied on editable content

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, defect)

Description

[Gil Forcada]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0
Build ID: 20141113113219

Steps to reproduce:

In our website (https://www.freitag.de) we have TinyMCE to allow our users to create articles (is a newspaper company with an online community).

TinyMCE allows you to define custom styles and with a drop down you can apply them[1], so I created a new style[2] to add drop caps[3] to paragraphs.

Displaying a paragraph has no problem is rendered perfectly.

The problem is on TinyMCE.

Due to using the ::first-letter pseudo selector (normal CSS selectors are fine) I see a couple of issues:

- paragraphs with that style are not styled as such
- marking more paragraphs keeps them unstyled

A workaround is clicking on the HTML button from TinyMCE[4], which pop-ups a textarea where you can edit the HTML and save it back. Once you save, then paragraphs are styled correctly, but again, 

- on loading an article which already has a <p class="drop-caps">lorem ipsum...</p> the first letter is not styled with it (inspecting the paragraph with Firefox's inspector clearly shows that the class is there, but the letter is not styled at all. TinyMCE provides a button to see the actual HTML and if you click on it and then save the popup, styles then are applied (to the paragraphs that already had it), marking another paragraph still reproduces the same bug (paragraphs are not being styled).

Setting a timeout on the onLoad method for tinyMCE makes the first problem (content with already that style being styled) go away, see the code[5].

For the second problem I still have to figure out how to solve it.



On Chrome (version 39 on linux) and on Opera (version 12.16 also on linux).


[1] See an example here: https://www.freitag.de/kontakt

[2]
.running-text.article p.drop-caps::first-letter  {
  float: left;
  font-size: 52px;
  margin: 5px 0 -5px 0;
  padding-right: 4px;
  line-height: 35px;
}

[3] http://css-tricks.com/snippets/css/drop-caps
[4] Can be seen on [1]
[5]
ed.onLoadContent.add(function(ed, o) {
// basically wait 0.5 seconds to re-apply the content
               setTimeout(
                   function() {
                       ed.setContent(o.content);
                   },
                   500
               );
});

Comment 1

[Boris Zbarsky [:bzbarsky]]

Is this basically a duplicate of bug 145419?

Comment 2

[Gil Forcada]

Seems to be the case similar in the dynamic sense of it, but I did not try with alternate stylesheets.