Commit b75f549c authored by Chris Nardi's avatar Chris Nardi Committed by Commit Bot

Upstream CSS selectors tests to WPT

Remove already existing duplicate tests, and upstream a unified version
of currently existing an + b selector parsing tests.

Bug: 818475
Change-Id: Id889175e0d4df27037ee335d23020c213c148b44
Reviewed-on: https://chromium-review.googlesource.com/952078Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Chris Nardi <cnardi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#541774}
parent d67b9327
SUCCESS
Rules from the stylesheet:
#a:nth-child(n-1) { color: green; }
#b:nth-child(n-10) { color: green; }
#g:nth-child(-n-1) { color: green; }
#h:nth-child(-n-10) { color: green; }
#n:nth-child(-n-1) { color: green; }
#o:nth-child(-n+13) { color: green; }
Expected result:
#a:nth-child(n-1) { color: green; }
#b:nth-child(n-10) { color: green; }
#g:nth-child(-n-1) { color: green; }
#h:nth-child(-n-10) { color: green; }
#n:nth-child(-n-1) { color: green; }
#o:nth-child(-n+13) { color: green; }
<head>
<style type="text/css">
#a:nth-child(n-1) { color: green; }
#b:nth-child(n- 10) { color: green; }
#c:nth-child(n- 1 2) { color: green; }
#d:nth-child(n-b1) { color: green; }
#e:nth-child(n-+1) { color: green; }
#f:nth-child(n-1n) { color: green; }
#g:nth-child(-n-1) { color: green; }
#h:nth-child(-n- 10) { color: green; }
#i:nth-child(-n -b1) { color: green; }
#j:nth-child(-1n- b1) { color: green; }
#k:nth-child(-n-13b1) { color: green; }
#l:nth-child(-n-+1) { color: green; }
#m:nth-child(-n+n) { color: green; }
#n:nth-child(-n
- 1) { color: green; }
#o:nth-child(-n
+13) { color: green; }
</style>
<script>
/** Changes the result text font size. */
function runTest()
{
if (window.testRunner)
testRunner.dumpAsText();
var rules = document.styleSheets[0].cssRules;
var text = "";
for (var i = 0; i < rules.length; i++) {
text += rules.item(i).cssText;
text += "\n";
}
document.getElementById("result").appendChild(document.createTextNode(text));
if (document.getElementById("result").firstChild.data === document.getElementById("expected").firstChild.data)
document.getElementById("message").firstChild.data = "SUCCESS";
else
document.getElementById("message").firstChild.data = "FAILURE";
}
</script>
</head>
<body onload="runTest()">
<p id="message">TEST DID NOT COMPLETE</p>
<p>Rules from the stylesheet:</p>
<pre id="result"></pre>
<p>Expected result:</p>
<pre id="expected">#a:nth-child(n-1) { color: green; }
#b:nth-child(n-10) { color: green; }
#g:nth-child(-n-1) { color: green; }
#h:nth-child(-n-10) { color: green; }
#n:nth-child(-n-1) { color: green; }
#o:nth-child(-n+13) { color: green; }
</pre>
</body>
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors: Test parsing of an+b selectors</title>
<link rel="author" title="Chris Nardi" href="mailto:cnardi@chromium.org">
<link rel="help" href="https://drafts.csswg.org/selectors-3/#nth-child-pseudo">
<link rel="help" href="https://drafts.csswg.org/selectors-3/#nth-last-child-pseudo">
<link rel="help" href="https://drafts.csswg.org/selectors-3/#nth-of-type-pseudo">
<link rel="help" href="https://drafts.csswg.org/selectors-3/#nth-last-of-type-pseudo">
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style id="teststyles">
</style>
</head>
<body>
<script>
function add_selector_style(source) {
var style_element = document.getElementById("teststyles");
style_element.firstChild.data = source + "{ font-size: 1em; }";
return style_element.sheet;
}
function assert_selector_serializes_to(source, expected_result) {
test(function() {
var sheet = add_selector_style(source);
assert_equals(sheet.cssRules[0].selectorText, expected_result);
}, source + " should be parsed and serialized correctly");
}
function assert_invalid_selector(source) {
test(function() {
var sheet = add_selector_style(source);
assert_equals(sheet.cssRules[0], undefined);
}, source + " should not parse");
}
function run_tests_on_anplusb_selector(source) {
assert_selector_serializes_to(source + '(1n+0)', source + '(n)');
assert_selector_serializes_to(source + '(n+0)', source + '(n)');
assert_selector_serializes_to(source + '(n)', source + '(n)');
assert_selector_serializes_to(source + '(-n+0)', source + '(-n)');
assert_selector_serializes_to(source + '(-n)', source + '(-n)');
assert_selector_serializes_to(source + '(N)', source + '(n)');
assert_selector_serializes_to(source + '(+n+3)', source + '(n+3)');
assert_selector_serializes_to(source + '( +n + 7 )', source + '(n+7)');
assert_selector_serializes_to(source + '( N- 123)', source + '(n-123)');
assert_selector_serializes_to(source + '(n- 10)', source + '(n-10)');
assert_selector_serializes_to(source + '(-n\n- 1)', source + '(-n-1)');
assert_selector_serializes_to(source + '( 23n\n\n+\n\n123 )', source + '(23n+123)');
assert_invalid_selector(source + '(n- 1 2)');
assert_invalid_selector(source + '(n-b1)');
assert_invalid_selector(source + '(n-+1)');
assert_invalid_selector(source + '(n-1n)');
assert_invalid_selector(source + '(-n -b1)');
assert_invalid_selector(source + '(-1n- b1)');
assert_invalid_selector(source + '(-n-13b1)');
assert_invalid_selector(source + '(-n-+1)');
assert_invalid_selector(source + '(-n+n)');
assert_invalid_selector(source + '(+ 1n)');
assert_invalid_selector(source + '( n +12 3)');
assert_invalid_selector(source + '( 12 n )');
assert_invalid_selector(source + '(+12n-0+1)');
assert_invalid_selector(source + '(+12N -- 1)');
assert_invalid_selector(source + '(+12 N )');
assert_invalid_selector(source + '(+ n + 7)');
}
run_tests_on_anplusb_selector(':nth-child');
run_tests_on_anplusb_selector(':nth-last-child');
run_tests_on_anplusb_selector(':nth-of-type');
run_tests_on_anplusb_selector(':nth-last-of-type');
</script>
</body>
</html>
Test parsing of CSS nth-child tokens.
SUCCESS
Rules from the stylesheet:
#a:nth-child(n) { color: green; }
#b:nth-child(n) { color: green; }
#c:nth-child(n) { color: green; }
#d:nth-child(-n) { color: green; }
#e:nth-child(-n) { color: green; }
#f:nth-child(n) { color: green; }
#g:nth-child(n) { color: green; }
#h:nth-child(n) { color: green; }
#i:nth-child(-n) { color: green; }
#j:nth-child(-n) { color: green; }
#l:nth-child(-n-123) { color: green; }
#m:nth-child(n-123) { color: green; }
#o:nth-child(23n+123) { color: green; }
#t:nth-child(n+3) { color: green; }
#u:nth-child(n+7) { color: green; }
Expected result:
#a:nth-child(n) { color: green; }
#b:nth-child(n) { color: green; }
#c:nth-child(n) { color: green; }
#d:nth-child(-n) { color: green; }
#e:nth-child(-n) { color: green; }
#f:nth-child(n) { color: green; }
#g:nth-child(n) { color: green; }
#h:nth-child(n) { color: green; }
#i:nth-child(-n) { color: green; }
#j:nth-child(-n) { color: green; }
#l:nth-child(-n-123) { color: green; }
#m:nth-child(n-123) { color: green; }
#o:nth-child(23n+123) { color: green; }
#t:nth-child(n+3) { color: green; }
#u:nth-child(n+7) { color: green; }
<head>
<style>
#a:nth-child(1n+0) { color: green; }
#b:nth-child(n+0) { color: green; }
#c:nth-child(n) { color: green; }
#d:nth-child(-n+0) { color: green; }
#e:nth-child(-n) { color: green; }
#f:nth-child(1N+0) { color: green; }
#g:nth-child(N+0) { color: green; }
#h:nth-child(N) { color: green; }
#i:nth-child(-N+0) { color: green; }
#j:nth-child(-N) { color: green; }
#k:nth-child(+ 1n) { color: green; }
#l:nth-child(-1N
-
123 ) { color: green; }
#m:nth-child( N- 123) { color: green; }
#n:nth-child( n +12 3) { color: green; }
#o:nth-child( 23n
+
123 ) { color: green; }
#p:nth-child( 12 n ) { color: green; }
#q:nth-child(+12n-0+1) { color: green; }
#r:nth-child(+12N -- 1) { color: green; }
#s:nth-child(+12 N ) { color: green; }
#t:nth-child(+n+3) { color: green; }
#u:nth-child( +n + 7 ) { color: green; }
#v:nth-child(+ n + 7) { color: green; }
</style>
<script>
/** Changes the result text font size. */
function runTest()
{
if (window.testRunner)
testRunner.dumpAsText();
var rules = document.styleSheets[0].cssRules;
var text = "";
for (var i = 0; i < rules.length; i++) {
text += rules.item(i).cssText;
text += "\n";
}
document.getElementById("result").appendChild(document.createTextNode(text));
if (document.getElementById("result").firstChild.data === document.getElementById("expected").firstChild.data)
document.getElementById("message").firstChild.data = "SUCCESS";
else
document.getElementById("message").firstChild.data = "FAILURE";
}
</script>
</head>
<body onload="runTest()">
<p>Test parsing of CSS nth-child tokens.</p>
<p id="message">TEST DID NOT COMPLETE</p>
<p>Rules from the stylesheet:</p>
<pre id="result"></pre>
<p>Expected result:</p>
<pre id="expected">#a:nth-child(n) { color: green; }
#b:nth-child(n) { color: green; }
#c:nth-child(n) { color: green; }
#d:nth-child(-n) { color: green; }
#e:nth-child(-n) { color: green; }
#f:nth-child(n) { color: green; }
#g:nth-child(n) { color: green; }
#h:nth-child(n) { color: green; }
#i:nth-child(-n) { color: green; }
#j:nth-child(-n) { color: green; }
#l:nth-child(-n-123) { color: green; }
#m:nth-child(n-123) { color: green; }
#o:nth-child(23n+123) { color: green; }
#t:nth-child(n+3) { color: green; }
#u:nth-child(n+7) { color: green; }
</pre>
<script>
</script>
</body>
*
div
div span
div ~ span
div > span
div + span
#temp
div#temp
div.test[title="test"]
.test[title~="test"]
......@@ -19,37 +16,14 @@ div, span > div:hover, a
div span#foo.test div:hover#bar a
:link
:visited
:hover
:active
:focus
:target
:lang(en)
:not(table)
:root
:enabled
:disabled
:checked
:indeterminate
:nth-child(2n+1)
:nth-child(2n)
:nth-child(2n)
:nth-child(2n+1)
:nth-child(-n+6)
:nth-last-child(2n+1)
:nth-last-child(2n)
:nth-last-child(2n)
:nth-last-child(2n+1)
:nth-last-child(-n+6)
:nth-of-type(2n+1)
:nth-of-type(2n)
:nth-of-type(2n)
:nth-of-type(2n+1)
:nth-of-type(-n+6)
:nth-last-of-type(2n+1)
:nth-last-of-type(2n)
:nth-last-of-type(2n)
:nth-last-of-type(2n+1)
:nth-last-of-type(-n+6)
:first-child
:last-child
:first-of-type
......
<html>
<head>
<style>
* { margin: 2px; }
div { margin: 2px; }
div span { margin 2px; }
div ~ span { margin 2px; }
div > span { margin 2px; }
div + span { margin 2px; }
#temp { margin 2px; }
div#temp { margin 2px; }
div.test[title="test"] { margin: 2px; }
.test[title~="test"] { margin: 2px; }
......@@ -23,38 +20,15 @@ div span#foo.test div:hover#bar a { margin: 2px; }
/* Pseudo-classes */
:link{ margin: 2px; }
:visited{ margin: 2px; }
:hover{ margin: 2px; }
:active{ margin: 2px; }
:focus{ margin: 2px; }
:target{ margin: 2px; }
:lang(en){ margin: 2px; }
:not(table){ margin: 2px; }
:root{ margin: 2px; }
:foobarSelectorNotToBePrinted{ color: green; }
:enabled{ margin: 2px; }
:disabled{ margin: 2px; }
:checked{ margin: 2px; }
:indeterminate{ margin: 2px; }
:nth-child(odd){ margin: 2px; }
:nth-child(even){ margin: 2px; }
:nth-child(2n){ margin: 2px; }
:nth-child(2n+1){ margin: 2px; }
:nth-child(-n+6){ margin: 2px; }
:nth-last-child(odd){ margin: 2px; }
:nth-last-child(even){ margin: 2px; }
:nth-last-child(2n){ margin: 2px; }
:nth-last-child(2n+1){ margin: 2px; }
:nth-last-child(-n+6){ margin: 2px; }
:nth-of-type(odd){ margin: 2px; }
:nth-of-type(even){ margin: 2px; }
:nth-of-type(2n){ margin: 2px; }
:nth-of-type(2n+1){ margin: 2px; }
:nth-of-type(-n+6){ margin: 2px; }
:nth-last-of-type(odd){ margin: 2px; }
:nth-last-of-type(even){ margin: 2px; }
:nth-last-of-type(2n){ margin: 2px; }
:nth-last-of-type(2n+1){ margin: 2px; }
:nth-last-of-type(-n+6){ margin: 2px; }
:first-child{ margin: 2px; }
:last-child{ margin: 2px; }
:first-of-type{ margin: 2px; }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment