Update CSS tests to revision 09d27d61d637da536af1d86a8d7bea157592ff9e

This commit is contained in:
Simon Sapin 2015-09-08 11:01:17 +02:00
parent 282f9ade93
commit 5abfa12a4c
234 changed files with 4896 additions and 498 deletions

View file

@ -37,9 +37,9 @@
<a href="css-vars-custom-property-case-sensitive-001.htm">css-vars-custom-property-case-sensitive-001</a></strong></td>
<td><a href="reference/css-vars-custom-property-case-sensitive-ref.htm">=</a> </td>
<td></td>
<td>custom property names start with &quot;var-&quot; in lower case
<td>custom property names are case-sensitive
<ul class="assert">
<li>Custom property names start with var- which must be lower case</li>
<li>Custom property names are case-sensitive</li>
</ul>
</td>
</tr>

View file

@ -1,26 +1,27 @@
<!DOCTYPE html>
<html><head>
<title>CSS Variables Test: custom property names start with "var-" in lower case</title>
<title>CSS Variables Test: custom property names are case-sensitive</title>
<meta charset="UTF-8">
<link href="mailto:noahcollins@gmail.com" rel="author" title="Noah Collins">
<link href="http://www.w3.org/TR/css-variables-1/#using-variables" rel="help">
<meta content="Custom property names start with var- which must be lower case" name="assert">
<meta content="Custom property names are case-sensitive" name="assert">
<link href="reference/css-vars-custom-property-case-sensitive-ref.htm" rel="match">
<style type="text/css">
:root {
/* these should be VALID custom property names */
var-veryblue: #22e;
var-AlsoBlue: #22e;
--veryblue: #22e;
--AlsoBlue: #22e;
/* these should be INVALID custom property names */
VAR-veryred: #f00;
Var-AlsoRed: #f00;
--veryred: #f00;
--AlsoRed: #f00;
}
.blue-good-1 { color: var(veryblue); }
.blue-good-2 { color: var(AlsoBlue); }
.red-bad-1 { color: var(veryred); }
.red-bad-2 { color: var(AlsoRed); }
/* These match the case of the declarations */
.blue-good-1 { color: var(--veryblue); }
.blue-good-2 { color: var(--AlsoBlue); }
/* These DO NOT match the case of the declarations */
.red-bad-1 { color: var(--VeryRed); }
.red-bad-2 { color: var(--alsored); }
</style>
</head>
<body>
@ -32,4 +33,5 @@
<p class="red-bad-1">This paragraph is styled using an invalid CSS Variable name. Fail if red.</p>
<p class="red-bad-2">This paragraph is styled using an invalid CSS Variable name. Fail if red.</p>
</body></html>

View file

