Bug 67699
| Summary: | CSS 3 Attribute Selector does not work when the value of an attribute is changed on onfocus event | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Jaikishan Jalan <jai.ism> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED FIXED | ||
| Severity: | Major | CC: | shanestephens |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | Windows 7 | ||
Jaikishan Jalan
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
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
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.