diff options
| author | Sam Atkins <atkinssj@serenityos.org> | 2022-03-17 17:48:53 +0000 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-03-18 11:34:02 +0100 |
| commit | 0e4c35b4b22fce5b045a903d77ff5d4a18b320ab (patch) | |
| tree | bcf973cdd0bc11f7d8ec1dbe68dd05345efef4d2 | |
| parent | f241827f6ae9bca0cde510983a4e562fa48fcf36 (diff) | |
| download | serenity-0e4c35b4b22fce5b045a903d77ff5d4a18b320ab.zip | |
Base: Add `of foo` tests to nth-child and nth-last-child test pages
Also split the selector-list up for easier debugging.
| -rw-r--r-- | Base/res/html/misc/nth-child.html | 74 | ||||
| -rw-r--r-- | Base/res/html/misc/nth-last-child.html | 79 |
2 files changed, 123 insertions, 30 deletions
diff --git a/Base/res/html/misc/nth-child.html b/Base/res/html/misc/nth-child.html index ed1051700b..5413202a09 100644 --- a/Base/res/html/misc/nth-child.html +++ b/Base/res/html/misc/nth-child.html @@ -4,23 +4,57 @@ <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), + .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 > div:nth-child(3n+1 of .special) { + background-color: lightblue; + } </style> </head> <body> @@ -142,7 +176,7 @@ <div class="acid3"> <div>1</div> <div>2</div> - <div>3+</div> + <div>3 +</div> <div>4</div> <div>5</div> <div>6</div> @@ -156,5 +190,15 @@ <div>14</div> <div>15</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> </html> diff --git a/Base/res/html/misc/nth-last-child.html b/Base/res/html/misc/nth-last-child.html index 6c514a0a18..96dec13511 100644 --- a/Base/res/html/misc/nth-last-child.html +++ b/Base/res/html/misc/nth-last-child.html @@ -4,23 +4,58 @@ <title>:nth-last-child test</title> <style> /** We have weird spacing inside parentheses to test parser. */ - .odd > div:nth-last-child(odd ), - ._2n-plus-1 > div:nth-last-child(2n+1), - .even > div:nth-last-child( even), - ._2n > div:nth-last-child( 2n ), - ._3n > div:nth-last-child(3n), - ._2 > div:nth-last-child(2 ), - ._3n-plus-1 > div:nth-last-child( 3n + 1 ), - ._3n-minus-1 > div:nth-last-child( 3n -1), - ._minus-n-plus-3 > div:nth-last-child(-n+ 3), - .n > div:nth-last-child(n), /** "n" is special case inside parser. */ - .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), + .odd > div:nth-last-child(odd ) { + background-color: lightblue; + } + ._2n-plus-1 > div:nth-last-child(2n+1) { + background-color: lightblue; + } + .even > div:nth-last-child( even) { + background-color: lightblue; + } + ._2n > div:nth-last-child( 2n ) { + background-color: lightblue; + } + ._3n > div:nth-last-child(3n) { + 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) { 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> </head> <body> @@ -152,9 +187,23 @@ <div>10</div> <div>11</div> <div>12</div> - <div>13+</div> + <div>13 +</div> <div>14</div> <div>15</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> </html> |