Bug 21346

Summary: attribute value selector not being reevaluated upon attribute change
Product: WebKit Reporter: Tom Pelaia II <pelaiata>
Component: CSSAssignee: Andreas Kling <kling>
Status: RESOLVED FIXED    
Severity: Normal CC: asutherland, bdakin, ddkilzer, divya, pknight, simon.fraser
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.5   
Attachments:
Description Flags
Patch none

Description Tom Pelaia II 2008-10-03 13:48:52 PDT 
I have encountered a bug in which I have an attribute value selector which is not being reevaluated when my JavaScript code changes the value of the attribute. I have included the source code below and have verified that it works fine in Mozilla browsers but fails in the latest nightly build of WebKit r37126. The key features to observe the bug are that there must be an attribute value selector on a class selector followed by another class selector whose style we would like to define. In the example below, we have a container whose class is "entry" with an attribute which is either "good" or "bad". Inside the container we have a node whose class is "toggle" and we would like to define the style on this node based on the status of its container. The toggle node has a JavaScript click handler which toggles the status of its container between "good" and "bad".

Example source code:

<html>
<head>
<title>Selector Test</title>
<style>
.toggle {cursor: pointer;}
.entry[status="good"] .toggle { color: green; }
.entry[status="bad"] .toggle { color: red; }
</style>
</head>

<body>

<div class="entry" status="good">
	<span class="toggle" onclick="var status=this.parentNode.getAttribute('status'); var newStatus=(status=='good'?'bad':'good'); this.parentNode.setAttribute('status', newStatus);">Click to toggle between good (green) and bad (red).</span>
</div>

</body>
</html>
Comment 1 David Kilzer (:ddkilzer) 2009-09-29 13:15:36 PDT 
<rdar://problem/7261995>
Comment 2 Paul Knight 2009-09-29 13:25:45 PDT 
Interestingly, if you add this empty rule in Tom's example:
    .entry[status] {}

then the color of the .toggle element changes correctly.
Comment 3 Andreas Kling 2012-05-22 04:18:24 PDT 
Created attachment 143269 [details]
Patch

This was fixed recently, but probably without a test. Turning the provided test case into a layout test so we don't break this again.
Comment 4 Antti Koivisto 2012-05-22 04:26:32 PDT 
Comment on attachment 143269 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=143269&action=review

r=me

> LayoutTests/fast/css/attribute-selector-recursive-update-on-setAttribute.html:4
> +<meta charset="utf-8">

Why is this here?
Comment 5 Andreas Kling 2012-05-22 04:56:39 PDT 
Comment on attachment 143269 [details]
Patch

Clearing flags on attachment: 143269

Committed r117954: <http://trac.webkit.org/changeset/117954>
Comment 6 Andreas Kling 2012-05-22 04:56:48 PDT 
All reviewed patches have been landed.  Closing bug.