CSS text-transform: capitalize; doesn't capitalize normally with :before pseudo-elements

RESOLVED INVALID

Status

()

Core
CSS Parsing and Computation
RESOLVED INVALID
9 years ago
9 years ago

People

(Reporter: Stojan Dimitrovski, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

9 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.2) Gecko/2008092318 Fedora/3.0.2-1.fc9 Firefox/3.0.2
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.2) Gecko/2008092318 Fedora/3.0.2-1.fc9 Firefox/3.0.2

If there is a ":before" pseudo element (selector, w/e) in a declaration for, say "h2" element, and also that "h2" is carrying a "text-transform: capitalize;" selector, then capitalisation isn't done on the "h2" at first, but rather on the 
":before -> content". It should capitalize the content of the "h2" but not the "h2:before"-content (specified in the CSS).

Reproducible: Always

Steps to Reproduce:
1. Make a standard HTML and CSS file, link them together
2. Add a h1 or h2 tag ("the tag") in the HTML file, or any tag that supports the :before pseudo element in CSS
3. Type in lowercase text in the tag you wrote above
4. Change the CSS property of that tag to: "text-transform: capitalize;"
5. Add a new CSS property for that tag and append ":before" so you will select the style preceding the tag
6. Add "content: 'm';" in that property (notice the lowercase "m" here)
7. Load the HTML file in Firefox and see how the lowercase "m" is being capitalized instead of the content inside the tag


Expected Results:  
The ":before"-content style should not be initially capitalized because if it needs to be, it should be specified as such in the "content: "";" because the content style contains only static information.

Comment 1

9 years ago
Created attachment 343953 [details]
testcase following initial description.

css specification tells:

The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.

http://www.w3.org/TR/CSS2/generate.html#before-after-content

See,

Comment 2

9 years ago
css specification tells:

The :before and :after pseudo-elements inherit any inheritable properties from
the element in the document tree to which they are attached.

http://www.w3.org/TR/CSS2/generate.html#before-after-content

So, as I understand it, behaviour is correct here: h2:before inherits text-transform property from h2
The way to do as you wish would be to use text-transform:none; on h2:before selector.

Comment 3

9 years ago
CSS 2.1 has the same sentence:
http://www.w3.org/TR/CSS21/generate.html#before-after-content

'tetx-transform' is an inheritable property
http://www.w3.org/TR/CSS21/text.html#propdef-text-transform
> Inherited:  	yes

The behaviour in the test case is indeed correct, and is what other browsers (Opera,WebKit/Safari) implement.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.