Bug 21346 - attribute value selector not being reevaluated upon attribute change
Summary: attribute value selector not being reevaluated upon attribute change
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.5
: P2 Normal
Assignee: Andreas Kling
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2008-10-03 13:48 PDT by Tom Pelaia II
Modified: 2012-05-22 04:56 PDT (History)
6 users (show)

See Also:


Attachments
Patch (2.73 KB, patch)
2012-05-22 04:18 PDT, Andreas Kling
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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.