@ -9,14 +9,14 @@
<style type="text/css">
/* test cascade importance */
:root { var-color: #1c1 !important; }
:root { var-color: red; }
:root { --color: #1c1 !important; }
:root { --color: red; }
/* test cascade order */
* { color: red; }
/* test cascade order */
* { color: var(color); }
* { color: var(--color); }
</style>
</head>
@ -26,4 +26,5 @@
<p>Green</p>
<p>The test passes if everything is green. Any red means the test failed.</p>
</body></html>

View file

@ -1,23 +1,11 @@
<!DOCTYPE html>
<html><head>
<title>CSS Variables Test: custom property names start with "var-" in lower case</title>
<title>CSS Variables Test: custom property names are case-sensitive</title>
<meta charset="UTF-8">
<link href="mailto:noahcollins@gmail.com" rel="author" title="Noah Collins">
<style type="text/css">
:root {
/* these should be VALID custom property names */
var-veryblue: #22e;
var-AlsoBlue: #22e;
/* these should be INVALID custom property names */
VAR-veryred: #f00;
Var-AlsoRed: #f00;
}
.blue-good-1 { color: var(veryblue); }
.blue-good-2 { color: var(AlsoBlue); }
.red-bad-1 { color: var(veryred); }
.red-bad-2 { color: var(AlsoRed); }
.blue-good-1 { color: #22e; }
.blue-good-2 { color: #22e; }
</style>
</head>
<body>
@ -29,4 +17,5 @@
<p>This paragraph is styled using an invalid CSS Variable name. Fail if red.</p>
<p>This paragraph is styled using an invalid CSS Variable name. Fail if red.</p>
</body></html>

View file

@ -1,4 +1,4 @@
@font-face {
font-family: "Ahem";
src: url(../../../../fonts/Ahem.ttf);
src: url(./Ahem.ttf);
}

View file

@ -1,11 +1,11 @@
@font-face {
--a: MyTestFontName;
font-family: var(--a);
src: url(../../../../fonts/Ahem.ttf);
src: url(./Ahem.ttf);
}
@font-face {
font-family: MyTestFontName2;
src: url(../../../../fonts/Ahem.ttf);
src: url(./Ahem.ttf);
}
#a {
font-family: MyTestFontName;

View file

@ -26,7 +26,7 @@
</thead>
<tbody id="css-vars-custom-property-case-sensitive-001" class="">
<tr>
<td rowspan="1" title="custom property names start with &quot;var-&quot; in lower case">
<td rowspan="1" title="custom property names are case-sensitive">
<a href="css-vars-custom-property-case-sensitive-001.htm">css-vars-custom-property-case-sensitive-001</a></td>
<td><a href="reference/css-vars-custom-property-case-sensitive-ref.htm">=</a> </td>
<td rowspan="1"></td>

View file

@ -1,4 +1,4 @@
@font-face {
font-family: "Ahem";
src: url(../../../../fonts/Ahem.ttf);
src: url(./Ahem.ttf);
}

View file

@ -1,11 +1,11 @@
@font-face {
--a: MyTestFontName;
font-family: var(--a);
src: url(../../../../fonts/Ahem.ttf);
src: url(./Ahem.ttf);
}
@font-face {
font-family: MyTestFontName2;
src: url(../../../../fonts/Ahem.ttf);
src: url(./Ahem.ttf);
}
#a {
font-family: MyTestFontName;

View file

@ -62,13 +62,13 @@ function run() {
function assert_allowed_variable_value(value, description) {
test(function() {
styleText.data = "#test { \n" +
" var-test: red;\n" +
" var-test: " + value + ";\n" +
" --test: red;\n" +
" --test: " + value + ";\n" +
" background-color: red;\n" +
" background-color: var(test);\n" +
" background-color: var(--test);\n" +
"}";
assert_true(initial_cs != red_cs &&
initial_cs == test_cs.backgroundColor);
assert_not_equals(initial_cs, red_cs);
assert_equals(initial_cs, test_cs.backgroundColor);
},
description_to_name(description),
{ assert: "Value allowed within variable: " + description });
@ -77,13 +77,13 @@ function run() {
function assert_disallowed_balanced_variable_value(value, description) {
test(function() {
styleText.data = "#test { \n" +
" var-test: green;\n" +
" var-test: " + value + ";\n" +
" --test: green;\n" +
" --test: " + value + ";\n" +
" background-color: red;\n" +
" background-color: var(test);\n" +
" background-color: var(--test);\n" +
"}";
assert_true(green_cs != red_cs &&
green_cs == test_cs.backgroundColor);
assert_not_equals(green_cs, red_cs);
assert_equals(green_cs, test_cs.backgroundColor);
},
description_to_name(description),
{ assert: "Value not allowed within variable: " + description });

View file

@ -11,11 +11,11 @@
@font-face {
--a: MyTestFontName;
font-family: var(--a);
src: url(../../../fonts/Ahem.ttf);
src: url(support/Ahem.ttf);
}
@font-face {
font-family: MyTestFontName2;
src: url(../../../fonts/Ahem.ttf);
src: url(support/Ahem.ttf);
}
#a {
font-family: MyTestFontName;

View file

@ -13,11 +13,11 @@
}
@font-face {
font-family: var(--a);
src: url(../../../fonts/Ahem.ttf);
src: url(support/Ahem.ttf);
}
@font-face {
font-family: MyTestFontName2;
src: url(../../../fonts/Ahem.ttf);
src: url(support/Ahem.ttf);
}
#a {
font-family: MyTestFontName;