RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 15:47:45 +00:00
Code Issues Activity Actions

LibWeb: Correct handling of negative step values in nth-foo() selectors

Browse source 
This should be 1% on Acid3. :^)

Added the `-5n+3` case to all `nth-of-whatever()` selector test pages,
so we can easily check that it works.
This commit is contained in:
Sam Atkins 2022-03-02 15:58:16 +00:00 • committed by Andreas Kling
parent 6a4978764f
commit 973f3c3642
5 changed files with 123 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

22
Base/res/html/misc/nth-child.html
View file

@ -17,7 +17,8 @@
.plus-n > div:nth-child(+n), /** "+n" is special case inside parser. */
.minus-n > div:nth-child(-n), /** "-n" is special case inside parser. */
._0n-plus-1 > div:nth-child(-0n+1),
.n-plus-2__minus-n-plus-4 > div:nth-child(+n + 2 ):nth-child( -n+4) {
.n-plus-2__minus-n-plus-4 > div:nth-child(+n + 2 ):nth-child( -n+4),
.acid3 > div:nth-child(-5n+3) {
background-color: lightblue;
}
</style>
@ -136,5 +137,24 @@
<div>4 +</div>
<div>5</div>
</div>
<h4>:nth-child(-5n+3) - Acid3</h4>
<div class="acid3">
<div>1</div>
<div>2</div>
<div>3+</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
</body>
</html>

22
Base/res/html/misc/nth-last-child.html
View file

@ -17,7 +17,8 @@
.plus-n > div:nth-last-child(+n), /** "+n" is special case inside parser. */
.minus-n > div:nth-last-child(-n), /** "-n" is special case inside parser. */
._0n-plus-1 > div:nth-last-child(-0n+1),
.n-plus-2__minus-n-plus-3 > div:nth-last-child(+n + 2 ):nth-last-child( -n+3) {
.n-plus-2__minus-n-plus-3 > div:nth-last-child(+n + 2 ):nth-last-child( -n+3),
.acid3 > div:nth-last-child(-5n+3) {
background-color: lightblue;
}
</style>
@ -136,5 +137,24 @@
<div>4 +</div>
<div>5</div>
</div>
<h4>:nth-last-child(-5n+3) - Acid3</h4>
<div class="acid3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13+</div>
<div>14</div>
<div>15</div>
</div>
</body>
</html>

32
Base/res/html/misc/nth-last-of-type.html
View file

@ -21,7 +21,8 @@
.plus-n > p:nth-last-of-type(+n), /** "+n" is special case inside parser. */
.minus-n > p:nth-last-of-type(-n), /** "-n" is special case inside parser. */
._0n-plus-1 > p:nth-last-of-type(-0n+1),
.n-plus-2__minus-n-plus-3 > p:nth-last-of-type(+n + 2 ):nth-last-of-type( -n+3) {
.n-plus-2__minus-n-plus-3 > p:nth-last-of-type(+n + 2 ):nth-last-of-type( -n+3),
.acid3 > p:nth-last-of-type(-5n+3) {
background-color: lightblue;
}
</style>
@ -171,5 +172,34 @@
<div>(div)</div>
<p>5</p>
</div>
<h4>:nth-last-of-type(-5n+3) - Acid3</h4>
<div class="acid3">
<p>1</p>
<div>(div)</div>
<div>(div)</div>
<p>2</p>
<div>(div)</div>
<p>3</p>
<div>(div)</div>
<div>(div)</div>
<div>(div)</div>
<p>4</p>
<p>5</p>
<p>6</p>
<div>(div)</div>
<p>7</p>
<div>(div)</div>
<div>(div)</div>
<p>8</p>
<div>(div)</div>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13 +</p>
<p>14</p>
<p>15</p>
</div>
</body>
</html>

32
Base/res/html/misc/nth-of-type.html
View file

@ -22,7 +22,8 @@
.plus-n > p:nth-of-type(+n), /** "+n" is special case inside parser. */
.minus-n > p:nth-of-type(-n), /** "-n" is special case inside parser. */
._0n-plus-1 > p:nth-of-type(-0n+1),
.n-plus-2__minus-n-plus-4 > p:nth-of-type(+n + 2 ):nth-of-type( -n+4) {
.n-plus-2__minus-n-plus-4 > p:nth-of-type(+n + 2 ):nth-of-type( -n+4),
.acid3 > p:nth-of-type(-5n+3) {
background-color: lightblue;
}
</style>
@ -172,5 +173,34 @@
<p>4 +</p>
<p>5</p>
</div>
<h4>:nth-of-type(-5n+3) - Acid3</h4>
<div class="acid3">
<p>1</p>
<div>(div)</div>
<div>(div)</div>
<p>2</p>
<div>(div)</div>
<p>3 +</p>
<div>(div)</div>
<div>(div)</div>
<div>(div)</div>
<p>4</p>
<p>5</p>
<p>6</p>
<div>(div)</div>
<p>7</p>
<div>(div)</div>
<div>(div)</div>
<p>8</p>
<div>(div)</div>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
</div>
</body>
</html>