[Webkit-unassigned] [Bug 22523] New: getElementsByClassName fails to find elements with dynamically added classnames

Wed Nov 26 19:23:53 PST 2008

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

           Summary: getElementsByClassName fails to find elements with
                    dynamically added classnames
           Product: WebKit
           Version: 525.x (Safari 3.1)
          Platform: Macintosh
        OS/Version: Mac OS X 10.5
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: JavaScriptGlue
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: stevey at google.com

{document|element}.getElementsByClassName (in Safari 3.1 and 3.2) fails to
include elements that began with at least one class name, then had other
space-delimited class names added during an event handler.

For instance, if you start with a span whose class is "foo", and in an onclick
handler you modify it to span.className = "foo bar", then
document.getElementsByClassName('bar) will not include the span.  However, if
the span began with no classname, then it may be included in the results.

The following standalone html page allows you to observe and experiment with
the behavior.  If it fails to make it through the Bugzilla filtering, please
feel free to contact me at my email address for further information.

I have no idea which WebKit bugzilla component applies here.

<html>
<head>
<style type="text/css">
.test {
  background-color: lightyellow;
}
</style>
</head>

<body style="margin-left:1em">

<p>Safari 3.x has a bug with dynamically added class names:  its
<code>getElementsByClassName</code> function doesn't find elements
whose class names were added by event handlers.</p>

<p>To watch it in action:
<ul>
  <li>Click the first span to count highlights.</li>
  <li>Click the second span to highlight it by adding a classname</li>
  <li>Click the first span again to count highlights.  Count is still 1.</li>
</ul>
</p>

<p>Strangely, if you then click span 3 (which has no initial classname)
to highlight it, then the span count jumps to 3.  But you get different
results if you highlight span 3 first.  Play with it!</p>

<p>
  <span id="two" class="dummy test" onclick="countHighlights()">
    Span 1:  click me to count highlighted spans
  </span>
</p>
<p>
  <span id="one" class="dummy" onclick="highlight('one')">
    Span 2:  click me to add a highlight
  </span>
</p>
<p>
  <span id="three" onclick="highlight('three')">
    Span 3:  click me to add a highlight
  </span>
</p>

<script type="text/javascript">
  function highlight(id) {
    var span = document.getElementById(id);
    if (span.highlighted) {
      alert('already have highlight');
    } else {
      span.className = span.className + " test";
      span.highlighted = true;
    }
  }

  function countHighlights() {
    var spans = document.getElementsByClassName('test');
    alert("highlighted spans: " + spans.length);
  }
</script>
</body>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.