Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 06:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'

Browse source
This commit is contained in:
WPT Sync Bot 2021-09-07 11:16:33 +00:00 • committed by cybai
parent 35e95f55a1
commit 58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
Download patch file Download diff file Expand all files Collapse all files

4
tests/wpt/web-platform-tests/css/css-variables/css-variable-change-style-001.html
View file

@ -58,8 +58,8 @@
initializeStyles();
inner.style.cssText = testcase.property + ': var(--x)';
testcase.values.forEach(function (value) {
outer.style.cssText = "--x:" + value.outer;
inbetween.style.cssText = "--x:" + value.inbetween;
outer.style.cssText = value.outer ? "--x:" + value.outer : "";
inbetween.style.cssText = value.inbetween ? "--x:" + value.inbetween : "";
let computedStyle = getComputedStyle(inner);
let actualValue = computedStyle.getPropertyValue(testcase.property);
assert_equals(actualValue, value.expected, value.Id);

34
tests/wpt/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html
View file

@ -6,32 +6,26 @@
<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">
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
<style type="text/css">
:root {
--veryblue: #22e;
--AlsoBlue: #22e;
--lowercasegreen: green;
--MixedCaseGreen: green;
--veryred: #f00;
--AlsoRed: #f00;
--lowercasered: red;
--MixedCaseRed: red;
}
div {
width: 100px;
height: 25px;
}
/* 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>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="background-color: var(--lowercasegreen, red);"></div>
<div style="background-color: var(--MixedCaseGreen, red);"></div>
<div style="background-color: var(--LowerCaseRed, green);"></div>
<div style="background-color: var(--mixedcasered, green);"></div>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance.html
View file

@ -6,25 +6,25 @@
<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">
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
<style type="text/css">
/* test cascade importance */
:root { --color: #1c1 !important; }
:root { --color: red; }
:root { --color-1: green !important; }
:root { --color-1: red; }
div.color1 { background-color: var(--color-1); }
/* test cascade order */
* { color: red; }
/* test cascade order */
* { color: var(--color); }
:root { --color-2: green; }
div.color2 { background-color: red; }
div.color2 { background-color: var(--color-2); }
div { width: 100px; height: 50px; }
</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>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class=color1></div>
<div class=color2></div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-variables/reference/css-vars-custom-property-case-sensitive-ref.html
View file

@ -1,21 +0,0 @@
<!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>

17
tests/wpt/web-platform-tests/css/css-variables/reference/css-vars-custom-property-inheritance-ref.html
View file

@ -1,17 +0,0 @@
<!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>

419
tests/wpt/web-platform-tests/css/css-variables/variable-cycles.html Normal file
View file

@ -0,0 +1,419 @@
<!DOCTYPE html>
<meta charset="utf8">
<title>Test that custom property cycles behave correctly</title>
<link rel="help" href="https://drafts.csswg.org/css-variables/#cycles">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<main id=main></main>
<script>
// Test that, for the given list of |declarations|, the computed values
// of properties listed in |expected_invalid| are invalid (i.e. empty string),
// and the computed values listed in |expected_valid| are *not* invalid
// (i.e. not the empty string).
function test_cycles(declarations, expected_invalid, expected_valid, description) {
test(() => {
let element = document.createElement('div');
try {
declarations.push('--sanity:valid');
element.style = declarations.join(';');
main.append(element);
let cs = getComputedStyle(element);
for (let e of expected_invalid)
assert_equals(cs.getPropertyValue(e), '', `${e}`);
for (let e of expected_valid)
assert_not_equals(cs.getPropertyValue(e), '', `${e}`);
assert_equals(cs.getPropertyValue('--sanity'), 'valid', '--sanity');
} finally {
element.remove();
}
}, description);
}
// (Diagrams produced with graph-easy).
// ┌───┐
// │ │ ───┐
// │ a │ │
// │ │ ◀──┘
// └───┘
test_cycles(
['--a:var(--a)'],
['--a'],
[],
'Self-cycle');
// ┌───┐
// │ a │ ◀┐
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ b │ ─┘
// └───┘
test_cycles(
[
'--a:var(--b)',
'--b:var(--a)',
],
['--a', '--b'],
[],
'Simple a/b cycle');
// ┌───┐
// │ a │ ◀┐
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ b │ │
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ c │ ─┘
// └───┘
test_cycles(
[
'--a:var(--b, cycle)',
'--b:var(--c, cycle)',
'--c:var(--a, cycle)',
],
['--a', '--b', '--c'],
[],
'Three-var cycle');
// ┌───┐
// │ x │
// └───┘
// │
// │
// ▼
// ┌───┐
// │ y │
// └───┘
// │
// │
// ▼
// ┌───┐
// │ a │ ◀┐
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ b │ │
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ c │ ─┘
// └───┘
test_cycles(
[
'--x:var(--y, valid)',
'--y:var(--a, valid)',
'--a:var(--b, cycle)',
'--b:var(--c, cycle)',
'--c:var(--a, cycle)',
],
['--a', '--b', '--c'],
['--x', '--y'],
'Cycle that starts in the middle of a chain');
// ┌───┐
// │ x │
// └───┘
// │
// │
// ▼
// ┌───┐
// │ a │ ◀┐
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ b │ │
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ c │ ─┘
// └───┘
// │
// │
// ▼
// ┌───┐
// │ y │
// └───┘
test_cycles(
[
'--x:var(--a, valid)',
'--a:var(--b, cycle)',
'--b:var(--c, cycle)',
'--c:var(--a, cycle) var(--y)',
'--y:valid'
],
['--a', '--b', '--c'],
['--x', '--y'],
'Cycle with extra edge');
// ┌───┐
// │ x │
// └───┘
// │
// │
// ▼
// ┌───┐
// │ a │ ◀┐
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ ┌───┐ │
// │ y │ ◀── │ b │ │
// └───┘ └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ c │ ─┘
// └───┘
test_cycles(
[
'--x:var(--a, valid)',
'--a:var(--b, cycle)',
'--b:var(--c, cycle) var(--y)',
'--c:var(--a, cycle)',
'--y:valid'
],
['--a', '--b', '--c'],
['--x', '--y'],
'Cycle with extra edge (2)');
// ┌───┐
// │ x │
// └───┘
// │
// │
// ▼
// ┌───┐
// │ a │ ◀┐
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ b │ │
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ c │ ─┘
// └───┘
// │
// │
// ▼
// ┌───┐
// │ y │
// └───┘
// │
// │
// ▼
// ┌───┐
// │ z │
// └───┘
test_cycles(
[
'--x:var(--a, valid)',
'--a:var(--b, cycle)',
'--b:var(--c, cycle)',
'--c:var(--a, cycle) var(--y)',
'--y:var(--z)',
'--z:valid'
],
['--a', '--b', '--c'],
['--x', '--y', '--z'],
'Cycle with extra edge (3)');
// ┌───┐
// │ x │
// └───┘
// │
// │
// ▼
// ┌───┐
// │ a │ ◀┐
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// ┌▶ │ b │ ─┘
// │ └───┘
// │ │
// │ │
// │ ▼
// │ ┌───┐
// │ │ c │
// │ └───┘
// │ │
// │ │
// │ ▼
// │ ┌───┐
// └─ │ d │
// └───┘
test_cycles(
[
'--x:var(--a, valid)',
'--a:var(--b, cycle)',
'--b:var(--c, cycle) var(--a, cycle)',
'--c:var(--d, cycle)',
'--d:var(--b, cycle)',
],
['--a', '--b', '--c', '--d'],
['--x'],
'Cycle with secondary cycle');
// ┌───┐
// │ x │
// └───┘
// │
// │
// ▼
// ┌───┐
// │ a │ ◀┐
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// ┌▶ │ b │ │
// │ └───┘ │
// │ │ │
// │ │ │
// │ ▼ │
// │ ┌───┐ │
// │ │ c │ ─┘
// │ └───┘
// │ │
// │ │
// │ ▼
// │ ┌───┐
// └─ │ d │
// └───┘
// │
// │
// ▼
// ┌───┐
// │ y │
// └───┘
test_cycles(
[
'--x:var(--a, valid)',
'--a:var(--b, cycle)',
'--b:var(--c, cycle)',
'--c:var(--d, cycle) var(--a, cycle)',
'--d:var(--b, cycle) var(--y)',
'--y:valid'
],
['--a', '--b', '--c', '--d'],
['--x', '--y'],
'Cycle with overlapping secondary cycle');
// ┌──────────────┐
// │ │
// │ ┌───┐ │
// │ │ x │ │
// │ └───┘ │
// │ │ │
// │ │ │
// │ ▼ ▼
// ┌───┐ ┌────────┐ ┌───┐
// │ b │ ◀── │ a │ ──▶ │ y │
// └───┘ └────────┘ └───┘
// │ ▲
// │ │
// ▼ │
// ┌───┐ │
// │ c │ │
// └───┘ │
// │ │
// │ │
// ▼ │
// ┌───┐ │
// │ d │ ─┘
// └───┘
test_cycles(
[
'--x:var(--a, valid)',
'--a:var(--b, cycle) var(--y, valid) var(--c, cycle)',
'--b:var(--a, cycle) ',
'--c:var(--d, cycle)',
'--d:var(--a, cycle)',
'--y:valid',
],
['--a', '--b', '--c', '--d'],
['--x', '--y'],
'Cycle with deeper secondary cycle');
// ┌───┐
// │ x │
// └───┘
// │
// │
// ▼
// ┌───┐
// ┌─────▶ │ a │ ─┐
// │ └───┘ │
// │ │ │
// │ │ │
// │ ▼ │
// │ ┌───┐ │
// │ ┌─ │ b │ │
// │ │ └───┘ │
// │ │ │ │
// │ │ │ │
// │ │ ▼ │
// │ │ ┌───┐ │
// └────┼─ │ c │ │
// │ └───┘ │
// │ │ │
// │ │ │
// │ ▼ │
// │ ┌───┐ │
// └▶ │ y │ ◀┘
// └───┘
test_cycles(
[
'--x:var(--a, valid)',
'--a:var(--y, var(--b, cycle))',
'--b:var(--y, var(--c, cycle))',
'--c:var(--y, var(--a, cycle))',
'--y:valid'
],
['--a', '--b', '--c'],
['--x', '--y'],
'Cycle via fallback');
</script>

6
tests/wpt/web-platform-tests/css/css-variables/variable-declaration-07.html
View file

@ -3,15 +3,15 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having no tokens in its fallback.</title>
<title>CSS Test: Test declaring a variable with valid syntax due to a variable reference having no tokens in its fallback.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
p {
color: red;
--a: green;
--b: crimson;
--a: crimson;
--b: green;
--a: var(--b,);
color: var(--a);
}

6
tests/wpt/web-platform-tests/css/css-variables/variable-declaration-09.html
View file

@ -3,15 +3,15 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having only a comment in its fallback.</title>
<title>CSS Test: Test declaring a variable with a variable reference having only a comment in its fallback.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
p {
color: red;
--a: green;
--b: crimson;
--a: crimson;
--b: green;
--a: var(--b,/**/);
color: var(--a);
}

6
tests/wpt/web-platform-tests/css/css-variables/variable-declaration-24.html
View file

@ -16,10 +16,10 @@ p {
}
p {
color: orange;
--a: green;
--a: red;
--b: crimson;
--a: var(--b) <!--;
color: var(--a);
--a: var(--b) <!--; /* valid at parse */
color: var(--a); /* but IACVT at substitution */
}
</style>
<p>This text must be green.</p>

6
tests/wpt/web-platform-tests/css/css-variables/variable-declaration-25.html
View file

@ -16,10 +16,10 @@ p {
}
p {
color: orange;
--a: green;
--a: red;
--b: crimson;
--a: --> var(--b);
color: var(--a);
--a: --> var(--b); /* valid at parse */
color: var(--a); /* but IACVT at substitution */
}
</style>
<p>This text must be green.</p>

21
tests/wpt/web-platform-tests/css/css-variables/variable-declaration-28.html
View file

@ -1,21 +0,0 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable with invalid syntax due to having no tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
p {
color: red;
}
p {
color: orange;
--a: green;
--a:;
color: var(--a);
}
</style>
<p>This text must be green.</p>

9
tests/wpt/web-platform-tests/css/css-variables/variable-declaration-29.html
View file

@ -3,17 +3,14 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable with a valid custom property name "--".</title>
<title>CSS Test: Test declaring a variable with an invalid custom property name "--".</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
p {
color: red;
}
p {
color: orange;
--: green;
color: green;
--: red;
color: var(--,crimson);
}
</style>

14
tests/wpt/web-platform-tests/css/css-variables/variable-definition.html
View file

@ -22,20 +22,20 @@
{ varName:"--var", expectedValue:"value", style:"--var:value", testName:"variable"},
{ varName:"--v", expectedValue:"value", style:"--v:value", testName:"single char variable"},
{ varName:"---", expectedValue:"value", style:"---:value", testName:"single char '-' variable"},
{ varName:"--", expectedValue:"value", style:"--:value", testName:"no char variable"},
{ varName:"--var", expectedValue:" ", style:"--var: ", testName:"white space value (single space)"},
{ varName:"--var", expectedValue:" ", style:"--var: ", testName:"white space value (double space)"},
{ varName:"--", expectedValue:"", style:"--:value", testName:"no char variable"},
{ varName:"--var", expectedValue:"", style:"--var: ", testName:"white space value (single space)"},
{ varName:"--var", expectedValue:"", style:"--var: ", testName:"white space value (double space)"},
{ varName:"--var", expectedValue:"value2", style:"--var:value1; --var:value2", testName:"overwrite"},
{ varName:"--var", expectedValue:"value", style:"--var:value;--var:;", testName:"can't overwrite with no value"},
{ varName:"--var", expectedValue:" ", style:"--var:value;--var: ;", testName:"can overwrite with space value"},
{ varName:"--var", expectedValue:"", style:"--var:value;--var:;", testName:"can't overwrite with no value"},
{ varName:"--var", expectedValue:"", style:"--var:value;--var: ;", testName:"can overwrite with space value"},
{ varName:"--var", expectedValue:"value1", style:"--var:value1; --Var:value2", testName:"case sensetivity"},
{ varName:"--Var", expectedValue:"value2", style:"--var:value1; --Var:value2", testName:"case sensetivity2"},
{ varName:"---var", expectedValue:"value", style:"---var:value;", testName:"parsing three dashes at start of variable"},
{ varName:"-var4" , expectedValue:"", style:"-var4:value3", testName:"parsing multiple dashes with one dash at start of variable"},
{ varName:"--var", expectedValue:" value", style:"--var: value", testName:" leading white space (single space)"},
{ varName:"--var", expectedValue:"value", style:"--var: value", testName:" leading white space (single space)"},
{ varName:"--var", expectedValue:"value1 value2", style:"--var:value1 value2", testName:" middle white space (single space)"},
{ varName:"--var", expectedValue:"value ", style:"--var:value ", testName:" trailing white space (single space)"},
{ varName:"--var", expectedValue:" value", style:"--var: value", testName:" leading white space (double space) 2"},
{ varName:"--var", expectedValue:"value", style:"--var: value", testName:" leading white space (double space) 2"},
{ varName:"--var", expectedValue:"value1 value2", style:"--var:value1 value2",testName:" middle white space (double space) 2"},
{ varName:"--var", expectedValue:"value ", style:"--var:value ", testName:" trailing white space (double space) 2"},
{ varName:"--var", expectedValue:"value1 ", style:"--var:value1 !important;", testName:"!important"},

13
tests/wpt/web-platform-tests/css/css-variables/variable-empty-name-reserved.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2692">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1467309">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<title>-- is a reserved property name</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(function() {
assert_false(CSS.supports("--", "initial"), "-- is a reserved property name");
});
</script>

108
tests/wpt/web-platform-tests/css/css-variables/variable-pseudo-element.html
View file

@ -1,106 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<title>Parse, store, and serialize CSS variable references</title>
<title>Variables work in ::before/::after pseudos</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<!-- This is not directly specified in the spec but should work -->
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!--
https://drafts.csswg.org/css-syntax/#error-handling
If the stylesheet ends while any rule, declaration, function, string, etc. are still open, everything is automatically closed.
-->
<style id="variable-reference-left-open">
div
{
color: var(--my-color);
--my-color: blue;
--my-color2: red;
<style>
:root {
--color: green;
--color2: red;
}
#div1::after
{
content: '[after]';
color: var(--my-color);
--my-color: orange;
}
#div2::after
{
content: '[after]';
color: var(--my-color2);
}
#div3::after
{
content: '[after]';
--my-color: orange;
}
#div4::after
{
content: '[after]';
color: var(--my-color);
--my-color: pink;
}
#div1::before
{
div::before {
content: '[before]';
color: var(--my-color);
--my-color: orange;
}
div::after {
content: '[after]';
}
#div2::before
{
content: '[before]';
color: var(--my-color2);
#div1 {
color: red;
}
#div1::before, #div1::after {
color: var(--color2);
--color2: green;
}
#div3::before
{
content: '[before]';
--my-color: orange;
#div2 {
color: var(--color2);
}
#div2::before, #div2::after {
color: var(--color);
}
#div4::before
{
content: '[before]';
color: var(--my-color);
--my-color: purple;
#div3 {
color: var(--color);
}
#div3::before, #div3::after {
--color: red;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<span id="control" style="color: green;"></span>
<script type="text/javascript">
<script>
"use strict";
var testcases = [
{ ID: "div1", expectedAfterColor: "rgb(255, 165, 0)", expectedBeforeColor: "rgb(255, 165, 0)" },
{ ID: "div2", expectedAfterColor: "rgb(255, 0, 0)", expectedBeforeColor: "rgb(255, 0, 0)" },
{ ID: "div3", expectedAfterColor: "rgb(0, 0, 255)", expectedBeforeColor: "rgb(0, 0, 255)" },
{ ID: "div4", expectedAfterColor: "rgb(255, 192, 203)", expectedBeforeColor: "rgb(128, 0, 128)" },
];
testcases.forEach(function (testcase) {
[...document.querySelectorAll("div")].forEach(function (div) {
test( function () {
var div = document.getElementById(testcase.ID);
var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('color');
const expectedColor = getComputedStyle(document.querySelector("#control")).color;
var actualBeforeColor = window.getComputedStyle(div, ':before').getPropertyValue('color');
assert_equals(actualBeforeColor, testcase.expectedBeforeColor, "The color of the before pseudo element should match the expected color");
assert_equals(actualAfterColor, testcase.expectedAfterColor, "The color of the after pseudo element should match the expected color");
}, testcase.ID);
var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('color');
assert_equals(actualBeforeColor, expectedColor);
assert_equals(actualAfterColor, expectedColor);
}, div.getAttribute("id"));
});
</script>

6
tests/wpt/web-platform-tests/css/css-variables/variable-reference-06.html
View file

@ -3,17 +3,17 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains no tokens.</title>
<title>CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains no tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body {
--a: crimson;
--a: green;
color: red;
}
p {
color: green;
color: crimson;
color: var(--a,);
}
</style>

6
tests/wpt/web-platform-tests/css/css-variables/variable-reference-11.html
View file

@ -3,17 +3,17 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains nothing but a comment.</title>
<title>CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains nothing but a comment.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body {
--a: crimson;
--a: green;
color: red;
}
p {
color: green;
color: crimson;
color: var(--a,/**/);
}
</style>

2
tests/wpt/web-platform-tests/css/css-variables/variable-reference.html
View file

@ -34,11 +34,11 @@
{ cssText: "width: var(--prop1, var(--prop2));", expectedPropertyValue: "var(--prop1, var(--prop2))" },
{ cssText: "width: var(--prop1, var(--prop2, var(--prop3, auto)));", expectedPropertyValue: "var(--prop1, var(--prop2, var(--prop3, auto)))" },
{ cssText: "width: var(--prop1) var(--prop2)", expectedPropertyValue: "var(--prop1) var(--prop2)" },
{ cssText: "width: var(--prop,);", expectedPropertyValue: "var(--prop,)" },
{ cssText: "width: var();", expectedPropertyValue: "" },
{ cssText: "width: var(prop);", expectedPropertyValue: "" },
{ cssText: "width: var(-prop);", expectedPropertyValue: "" },
{ cssText: "width: var(--prop,);", expectedPropertyValue: "" },
{ cssText: "width: var(--prop 20px);", expectedPropertyValue: "" },
{ cssText: "width: var(--prop, var(prop));", expectedPropertyValue: "" },
{ cssText: "width: var(--prop, var(-prop));", expectedPropertyValue: "" },

1
tests/wpt/web-platform-tests/css/css-variables/variable-substitution-filters.html
View file

@ -6,7 +6,6 @@
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<!-- This is testing filters functions with var() function -->
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
<script src="/resources/testharness.js"></script>

52
tests/wpt/web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow.html
View file

@ -1,52 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>box-shadow + variable substitution on same element</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<!-- This is testing filters functions with var() function -->
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="target" style="box-shadow: 1px 1px 1px green; color: var(--alpha); --alpha: green;">This div should have green text and a green shadow.</div>
<script type="text/javascript">
"use strict";
let target = document.getElementById('target');
let computedStyle = window.getComputedStyle(target);
let templates = [
{
testName:"box-shadow",
value: computedStyle.boxShadow,
potentialValues: ["1px 1px 1px green", "rgb(0, 128, 0) 1px 1px 1px 0px"],
description: "Expected value should be 1px 1px 1px green or rgb(0, 128, 0) 1px 1px 1px 0px"
},
{
testName:"--alpha",
value: computedStyle.getPropertyValue("--alpha").trim(),
potentialValues: ["green"],
description: "Expected value is green"
},
{
testName:"color",
value: computedStyle.color,
potentialValues: ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
description: "Expected value to be rgb(0, 128, 0) or rgba(0, 128, 0, 1)"
}
];
templates.forEach(function (template) {
test( function () {
assert_in_array(template.value, template.potentialValues, template.description);
}, template.testName);
});
</script>
</body>
</html>

1
tests/wpt/web-platform-tests/css/css-variables/variable-substitution-replaced-size.html
View file

@ -6,7 +6,6 @@
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<!-- This is testing filters functions with var() function -->
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
<script src="/resources/testharness.js"></script>

1
tests/wpt/web-platform-tests/css/css-variables/variable-substitution-shadow-properties.html
View file

@ -6,7 +6,6 @@
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<!-- This is testing filters functions with var() function -->
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
<script src="/resources/testharness.js"></script>

16
tests/wpt/web-platform-tests/css/css-variables/variable-substitution-variable-declaration.html
View file

@ -101,7 +101,7 @@
"use strict";
var testcases = [
{ element: "target1", propertyName: "--var2", expectedPropertyValue: " 23px 13px 17px 10px" },
{ element: "target1", propertyName: "--var2", expectedPropertyValue: "23px 13px 17px 10px" },
{ element: "target1", propertyName: "margin-top", expectedPropertyValue: "23px" },
{ element: "target1", propertyName: "margin-right", expectedPropertyValue: "13px" },
{ element: "target1", propertyName: "margin-bottom", expectedPropertyValue: "17px" },
@ -109,15 +109,15 @@
{ element: "target2parent", propertyName: "--var1", expectedPropertyValue: "" },
{ element: "target2parent", propertyName: "--var2", expectedPropertyValue: "" },
{ element: "target2", propertyName: "--var1", expectedPropertyValue: " good" },
{ element: "target2", propertyName: "--var1", expectedPropertyValue: "good" },
{ element: "target2", propertyName: "--var2", expectedPropertyValue: "" },
{ element: "target3", propertyName: "--var1", expectedPropertyValue: " 5px" },
{ element: "target3", propertyName: "--var2", expectedPropertyValue: " 5px" },
{ element: "target3", propertyName: "--var1", expectedPropertyValue: "5px" },
{ element: "target3", propertyName: "--var2", expectedPropertyValue: "5px" },
{ element: "target4", propertyName: "--varA", expectedPropertyValue: "" },
{ element: "target4", propertyName: "--varB", expectedPropertyValue: "" },
{ element: "target4", propertyName: "--varC", expectedPropertyValue: " 13px" },
{ element: "target4", propertyName: "--varC", expectedPropertyValue: "13px" },
{ element: "target5", propertyName: "--varA", expectedPropertyValue: "" },
{ element: "target5", propertyName: "--varB", expectedPropertyValue: "" },
@ -132,9 +132,9 @@
{ element: "target7", propertyName: "--varC", expectedPropertyValue: "" },
{ element: "target8", propertyName: "--varA", expectedPropertyValue: "" },
{ element: "target8", propertyName: "--varB", expectedPropertyValue: " 7px" },
{ element: "target8", propertyName: "--varB", expectedPropertyValue: "7px" },
{ element: "target9", propertyName: "--varA", expectedPropertyValue: " good" },
{ element: "target9", propertyName: "--varA", expectedPropertyValue: "good" },
{ element: "target9", propertyName: "--varB", expectedPropertyValue: "" },
{ element: "target9", propertyName: "--varC", expectedPropertyValue: "" },
@ -152,4 +152,4 @@
});
</script>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-variables/variable-supports-05.html
View file

@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens.</title>
<title>CSS Test: Test a non-custom property declaration in an @supports rule where the property value contains a variable reference having no fallback tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (color: var(--a)) and (not (color: var(--a,))) {
@supports (color: var(--a)) and (color: var(--a,)) {
p { color: green; }
}
</style>

4
tests/wpt/web-platform-tests/css/css-variables/variable-supports-07.html
View file

@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens, just a comment.</title>
<title>CSS Test: Test a non-custom property declaration in an @supports rule where the property value contains a variable reference having no fallback tokens, just a comment.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (color: var(--a)) and (not (color: var(--a,/**/))) {
@supports (color: var(--a)) and (color: var(--a,/**/)) {
p { color: green; }
}
</style>

4
tests/wpt/web-platform-tests/css/css-variables/variable-supports-37.html
View file

@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens.</title>
<title>CSS Test: Test a custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (--a: a) and (not (--a: var(--b,))) {
@supports (--a: a) and (--a: var(--b,)) {
p { color: green; }
}
</style>

4
tests/wpt/web-platform-tests/css/css-variables/variable-supports-39.html
View file

@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment.</title>
<title>CSS Test: Test a property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (--a: a) and (not (--a: var(--b,/**/))) {
@supports (--a: a) and (--a: var(--b,/**/)) {
p { color: green; }
}
</style>

2
tests/wpt/web-platform-tests/css/css-variables/variable-supports-57.html
View file

@ -9,7 +9,7 @@
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (--a: a) and (not (--a:)) {
@supports (--a: a) and (--a:) {
p { color: green; }
}
</style>

6
tests/wpt/web-platform-tests/css/css-variables/variable-supports-58.html
View file

@ -3,14 +3,14 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a passing property declaration in an @supports rule with property name "--".</title>
<title>CSS Test: Test a property declaration in an @supports rule with property name "--".</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
body { color: green; }
@supports (--: a) {
p { color: green; }
p { color: red; }
}
</style>
<p>This text must be green.</p>

66
tests/wpt/web-platform-tests/css/css-variables/variable-transitions-from-no-value.html
View file

@ -1,66 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables - Transitions - From no value to value</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target
{
transition-property: --value;
transition-duration: 1s;
}
#target
{
color: var(--value);
}
</style>
</head>
<body>
<div id="target">This text should transition from black to green over a period of 1 second.</div>
<script type="text/javascript">
"use strict";
// Force an initial layout pass
document.documentElement.offsetHeight;
test(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "", "--value has no value before transition runs");
}, "Verify CSS variable value before transition");
test(function() {
// Different browsers generate interpolated colors differently, so check multiple valid forms.
assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
["rgb(0, 0, 0)", "rgba(0, 0, 0, 1)"],
"color is black before transition runs");
}, "Verify substituted color value before transition");
var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs")
}));
var afterAnimationColorTest = async_test("Verify substituted color value after transition");
document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(function() {
assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
"color is green after transition runs")
}));
// Trigger transition
document.getElementById("target").setAttribute("style", "--value: green");
// Force another layout pass
document.documentElement.offsetHeight;
</script>
</body>
</html>

