[Webkit-unassigned] [Bug 74200] New: nth-child:nth-last-child combination failing unexpectedly.

[bugzilla-daemon at webkit.org]

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

           Summary: nth-child:nth-last-child combination failing
                    unexpectedly.
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
        OS/Version: Mac OS X 10.6
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: chris at farski.com


Overview
When using a combination of nth-child() and nth-last-child(), the browser is failing to select certain DOM elements that match provided selectors, while others are correctly being matched and styled.

Steps to Reproduce
1) Create a <ul> element, and fill it with a number of <li> elements
2) Style the list such that the <li> elements float and form a grid or rows and columns
3) Use selectors to build rules that match only the last "row" of the grid


Actual Results
Only some of the elements in the last "row" are matched

Expected Results
All elements in the last "row" are matched

Build
This bug is presenting itself in the Spotify app, which is reporting as: "5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.8 (KHTML, like Gecko) Chrome/17.0.944.0 Safari/535.8"
I have not yet confirmed it in any other browser or application.

Additional Information
My experience with this bug is as follows:
We have build a grid of equally sized rectangles (as <li> elements), that are in a <ul> elements, and set to float:left to build the grid of equally sized rows and columns. The grid is limited to a minimum and maximum width (and, thus, number of columns, which varies the number of rows). In order to apply some specific styles to the <li> elements that appear in the last row of the grid, I have set up the following styles:

body[data-columns='9'] .playlist li.song:nth-child(9n):nth-last-child(1) { background: red; }
body[data-columns='9'] .playlist li.song:nth-child(8n):nth-last-child(2) { background: red; }
body[data-columns='9'] .playlist li.song:nth-child(7n):nth-last-child(3) { background: red; }
body[data-columns='9'] .playlist li.song:nth-child(6n):nth-last-child(4) { background: red; }
body[data-columns='9'] .playlist li.song:nth-child(5n):nth-last-child(5) { background: red; }
body[data-columns='9'] .playlist li.song:nth-child(4n):nth-last-child(6) { background: red; }
body[data-columns='9'] .playlist li.song:nth-child(3n):nth-last-child(7) { background: red; }
body[data-columns='9'] .playlist li.song:nth-child(2n):nth-last-child(8) { background: red; }
body[data-columns='9'] .playlist li.song:nth-child(1n):nth-last-child(9) { background: red; }

The logic here being that the combination of nth-child and nth-last-child will select only those elements in the last row. nth-last-child alone is not enough, even when the data-columns value is known, since when there is an incomplete row at the end of the list, it would start selecting items in the second-to-last row (eg, if there is only a single item in the last row, nth-last-child(2) will select the last item in the second to last row). By adding the nth-child to, essentially, match which column the element is in, the selector is limited to only those items in the last row (I realize this sample code only works when the last row is a complete row, but that is irrelevant to the bug).

The bug presents itself such that, with this code, if there is a complete final row, certain elements are inexplicably not matched. For example, the last element is red, as per the first selector (9th column, last child of the list), the 8th element in the row is also red, the 7the element in the row is NOT red, but the 6th element is. There are no additional elements in the DOM between surrounding the 7th element, so based on the math, there's no reason I can see that it wouldn't match. Given that 6n matches the preceding element, 7n should match the incorrectly styled element. Likewise, given that last-child(2) matches the proceeding element, last-child(3) should match the element in question. For some reason that's not the case; I have't been able to determine why, and it seems like, at least with my styles, it's always the same elements that get skipped (7/3, 5/5 are two I've noticed)

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