mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update CSS tests to revision 09d27d61d637da536af1d86a8d7bea157592ff9e
This commit is contained in:
parent
282f9ade93
commit
5abfa12a4c
234 changed files with 4896 additions and 498 deletions
|
@ -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 "var-" 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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Binary file not shown.
|
@ -1,4 +1,4 @@
|
|||
@font-face {
|
||||
font-family: "Ahem";
|
||||
src: url(../../../../fonts/Ahem.ttf);
|
||||
src: url(./Ahem.ttf);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 "var-" 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>
|
||||
|
|
BIN
tests/wpt/css-tests/css-variables-1_dev/html/support/Ahem.ttf
Normal file
BIN
tests/wpt/css-tests/css-variables-1_dev/html/support/Ahem.ttf
Normal file
Binary file not shown.
|
@ -1,4 +1,4 @@
|
|||
@font-face {
|
||||
font-family: "Ahem";
|
||||
src: url(../../../../fonts/Ahem.ttf);
|
||||
src: url(./Ahem.ttf);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 });
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue