Bug 285705 – element.children index getter returns a wrong element when traversing backwards

• Component: CSS
• Status: RESOLVED FIXED

[Timo Tijhof]

Created attachment 473848 [details]
What the test case looks like when the bug happens in Safari

Steps:
* From a click handler, change class name of DOM node X from A to B, and change the class of DOM node Y from B to A.

Actual behaviour:

According to reading out `node.className`, the change is applied. However in the actual rendering, it seems something somewhere is getting confused and the painted/composited element continues to render as before the change, in perpetuity. Even after many seconds and other paint cycles, the state never corrects itself.

It seems to be specific to cases where X and Y are the first and last child of a common ancestor.

Online example:
* https://treasure21.timotijhof.net/play.html
* Press up twice (move class from 1-1 to 0-1 and then wrap to 3-1).
* Press down once (effectively copies instead of moves the class from 3-1 back to 0-1).

Isolated test:
* https://codepen.io/Krinkle/pen/WbeMPvw?editors=0010
* Press "Up" button 2 times.
* Press "Down" button 1 time. This logs to the console the value of node.className, which has correctly changed. Yet, the painted element and the inspector's DOM disagree.


Other information:
* Affects Safari 17.5 on macOS.
* Affects Safari 18.2 on macOS.
* Affects Mobile Safari on iOS 18.2.
* Does not affect Firefox 134.
* Does not affect Chrome 131.

[Timo Tijhof]

Created attachment 473849 [details]
Expected behavior as observed in Firefox and Chrome

[Simon Fraser (smfr)]

Maybe a style sharing bug? It's not repaint; a window resize does not fix it.

[Ricci Adams]

It's something to do with HTMLCollection. If an out-of-bounds index is used, subsequent calls will return the first element.

Attaching a further reduction which demonstrates this. Tested in Safari 17.6.

[Ricci Adams]

Created attachment 473867 [details]
Further reduction showing issue with HTMLCollection

[Radar WebKit Bug Importer]

<rdar://problem/142838915>

[Ryosuke Niwa]

Created attachment 473906 [details]
Test

[Ryosuke Niwa]

Pull request: https://github.com/WebKit/WebKit/pull/39090

[EWS]

Committed 288969@main (5b32e928bc97): <https://commits.webkit.org/288969@main>

Reviewed commits have been landed. Closing PR #39090 and removing active labels.