mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
4
tests/wpt/web-platform-tests/css/css-variables-1/OWNERS
Normal file
4
tests/wpt/web-platform-tests/css/css-variables-1/OWNERS
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@dbaron
|
||||
@svgeesus
|
||||
@SimonSapin
|
||||
@tabatkins
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables Test: custom property names are case-sensitive</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="author" title="Noah Collins" href="mailto:noahcollins@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
|
||||
<meta name="assert" content="Custom property names are case-sensitive">
|
||||
<link rel="match" href="reference/css-vars-custom-property-case-sensitive-ref.html">
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--veryblue: #22e;
|
||||
--AlsoBlue: #22e;
|
||||
|
||||
--veryred: #f00;
|
||||
--AlsoRed: #f00;
|
||||
}
|
||||
|
||||
/* 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>
|
||||
<h2 class="blue-good-1">Valid CSS Variable Names</h2>
|
||||
<p class="blue-good-1">This paragraph is styled using a valid CSS Variable name. It should be blue.</p>
|
||||
<p class="blue-good-2">This paragraph is styled using a valid CSS Variable name. It should be blue.</p>
|
||||
<br>
|
||||
<h2 class="red-bad-1">Invalid CSS Variable Names</h2>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Variables Test: custom properties use normal inheritance and cascade rules</title>
|
||||
<link rel="author" title="Noah Collins" href="mailto:noahcollins@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
|
||||
<meta name="assert" content="custom properties are resolved with the normal inheritance and cascade rules">
|
||||
<link rel="match" href="reference/css-vars-custom-property-inheritance-ref.html">
|
||||
<style type="text/css">
|
||||
|
||||
/* test cascade importance */
|
||||
:root { --color: #1c1 !important; }
|
||||
:root { --color: red; }
|
||||
|
||||
/* test cascade order */
|
||||
* { color: red; }
|
||||
|
||||
/* test cascade order */
|
||||
* { color: var(--color); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Green</p>
|
||||
<p>Green</p>
|
||||
<p>Green</p>
|
||||
<p>The test passes if everything is green. Any red means the test failed.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables Test: custom property names are case-sensitive</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="author" title="Noah Collins" href="mailto:noahcollins@gmail.com">
|
||||
<style type="text/css">
|
||||
.blue-good-1 { color: #22e; }
|
||||
.blue-good-2 { color: #22e; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2 class="blue-good-1">Valid CSS Variable Names</h2>
|
||||
<p class="blue-good-1">This paragraph is styled using a valid CSS Variable name. It should be blue.</p>
|
||||
<p class="blue-good-2">This paragraph is styled using a valid CSS Variable name. It should be blue.</p>
|
||||
<br>
|
||||
<h2>Invalid CSS Variable Names</h2>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Variables Test: custom properties use normal inheritance and cascade rules</title>
|
||||
<link rel="author" title="Noah Collins" href="mailto:noahcollins@gmail.com">
|
||||
<style type="text/css">
|
||||
* { color: #1c1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Green</p>
|
||||
<p>Green</p>
|
||||
<p>Green</p>
|
||||
<p>The test passes if everything is green. Any red means the test failed.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Variable reference without whitespace - reference</title>
|
||||
<link rel=author title="Simon Sapin" href=http://exyr.org/about/>
|
||||
<p>The next four lines must be identical, containing only zeroes:
|
||||
<p>0 0 0
|
||||
<p>0 0 0
|
||||
<p>0 0 0
|
||||
<p>0 0 0
|
||||
|
||||
<p>The next four lines must be identical, containing increasing integers:
|
||||
<p>1 2 3
|
||||
<p>1 2 3
|
||||
<p>1 2 3
|
||||
<p>1 2 3
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Variables 1: Test variables in background shorthand.</title>
|
||||
<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 50px;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see four green squares, and no red.</p>
|
||||
<div id="d1"></div>
|
||||
<div id="d2"></div>
|
||||
<div id="d3"></div>
|
||||
<div id="d4"></div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title>
|
||||
<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
div {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background: green;
|
||||
text-align: center;
|
||||
color: green;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
<p>Test passes if you see six green squares, and no red.</p>
|
||||
<div id="d1">X</div>
|
||||
<div id="d2">X</div>
|
||||
<div id="d3">X</div>
|
||||
<div id="d4">X</div>
|
||||
<div id="d5">X</div>
|
||||
<div id="d6">X</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables Allowed Syntax</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
|
||||
<meta name="assert" content='The <value> type used in the syntax above is defined as anything matching the "value" production in CSS 2.1 Chapter 4.1 [CSS21].'>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style id="style"></style>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"percentage": { "assert": "Value allowed within variable: percentage" },
|
||||
"number": { "assert": "Value allowed within variable: number" },
|
||||
"length": { "assert": "Value allowed within variable: length" },
|
||||
"time": { "assert": "Value allowed within variable: time" },
|
||||
"function": { "assert": "Value allowed within variable: function" },
|
||||
"nested_function": { "assert": "Value allowed within variable: nested function" },
|
||||
"parentheses": { "assert": "Value allowed within variable: parentheses" },
|
||||
"braces": { "assert": "Value allowed within variable: braces" },
|
||||
"brackets": { "assert": "Value allowed within variable: brackets" },
|
||||
"at_keyword_unknown": { "assert": "Value allowed within variable: at-keyword (unknown)" },
|
||||
"at_keyword_known": { "assert": "Value allowed within variable: at-keyword (known)" },
|
||||
"at_keyword_unknown_and_block": { "assert": "Value allowed within variable: at-keyword (unknown) and block" },
|
||||
"at_keyword_known_and_block": { "assert": "Value allowed within variable: at-keyword (known) and block" },
|
||||
"unbalanced_close_bracket_at_toplevel": { "assert": "Value not allowed within variable: unbalanced close bracket at toplevel" },
|
||||
"unbalanced_close_paren_at_toplevel": { "assert": "Value not allowed within variable: unbalanced close paren at toplevel" },
|
||||
"unbalanced_close_bracket_in_something_balanced": { "assert": "Value not allowed within variable: unbalanced close bracket in something balanced" },
|
||||
"unbalanced_close_paren_in_something_balanced": { "assert": "Value not allowed within variable: unbalanced close paren in something balanced" },
|
||||
"unbalanced_close_brace_in_something_balanced": { "assert": "Value not allowed within variable: unbalanced close brace in something balanced" },
|
||||
"CDO_at_top_level": { "assert": "Value allowed within variable: CDO at top level" },
|
||||
"CDC_at_top_level": { "assert": "Value allowed within variable: CDC at top level" },
|
||||
"semicolon_not_at_top_level_value_unused": { "assert": "Value allowed within variable: semicolon not at top level (value -> unused)" },
|
||||
"CDO_not_at_top_level_value_unused": { "assert": "Value allowed within variable: CDO not at top level (value -> unused)" },
|
||||
"CDC_not_at_top_level_value_unused": { "assert": "Value allowed within variable: CDC not at top level (value -> unused)" }
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<div id=log></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
setup({ "explicit_done": true });
|
||||
|
||||
function run() {
|
||||
// Setup the iframe
|
||||
var style = document.getElementById("style");
|
||||
var styleText = document.createTextNode("");
|
||||
style.appendChild(styleText);
|
||||
var test_cs = window.getComputedStyle(document.getElementById("test"), "");
|
||||
|
||||
var initial_cs = test_cs.backgroundColor;
|
||||
styleText.data = "#test { background-color: green }";
|
||||
var green_cs = test_cs.backgroundColor;
|
||||
styleText.data = "#test { background-color: red }";
|
||||
var red_cs = test_cs.backgroundColor;
|
||||
|
||||
function description_to_name(description) {
|
||||
return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, "");
|
||||
}
|
||||
|
||||
function assert_allowed_variable_value(value, description) {
|
||||
test(function() {
|
||||
styleText.data = "#test { \n" +
|
||||
" --test: red;\n" +
|
||||
" --test: " + value + ";\n" +
|
||||
" background-color: red;\n" +
|
||||
" background-color: var(--test);\n" +
|
||||
"}";
|
||||
assert_not_equals(initial_cs, red_cs);
|
||||
assert_equals(initial_cs, test_cs.backgroundColor);
|
||||
},
|
||||
description_to_name(description),
|
||||
{ assert: "Value allowed within variable: " + description });
|
||||
}
|
||||
|
||||
function assert_disallowed_balanced_variable_value(value, description) {
|
||||
test(function() {
|
||||
styleText.data = "#test { \n" +
|
||||
" --test: green;\n" +
|
||||
" --test: " + value + ";\n" +
|
||||
" background-color: red;\n" +
|
||||
" background-color: var(--test);\n" +
|
||||
"}";
|
||||
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 });
|
||||
}
|
||||
|
||||
assert_allowed_variable_value("25%", "percentage");
|
||||
assert_allowed_variable_value("37", "number");
|
||||
assert_allowed_variable_value("12em", "length");
|
||||
assert_allowed_variable_value("75ms", "time");
|
||||
assert_allowed_variable_value("foo()", "function");
|
||||
assert_allowed_variable_value("foo(bar())", "nested function");
|
||||
assert_allowed_variable_value("( )", "parentheses");
|
||||
assert_allowed_variable_value("{ }", "braces");
|
||||
assert_allowed_variable_value("[ ]", "brackets");
|
||||
assert_allowed_variable_value("@foobar", "at-keyword (unknown)");
|
||||
assert_allowed_variable_value("@media", "at-keyword (known)");
|
||||
assert_allowed_variable_value("@foobar {}", "at-keyword (unknown) and block");
|
||||
assert_allowed_variable_value("@media {}", "at-keyword (known) and block");
|
||||
assert_disallowed_balanced_variable_value("]", "unbalanced close bracket at toplevel");
|
||||
assert_disallowed_balanced_variable_value(")", "unbalanced close paren at toplevel");
|
||||
assert_disallowed_balanced_variable_value("(])", "unbalanced close bracket in something balanced");
|
||||
assert_disallowed_balanced_variable_value("[)]", "unbalanced close paren in something balanced");
|
||||
assert_disallowed_balanced_variable_value("(})", "unbalanced close brace in something balanced");
|
||||
assert_allowed_variable_value("<!--", "CDO at top level");
|
||||
assert_allowed_variable_value("-->", "CDC at top level");
|
||||
assert_allowed_variable_value("(;)", "semicolon not at top level (value -> unused)");
|
||||
assert_allowed_variable_value("(<!--)", "CDO not at top level (value -> unused)");
|
||||
assert_allowed_variable_value("(-->)", "CDC not at top level (value -> unused)");
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Variable reference without whitespace</title>
|
||||
<link rel=match href=reference/variable-reference-without-whitespace-ref.html>
|
||||
<link rel=help href=http://www.w3.org/TR/css-variables-1/#syntax>
|
||||
<link rel=author title="Simon Sapin" href=http://exyr.org/about/>
|
||||
<meta rel=assert content="
|
||||
A variable reference followed by something without whitespace in between
|
||||
must not be interpreted together as a single identifier.
|
||||
Custom property values are sequences of tokens, not strings.">
|
||||
<style>
|
||||
p {
|
||||
counter-reset: -- --a -a;
|
||||
--dash:-;
|
||||
}
|
||||
|
||||
#test_1 span::before {
|
||||
counter-increment: var(--dash)-;
|
||||
content: counter(--);
|
||||
}
|
||||
#test_2 span::before {
|
||||
counter-increment: var(--dash)-a;
|
||||
content: counter(--a);
|
||||
}
|
||||
#test_3 span::before {
|
||||
counter-increment: var(--dash)a;
|
||||
content: counter(-a);
|
||||
}
|
||||
|
||||
#control_1 span::before {
|
||||
counter-increment: --;
|
||||
content: counter(--);
|
||||
}
|
||||
#control_2 span::before {
|
||||
counter-increment: --a;
|
||||
content: counter(--a);
|
||||
}
|
||||
#control_3 span::before {
|
||||
counter-increment: -a;
|
||||
content: counter(-a);
|
||||
}
|
||||
</style>
|
||||
<p>The next four lines must be identical, containing only zeroes:
|
||||
<p id="test_1"><span></span> <span></span> <span></span>
|
||||
<p id="test_2"><span></span> <span></span> <span></span>
|
||||
<p id="test_3"><span></span> <span></span> <span></span>
|
||||
<p>0 0 0
|
||||
|
||||
<p>The next four lines must be identical, containing increasing integers:
|
||||
<p id="control_1"><span></span> <span></span> <span></span>
|
||||
<p id="control_2"><span></span> <span></span> <span></span>
|
||||
<p id="control_3"><span></span> <span></span> <span></span>
|
||||
<p>1 2 3
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Variables 1: Test variables in background shorthand.</title>
|
||||
<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
|
||||
<link rel="match" href="reference/vars-background-shorthand-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 50px;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
background: red;
|
||||
}
|
||||
|
||||
div#d1 {
|
||||
--foo: green;
|
||||
background: var(--foo);
|
||||
}
|
||||
|
||||
div#d2 {
|
||||
--foo: green, green;
|
||||
background: linear-gradient(var(--foo));
|
||||
}
|
||||
|
||||
div#d3 {
|
||||
--foo: linear-gradient(green, green);
|
||||
background: var(--foo);
|
||||
}
|
||||
|
||||
div#d4 {
|
||||
--foo: center / 0 0;
|
||||
background: green linear-gradient(red, red) var(--foo, );
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see four green squares, and no red.</p>
|
||||
<div id="d1"></div>
|
||||
<div id="d2"></div>
|
||||
<div id="d3"></div>
|
||||
<div id="d4"></div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables Test: Set border shorthand and serialize border-*</title>
|
||||
<link rel="author" title="Kevin Babbitt" href="kbabbitt@microsoft.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
|
||||
<meta name="assert" content="Pending-substitution values must be serialized as the empty string, if an API allows them to be observed.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test" style="border: var(--border)"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("test").style.getPropertyValue("border-color"), "");
|
||||
}, "border-color should serialize to the empty string when border references a variable");
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("test").style.getPropertyValue("border-style"), "");
|
||||
}, "border-style should serialize to the empty string when border references a variable");
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("test").style.getPropertyValue("border-width"), "");
|
||||
}, "border-width should serialize to the empty string when border references a variable");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title>
|
||||
<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
|
||||
<link rel="match" href="reference/vars-font-shorthand-001-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
src: url(https://cdn.rawgit.com/w3c/csswg-test/master/fonts/ahem/ahem.ttf);
|
||||
}
|
||||
|
||||
div {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background: red;
|
||||
text-align: center;
|
||||
color: green;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div#d1 {
|
||||
--foo: Ahem;
|
||||
font-family: var(--foo);
|
||||
font-size: 150px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
div#d2 {
|
||||
--foo: 0 Ahem;
|
||||
font: var(--foo);
|
||||
font-size: 150px;
|
||||
line-height: 150px;
|
||||
}
|
||||
|
||||
div#d3 {
|
||||
--foo: Ahem, sans-serif;
|
||||
font: 150px/1 var(--foo);
|
||||
}
|
||||
|
||||
div#d4 {
|
||||
--foo: Ahem;
|
||||
font: 150px/1 var(--foo), sans-serif;
|
||||
}
|
||||
|
||||
div#d5 {
|
||||
--foo: 1 Ahem;
|
||||
font: 150px/var(--foo);
|
||||
}
|
||||
|
||||
div#d6 {
|
||||
--foo: 150px/1 Ahem;
|
||||
font: var(--foo);
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see six green squares, and no red.</p>
|
||||
<div id="d1">X</div>
|
||||
<div id="d2">X</div>
|
||||
<div id="d3">X</div>
|
||||
<div id="d4">X</div>
|
||||
<div id="d5">X</div>
|
||||
<div id="d6">X</div>
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue