1372675 - CSS animations don't work with ::first-letter (and ::first-line)

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[pmos]

Attachment: testcase.html

User Agent: Mozilla/5.0 (X11; Linux i686 on x86_64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20170210223443

Steps to reproduce:

Tried to add CSS animations to CSS styles which use ::first-letter (and then just to check ::first-line).

Minimal example for ::first-letter can be seen at [1] or in the attached self-contained HTML file.

[1]: https://jsfiddle.net/u0jra3g2/


Actual results:

CSS animations don't work on pseudo-elements ::first-letter and ::first-line, the letter or line remain completely static instead. Note that if you remove the ::first-letter pseudo-element, the animation works fine on the whole element.


Expected results:

The first letter should change its color from black to red over the course of 1 second, then go back to black and repeat the cycle. Like I said, this works fine for the whole element if ::first-letter is removed.

By the way, this doesn't work in any other browser either, but I see no reason for why it shouldn't. Animations work fine with other pseudo-elements such as ::after and ::before. Is there anything in the standards that says it shouldn't work for ::first-letter and ::first-line?

Comment 1

[Robert Longson [:longsonr]]

That's precisely what the spec says. https://drafts.csswg.org/css-animations/ if you want to change Firefox you should argue that the w3c change the spec first.