66
tests/wpt/web-platform-tests/css/css-variables/variable-transitions-to-no-value.html
View file

@ -1,66 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables - Transitions - From value to no value</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target
{
transition-property: --value;
transition-duration: 1s;
}
#target
{
color: var(--value);
}
</style>
</head>
<body>
<div id="target" style="--value: green">This text should transition from green to black over a period of 1 second.</div>
<script type="text/javascript">
"use strict";
// Force an initial layout pass
document.documentElement.offsetHeight;
test(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green before transition runs");
}, "Verify CSS variable value before transition");
test(function() {
// Different browsers generate interpolated colors differently, so check multiple valid forms.
assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
"color is green before transition runs");
}, "Verify substituted color value before transition");
var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "", "--value has no value after transition runs")
}));
var afterAnimationColorTest = async_test("Verify substituted color value after transition");
document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(function() {
assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
["rgb(0, 0, 0)", "rgba(0, 0, 0, 1)"],
"color is black after transition runs")
}));
// Trigger transition
document.getElementById("target").removeAttribute("style");
// Force another layout pass
document.documentElement.offsetHeight;
</script>
</body>
</html>

71
tests/wpt/web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value.html
View file

@ -1,71 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables - Transitions - Variable value specified before transition; variable specified by name</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target
{
transition-property: --value;
transition-duration: 1s;
}
#target
{
--value: blue;
color: var(--value);
}
#target.changed
{
--value: green;
}
</style>
</head>
<body>
<div id="target">This text should transition from blue to green over a period of 1 second.</div>
<script type="text/javascript">
"use strict";
// Force an initial layout pass
document.documentElement.offsetHeight;
test(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "blue", "--value is blue before transition runs");
}, "Verify CSS variable value before transition");
test(function() {
// Different browsers generate interpolated colors differently, so check multiple valid forms.
assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
["rgb(0, 0, 255)", "rgba(0, 0, 255, 1)"],
"color is blue before transition runs");
}, "Verify substituted color value before transition");
var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs")
}));
var afterAnimationColorTest = async_test("Verify substituted color value after transition");
document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(function() {
assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
"color is green after transition runs")
}));
// Trigger transition
document.getElementById("target").className = "changed";
// Force another layout pass
document.documentElement.offsetHeight;
</script>
</body>
</html>

66
tests/wpt/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable.html
View file

@ -1,66 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables - Transitions - Variable value specified before transition; variable specified by name</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target
{
--value: blue;
color: var(--value);
}
#target
{
transition-property: --value;
transition-duration: 1s;
}
#target.changed
{
--value: green;
}
</style>
</head>
<body>
<div id="target">This text should transition from blue to green over a period of 1 second.</div>
<script type="text/javascript">
"use strict";
// Force an initial layout pass
document.documentElement.offsetHeight;
test(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "blue", "--value is blue before transition runs");
}, "Verify CSS variable value before transition");
test(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 0, 255)", "color is blue before transition runs");
}, "Verify substituted color value before transition");
var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs")
}));
var afterAnimationColorTest = async_test("Verify substituted color value after transition");
document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(function() {
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 128, 0)", "color is green after transition runs")
}));
// Trigger transition
document.getElementById("target").className = "changed";
// Force another layout pass
document.documentElement.offsetHeight;
</script>
</body>
</html>