Closed Bug 241985 Opened 20 years ago Closed 20 years ago

CSS generated content does not work on replaced elements (img, form controls, etc.)

Categories

(Core :: CSS Parsing and Computation, defect)

defect
Not set
normal

Tracking

()

VERIFIED INVALID

People

(Reporter: mkmelin, Assigned: dbaron)

References

Details

Attachments

(1 file)

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7b) Gecko/20040421 MultiZilla/1.6.3.0e
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7b) Gecko/20040421 MultiZilla/1.6.3.0e

When using e.g.
<style type="text/css">
input:before {
  content: "" attr(name) ": ";
}
</style>

no content is generated



Reproducible: Always
Steps to Reproduce:
1. See testcase
2. 

Actual Results:  
In 1.7rc1, you see only input fields, no text

Expected Results:  
Should output
cast: [input field] category: [input field] [submit]

This worked in 1.6
Attached file testcase
Generated content on "replaced elements" has been disabled (per CSS 2.1).

(FORM elemetns aren't really replaced like IMG, but they behave the same.)
Whiteboard: DUPEME
No CSSOM involved.

David, are we just marking these invalid, or what?
Assignee: general → dbaron
Component: DOM: CSSOM → Style System (CSS)
Marking invalid.  This is as-designed.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
Whiteboard: DUPEME
Ok. For reference, functionality was obviously changed by the patch for bug 169334.
Status: RESOLVED → VERIFIED
*** Bug 283808 has been marked as a duplicate of this bug. ***
*** Bug 304279 has been marked as a duplicate of this bug. ***
*** Bug 351758 has been marked as a duplicate of this bug. ***
Summary: CSS input:after generated content broken in 1.7rc1 → CSS generated content does not work on replaced elements (img, form controls, etc.)
OS: Linux → All
Hardware: x86 → All
This works with Chrome (blink), since their form controls are implemented by Shadow DOM (thus having a DOM subtree to insert the pseudo elements).
Shadow DOM shouldn't matter here.  Per spec, ::before and ::after are supposed to act exactly like normal DOM children.  If an actual DOM child wouldn't appear in the rendering, neither should ::before and ::after.  If Blink is implementing something else, then it's just not following the spec.
That said, I just tried this in Chrome with an <input type="button"> and the ::before doesn't show up there, as expected.  So I have no idea what comment 13 is talking about.
I'm using input[type=checkbox]:before to re-style checkboxes (make the checkbox visibility:hidden and use :before to create the box) and it works fine in Chrome 37, but nothing shows up in Firefox 32.
That's a bug in Chrome, afaict, since it doesn't allow rendering normal kids of a checkbox.
I came here with the same issue as Jason. Works in Chrome, but not in Firefox.

https://bugzilla.mozilla.org/show_bug.cgi?id=241985#c17
The example URL from comment 21 doesn't show the quote character in Chrome, either in dev channel or release.
@Boris Zbarsky I'm not sure what you mean. Are you referring to the `content: close-quote` property? https://developer.mozilla.org/en-US/docs/Web/CSS/content#Values
Yes, the actual thing that uses generated content there.
Good observation. I have actually never seen it rendered.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: