Bug 70879 – :nth-child with descendant selector not selecting all elements

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

Created attachment 112465 [details]
Test case

Given the DOM as in the attached test case, the selector "td:nth-child(2) input" only selects the first input of each second td in each row, and not all four of them.

This only happens with "document.querySelectorAll" in JavaScript; using this selector in CSS always works.

"td:nth-child(1) input" returns all four expected elements.

[Rod]

Created attachment 118356 [details]
Test case with embedded script

Script embedded in the new test case file also demonstrates the bug, only nth-child(1) works properly, the rest only find a single child element even though they should behave the same.

Created attachment 118391 [details]
Test case with setTimeout

The weird thing is - it does work when deferring the selector, i.e. with "setTimeout". Please see the attached test case - when executed immediately, the selector does not select correctly, but when using it in combination with "setTimeout", it does work.

Confirmed with Google Chrome (17.0.963.26) Canary, Mac OS X Webkit 535.11 (@103967)

I'm testing this on Canary (18.0.997.0), but the "setTimeout" test case is working differently there.

To get it work on Canary I have to open Developer Tools and select the "Elements" tab. Only after doing so and refreshing the page, executing "test()" produces 3-3-3 for the "setTimeout" (third) case.

Without having Developer Tools open on the "Elements" tab, the result is 3-1-1 for the third case.

Without "setTimeout" (the first two cases) the result is 3-1-1; this hasn't changed on Canary.

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.