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

Base: Add of foo tests to nth-child and nth-last-child test pages

Browse source 
Also split the selector-list up for easier debugging.
This commit is contained in:
Sam Atkins 2022-03-17 17:48:53 +00:00 • committed by Andreas Kling
parent f241827f6a
commit 0e4c35b4b2
2 changed files with 123 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,23 +4,57 @@
<title>:nth-child test</title> <title>:nth-child test</title>
<style> <style>
/** We have weird spacing inside parentheses to test parser. */ /** We have weird spacing inside parentheses to test parser. */
.odd > div:nth-child(odd ), .odd > div:nth-child(odd ) {
._2n-plus-1 > div:nth-child(2n+1), background-color: lightblue;
.even > div:nth-child( even), }
._2n > div:nth-child( 2n ), ._2n-plus-1 > div:nth-child(2n+1) {
._3n > div:nth-child(3n), background-color: lightblue;
._2 > div:nth-child(2 ), }
._3n-plus-1 > div:nth-child( 3n + 1 ), .even > div:nth-child( even) {
._3n-minus-1 > div:nth-child( 3n -1), background-color: lightblue;
._minus-n-plus-3 > div:nth-child(-n+ 3), }
.n > div:nth-child(n), /** "n" is special case inside parser. */ ._2n > div:nth-child( 2n ) {
.plus-n > div:nth-child(+n), /** "+n" is special case inside parser. */ background-color: lightblue;
.minus-n > div:nth-child(-n), /** "-n" is special case inside parser. */ }
._0n-plus-1 > div:nth-child(-0n+1), ._3n > div:nth-child(3n) {
.n-plus-2__minus-n-plus-4 > div:nth-child(+n + 2 ):nth-child( -n+4), background-color: lightblue;
}
._2 > div:nth-child(2 ) {
background-color: lightblue;
}
._3n-plus-1 > div:nth-child( 3n + 1 ) {
background-color: lightblue;
}
._3n-minus-1 > div:nth-child( 3n -1) {
background-color: lightblue;
}
._minus-n-plus-3 > div:nth-child(-n+ 3) {
background-color: lightblue;
}
/** "n" is special case inside parser. */
.n > div:nth-child(n) {
background-color: lightblue;
}
/** "+n" is special case inside parser. */
.plus-n > div:nth-child(+n) {
background-color: lightblue;
}
/** "-n" is special case inside parser. */
.minus-n > div:nth-child(-n) {
background-color: lightblue;
}
._0n-plus-1 > div:nth-child(-0n+1) {
background-color: lightblue;
}
.n-plus-2__minus-n-plus-4 > div:nth-child(+n + 2 ):nth-child( -n+4) {
background-color: lightblue;
}
.acid3 > div:nth-child(-5n+3) { .acid3 > div:nth-child(-5n+3) {
background-color: lightblue; background-color: lightblue;
} }
.test-of > div:nth-child(3n+1 of .special) {
background-color: lightblue;
}
</style> </style>
</head> </head>
<body> <body>
@ -142,7 +176,7 @@
<div class="acid3"> <div class="acid3">
<div>1</div> <div>1</div>
<div>2</div> <div>2</div>
<div>3+</div> <div>3 +</div>
<div>4</div> <div>4</div>
<div>5</div> <div>5</div>
<div>6</div> <div>6</div>
@ -156,5 +190,15 @@
<div>14</div> <div>14</div>
<div>15</div> <div>15</div>
</div> </div>
<h4>:nth-child(3n+1 of .special)</h4>
<div class="test-of">
<div class="special">1 +</div>
<div class="special">2</div>
<div>(Ignored)</div>
<div class="special">3</div>
<div>(Ignored)</div>
<div class="special">4 +</div>
</div>
</body> </body>
</html> </html>

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

@ -4,23 +4,58 @@
<title>:nth-last-child test</title> <title>:nth-last-child test</title>
<style> <style>
/** We have weird spacing inside parentheses to test parser. */ /** We have weird spacing inside parentheses to test parser. */
.odd > div:nth-last-child(odd ), .odd > div:nth-last-child(odd ) {
._2n-plus-1 > div:nth-last-child(2n+1), background-color: lightblue;
.even > div:nth-last-child( even), }
._2n > div:nth-last-child( 2n ), ._2n-plus-1 > div:nth-last-child(2n+1) {
._3n > div:nth-last-child(3n), background-color: lightblue;
._2 > div:nth-last-child(2 ), }
._3n-plus-1 > div:nth-last-child( 3n + 1 ), .even > div:nth-last-child( even) {
._3n-minus-1 > div:nth-last-child( 3n -1), background-color: lightblue;
._minus-n-plus-3 > div:nth-last-child(-n+ 3), }
.n > div:nth-last-child(n), /** "n" is special case inside parser. */ ._2n > div:nth-last-child( 2n ) {
.plus-n > div:nth-last-child(+n), /** "+n" is special case inside parser. */ background-color: lightblue;
.minus-n > div:nth-last-child(-n), /** "-n" is special case inside parser. */ }
._0n-plus-1 > div:nth-last-child(-0n+1), ._3n > div:nth-last-child(3n) {
.n-plus-2__minus-n-plus-3 > div:nth-last-child(+n + 2 ):nth-last-child( -n+3), background-color: lightblue;
}
._2 > div:nth-last-child(2 ) {
background-color: lightblue;
}
._3n-plus-1 > div:nth-last-child( 3n + 1 ) {
background-color: lightblue;
}
._3n-minus-1 > div:nth-last-child( 3n -1) {
background-color: lightblue;
}
._minus-n-plus-3 > div:nth-last-child(-n+ 3) {
background-color: lightblue;
}
/** "n" is special case inside parser. */
.n > div:nth-last-child(n) {
background-color: lightblue;
}
/** "+n" is special case inside parser. */
.plus-n > div:nth-last-child(+n) {
background-color: lightblue;
}
/** "-n" is special case inside parser. */
.minus-n > div:nth-last-child(-n) {
background-color: lightblue;
}
._0n-plus-1 > div:nth-last-child(-0n+1) {
background-color: lightblue;
}
.n-plus-2__minus-n-plus-3 > div:nth-last-child(+n + 2 ):nth-last-child( -n+3) {
background-color: lightblue;
}
.acid3 > div:nth-last-child(-5n+3) { .acid3 > div:nth-last-child(-5n+3) {
background-color: lightblue; background-color: lightblue;
} }
/* Separate because only Safari supports this syntax right now */
.test-of > div:nth-last-child(3n+1 of .special) {
background-color: lightblue;
}
</style> </style>
</head> </head>
<body> <body>
@ -152,9 +187,23 @@
<div>10</div> <div>10</div>
<div>11</div> <div>11</div>
<div>12</div> <div>12</div>
<div>13+</div> <div>13 +</div>
<div>14</div> <div>14</div>
<div>15</div> <div>15</div>
</div> </div>
<h4>:nth-last-child(3n+1 of .special)</h4>
<div class="test-of">
<div class="special">1</div>
<div class="special">2</div>
<div>(Ignored)</div>
<div class="special">3 +</div>
<div>(Ignored)</div>
<div class="special">4</div>
<div>(Ignored)</div>
<div>(Ignored)</div>
<div class="special">5</div>
<div class="special">6 +</div>
</div>
</body> </body>
</html> </html>