Closed Bug 460696 Opened 16 years ago Closed 16 years ago

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

Categories

(Core :: CSS Parsing and Computation, defect)

All
Linux
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: sdimitrovski, Unassigned)

Details

Attachments

(1 file)

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.
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,
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.
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
Closed: 16 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: