mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
c914e732d2
When I wrote the An+B parser, it was guaranteed to have no non-whitespace tokens after it. This is no longer true with the `of foo` syntax, so this patch corrects the logic when there is no `+B` segment. This makes this case shown on Twitter work correctly. :^) https://twitter.com/simevidas/status/1506657566012678151
224 lines
4.6 KiB
HTML
224 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>:nth-child test</title>
|
|
<style>
|
|
/** We have weird spacing inside parentheses to test parser. */
|
|
.odd > div:nth-child(odd ) {
|
|
background-color: lightblue;
|
|
}
|
|
._2n-plus-1 > div:nth-child(2n+1) {
|
|
background-color: lightblue;
|
|
}
|
|
.even > div:nth-child( even) {
|
|
background-color: lightblue;
|
|
}
|
|
._2n > div:nth-child( 2n ) {
|
|
background-color: lightblue;
|
|
}
|
|
._3n > div:nth-child(3n) {
|
|
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) {
|
|
background-color: lightblue;
|
|
}
|
|
.test-of-type > div:nth-child(2n of div) {
|
|
background-color: lightblue;
|
|
}
|
|
.test-of > div:nth-child(3n+1 of .special) {
|
|
background-color: lightblue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h4>:nth-child(odd)</h4>
|
|
<div class="odd">
|
|
<div>1 +</div>
|
|
<div>2</div>
|
|
<div>3 +</div>
|
|
<div>4</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(2n+1) - same as odd</h4>
|
|
<div class="_2n-plus-1">
|
|
<div>1 +</div>
|
|
<div>2</div>
|
|
<div>3 +</div>
|
|
<div>4</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(even)</h4>
|
|
<div class="even">
|
|
<div>1</div>
|
|
<div>2 +</div>
|
|
<div>3</div>
|
|
<div>4 +</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(2n) - same as even</h4>
|
|
<div class="_2n">
|
|
<div>1</div>
|
|
<div>2 +</div>
|
|
<div>3</div>
|
|
<div>4 +</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(2)</h4>
|
|
<div class="_2">
|
|
<div>1</div>
|
|
<div>2 +</div>
|
|
<div>3</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(3n)</h4>
|
|
<div class="_3n">
|
|
<div>1</div>
|
|
<div>2</div>
|
|
<div>3 +</div>
|
|
<div>4</div>
|
|
<div>5</div>
|
|
<div>6 +</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(3n+1)</h4>
|
|
<div class="_3n-plus-1">
|
|
<div>1 +</div>
|
|
<div>2</div>
|
|
<div>3</div>
|
|
<div>4 +</div>
|
|
<div>5</div>
|
|
<div>6</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(3n-1)</h4>
|
|
<div class="_3n-minus-1">
|
|
<div>1</div>
|
|
<div>2 +</div>
|
|
<div>3</div>
|
|
<div>4</div>
|
|
<div>5 +</div>
|
|
<div>6</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(-n+3)</h4>
|
|
<div class="_minus-n-plus-3">
|
|
<div>1 +</div>
|
|
<div>2 +</div>
|
|
<div>3 +</div>
|
|
<div>4</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(n)</h4>
|
|
<div class="n">
|
|
<div>1 +</div>
|
|
<div>2 +</div>
|
|
<div>3 +</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(-n) - same as n</h4>
|
|
<div class="n">
|
|
<div>1 +</div>
|
|
<div>2 +</div>
|
|
<div>3 +</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(+n) - same as n</h4>
|
|
<div class="n">
|
|
<div>1 +</div>
|
|
<div>2 +</div>
|
|
<div>3 +</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(0n+1)</h4>
|
|
<div class="_0n-plus-1">
|
|
<div>1 +</div>
|
|
<div>2</div>
|
|
<div>3</div>
|
|
</div>
|
|
|
|
<h4>:nth-child(n+2):nth-child(-n+4)</h4>
|
|
<div class="n-plus-2__minus-n-plus-4">
|
|
<div>1</div>
|
|
<div>2 +</div>
|
|
<div>3 +</div>
|
|
<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>
|
|
|
|
<h4>:nth-child(2n of div)</h4>
|
|
<div class="test-of-type">
|
|
<div>1</div>
|
|
<p>Paragraph</p>
|
|
<div>2 +</div>
|
|
<p>Paragraph</p>
|
|
<div>3</div>
|
|
<p>Paragraph</p>
|
|
<div>4 +</div>
|
|
<p>Paragraph</p>
|
|
<div>5</div>
|
|
<p>Paragraph</p>
|
|
<div>6 +</div>
|
|
<p>Paragraph</p>
|
|
</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>
|
|
</html>
|