RESOLVED FIXED67699
CSS 3 Attribute Selector does not work when the value of an attribute is changed on onfocus event 
https://bugs.webkit.org/show_bug.cgi?id=67699
Summary CSS 3 Attribute Selector does not work when the value of an attribute is chan...
Jaikishan Jalan
Reported 2011-09-07 00:07:08 PDT
I have an input field and on onfocus event of the field, I set a data-attribute on one of the parent node of the field. For example, onfocus event, I set data-focus="true" Based on the value of this attribute, I want to change the background color of an a child of the parent node using css3 selector. But it does not change the background color. It does work as expected on all other major browsers. Please find the sample html file that repros this bug.
Attachments
Add attachment proposed patch, testcase, etc.
Jaikishan Jalan
Comment 1 2011-09-07 00:09:34 PDT
For some reasons, I cannot attach my html file to the bug. Please see the sample html inline <!DOCTYPE html> <html> <head> <title>Test page</title> <style> #ct[data-focus="true"] #message { background-color:blue; } </style> <script type="text/javascript"> function onFoucsCallback(e) { var s = document.getElementById("message"); s.innerHTML = "Focus"; var d = document.getElementById('ct'); d.setAttribute("data-focus","true"); // Expected: Background color of div with id as message changes to blue // Actual: Does not change to blue in webkit based browsers (such as Safari and Chrome). It does change in Firefox, Opera and IE } function onBlurCallback(e) { var s = document.getElementById("message"); s.innerHTML = "Blur"; var d = document.getElementById('ct'); d.removeAttribute("data-focus"); // Expected: Background color of div with id as message changes is no longer blue // Actual : On Opera, background color still remains blue. Cannot test the behavior on Webkit based browser. It works as expected in Firefox and IE } </script> </head> <body> <div id="ct"> <form> <input type="text" onfocus="onFoucsCallback(event);" onblur="onBlurCallback(event);"/> </form> <div id="message"></div> </div> </body> </html>
Shane Stephens
Comment 2 2011-10-11 17:23:25 PDT
Works for me (Chrome 14 and WebKit nightly on Mac OS X, Chrome 15 on Windows 7). Doesn't work in Safari 5 on OS X so I suspect this was a bug that has been fixed in head.
Note You need to log in before you can comment on or make changes to this bug.