0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Browser: Add :nth-child test document

Browse source
This commit is contained in:
miere43 2021-05-08 23:19:04 +03:00 • committed by Andreas Kling
parent aa83539d7b
commit c5ceff33b5
Notes: sideshowbarker 2024-07-18 18:27:47 +09:00
2 changed files with 141 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
Base/res/html/misc/nth-child.html Normal file
View file

@ -0,0 +1,140 @@
<!DOCTYPE html>
<html>
<head>
<title>:nth-child test</title>
<style>
/** We have weird spacing inside parentheses to test parser. */
.odd > div:nth-child(odd ),
._2n-plus-1 > div:nth-child(2n+1),
.even > div:nth-child( even),
._2n > div:nth-child( 2n ),
._3n > div:nth-child(3n),
._2 > div:nth-child(2 ),
._3n-plus-1 > div:nth-child( 3n + 1 ),
._3n-minus-1 > div:nth-child( 3n -1),
._minus-n-plus-3 > div:nth-child(-n+ 3),
.n > div:nth-child(n), /** "n" is special case inside parser. */
.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) {
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>
</body>
</html>

1
Base/res/html/misc/welcome.html
View file

@ -91,6 +91,7 @@ span#loadtime {
<li><a href="first-child.html">:first-child</a></li>
<li><a href="last-child.html">:last-child</a></li>
<li><a href="only-child.html">:only-child</a></li>
<li><a href="nth-child.html">:nth-child</a></li>
<li><a href="empty.html">:empty</a></li>
<li><a href="root.html">:root</a></li>
<li><a href="form.html">form</a></li>