diff options
| author | miere43 <x.miere@gmail.com> | 2021-05-08 23:19:04 +0300 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2021-05-09 11:24:04 +0200 |
| commit | c5ceff33b592bde723de31d5a146c527f76ff499 (patch) | |
| tree | 08e92d5cf8ee312d8b36c5f67268a37614ef4c08 /Base/res | |
| parent | aa83539d7bc777ac309c0f637ca1a5c6c890967c (diff) | |
| download | serenity-c5ceff33b592bde723de31d5a146c527f76ff499.zip | |
Browser: Add :nth-child test document
Diffstat (limited to 'Base/res')
| -rw-r--r-- | Base/res/html/misc/nth-child.html | 140 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 141 insertions, 0 deletions
diff --git a/Base/res/html/misc/nth-child.html b/Base/res/html/misc/nth-child.html new file mode 100644 index 0000000000..c5e6492dcb --- /dev/null +++ b/Base/res/html/misc/nth-child.html @@ -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> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index e3d3a1d939..4a6d107269 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -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> |