Issue 125719 in chromium: :before/:after pseudo elements not working with css[attribute] selectors unless elements have already been styled

[chro...@googlecode.com]

Status: Unconfirmed
Owner: ----
Labels: OS-Mac Area-Undefined Pri-2 Type-Bug

New issue 125719 by d...@gapps.semantico.com: :before/:after pseudo
elements not working with css[attribute] selectors unless elements have
already been styled
http://code.google.com/p/chromium/issues/detail?id=125719

Chrome Version : 18.0.1025.165
OS Version: OS X 10.7.3
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
Chrome Canary 20.0.1123.0: Fail
Safari 5: OK
Firefox 12: OK
Opera 11.62: OK
IE 9: OK

What steps will reproduce the problem?
1. Use a combination of a css attribute selector and a pseudo element to
add content to an element
e.g:
h1[id]:after { content: "after"; }

What is the expected result?
Browser should match the selector and add the pseudo element

What happens instead?
In a vanilla situation will fail to match the item and will not add the
pseudo element. (see test-1.html)

If we add some style to the same css attribute selector it will now match
and add the pseudo selector as expected (see test-2.html)

If we also match the ID of a element and style it, the pseudo element will
be created but only for the element that we have just targeted, and not all
the other elements that our css attribute selector _should_ match (see
test-3.html)


Please provide any additional information below. Attach a screenshot if
possible.

Attached a screenshot, but not sure how useful it is!

UserAgentString: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3)
AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.165 Safari/535.19



Attachments:
test-1.html 293 bytes
test-2.html 332 bytes
test-3.html 354 bytes
Screen Shot 2012-05-01 at 13.31.49.png 58.2 KB

[chro...@googlecode.com]

Updates:
Cc: ligim...@chromium.org
Labels: -Area-Undefined Area-WebKit

Comment #1 on issue 125719 by ligim...@chromium.org: :before/:after pseudo

elements not working with css[attribute] selectors unless elements have
already been styled
http://code.google.com/p/chromium/issues/detail?id=125719

(No comment was entered for this change.)

[chro...@googlecode.com]

Updates:
Labels: WebKit-Rendering WebKit-CSS

Comment #2 on issue 125719 by tk...@chromium.org: :before/:after pseudo

[chro...@googlecode.com]

Comment #3 on issue 125719 by thirden...@gmail.com: :before/:after pseudo

elements not working with css[attribute] selectors unless elements have
already been styled
http://code.google.com/p/chromium/issues/detail?id=125719

I also encountered this issue yesterday... See http://jsfiddle.net/6b234/

I'm adding flag images to a series of DIVs as sprites styled into
the :before elements. "background-position" is used to display the correct
sprite on each row, but all the rows get the same background-position as
the first row. Occasionally hovering over the rows would cause the correct
background-position property to be applied.

Problem exists in Chrome 19.0.1084.46 and Chromium 18.0.1025.168 (Developer
Build 134367 Linux) Ubuntu 11.10. Same code works as expected in Firefox
12.0.

[chro...@googlecode.com]

Comment #4 on issue 125719 by jtdi...@gmail.com: :before/:after pseudo

elements not working with css[attribute] selectors unless elements have
already been styled
http://code.google.com/p/chromium/issues/detail?id=125719

I have also run across this issue.

http://jsfiddle.net/jmAX6/12/
http://jsfiddle.net/jmAX6/11/

What should happen in the first link is that only the first div should have
the :after content applied, however it is applied to all divs that are not
styled by other CSS rules.

What should happen in the second link is that the second div should have
the :after content applied, however no div is styled with the :after
content.

This problem exists in Chrome 21.0.1180.15 dev on Ubuntu 12.04 x86_64. The
same code works as expected in Firefox 13.0.1.

[chro...@googlecode.com]

Updates:
Status: Started
Owner: dstockw...@chromium.org

Comment #5 on issue 125719 by dstockw...@chromium.org: :before/:after

pseudo elements not working with css[attribute] selectors unless elements
have already been styled
http://code.google.com/p/chromium/issues/detail?id=125719

[chro...@googlecode.com]

Comment #6 on issue 125719 by dstockw...@chromium.org: :before/:after

pseudo elements not working with css[attribute] selectors unless elements
have already been styled
http://code.google.com/p/chromium/issues/detail?id=125719

WebKit revisions:
http://trac.webkit.org/log/?rev=96397&stop_rev=96387&limit=100&verbose=on

Likely candidate: http://trac.webkit.org/changeset/96393

[chro...@googlecode.com]

Comment #7 on issue 125719 by dstockw...@chromium.org: :before/:after

pseudo elements not working with css[attribute] selectors unless elements
have already been styled
http://code.google.com/p/chromium/issues/detail?id=125719

Simplified test case.

Attachments:
test.html 165 bytes

[chro...@googlecode.com]

Updates:
Status: ExternalDependency
Labels: WebKit-ID-88196

Comment #8 on issue 125719 by dstockw...@chromium.org: :before/:after

pseudo elements not working with css[attribute] selectors unless elements
have already been styled
http://code.google.com/p/chromium/issues/detail?id=125719

[chro...@googlecode.com]

Updates:
Labels: -WebKit-ID-88196 WebKit-ID-88196-NEW

Comment #9 on issue 125719 by bugdro...@chromium.org: :before/:after pseudo

elements not working with css[attribute] selectors unless elements have
already been styled

http://code.google.com/p/chromium/issues/detail?id=125719#c9

https://bugs.webkit.org/show_bug.cgi?id=88196

[chro...@googlecode.com]

Updates:
Labels: -WebKit-ID-88196-NEW WebKit-ID-88196-RESOLVED WebKit-Rev-131047

Comment #10 on issue 125719 by bugdro...@chromium.org: :before/:after

pseudo elements not working with css[attribute] selectors unless elements
have already been styled

http://code.google.com/p/chromium/issues/detail?id=125719#c10

https://bugs.webkit.org/show_bug.cgi?id=88196
http://trac.webkit.org/changeset/131047

[chro...@googlecode.com]

Updates:
Status: Fixed

Comment #12 on issue 125719 by dstockw...@chromium.org: :before/:after

pseudo elements not working with css[attribute] selectors unless elements
have already been styled
http://code.google.com/p/chromium/issues/detail?id=125719

(No comment was entered for this change.)

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings