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)
Tracking
()
RESOLVED
INVALID
People
(Reporter: sdimitrovski, Unassigned)
Details
Attachments
(1 file)
243 bytes,
text/html
|
Details |
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•16 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 See,
Comment 2•16 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•16 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
Closed: 16 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•