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

Status: VERIFIED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Magnus Melin [:mkmelin]]

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

Comment 1

[Magnus Melin [:mkmelin]]

Attachment: testcase

Comment 2

[Anne (:annevk)]

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.)

Comment 3

[Boris Zbarsky [:bzbarsky]]

No CSSOM involved.

David, are we just marking these invalid, or what?

Comment 4

[Boris Zbarsky [:bzbarsky]]

Marking invalid.  This is as-designed.

Comment 5

[Magnus Melin [:mkmelin]]

Ok. For reference, functionality was obviously changed by the patch for bug 169334.

Comment 6

[Mats Palmgren (inactive)]

*** Bug 283808 has been marked as a duplicate of this bug. ***

Comment 7

[Erik Fabert]

*** Bug 304279 has been marked as a duplicate of this bug. ***

Comment 8

[Adam Guthrie]

*** Bug 351758 has been marked as a duplicate of this bug. ***

Comment 13

[henryfhchan]

This works with Chrome (blink), since their form controls are implemented by Shadow DOM (thus having a DOM subtree to insert the pseudo elements).

Comment 14

[Boris Zbarsky [:bzbarsky]]

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.

Comment 15

[Boris Zbarsky [:bzbarsky]]

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.

Comment 17

[Jason Cheatham]

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.

Comment 18

[Boris Zbarsky [:bzbarsky]]

That's a bug in Chrome, afaict, since it doesn't allow rendering normal kids of a checkbox.

Comment 20

[kevin]

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

Comment 21

[kevin]

Here's an example: https://s.codepen.io/kevinSuttle/debug/OXybrJ

Comment 22

[Boris Zbarsky [:bzbarsky]]

The example URL from comment 21 doesn't show the quote character in Chrome, either in dev channel or release.

Comment 23

[kevin]

@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

Comment 24

[Boris Zbarsky [:bzbarsky]]

Yes, the actual thing that uses generated content there.

Comment 25

[kevin]

Good observation. I have actually never seen it rendered.