mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
4
tests/wpt/web-platform-tests/css/css-variables/OWNERS
Normal file
4
tests/wpt/web-platform-tests/css/css-variables/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,5 @@
|
|||
#testElement
|
||||
{
|
||||
--color: green;
|
||||
color: var(--color);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Content used for within variable-reference-refresh</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="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
|
||||
|
||||
<link rel="stylesheet" href="variable-reference-refresh-iframe.css">
|
||||
</head>
|
||||
<body style="color: red;">
|
||||
<div id="testElement">This text should be green.</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Animation - From and To Values</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>
|
||||
@keyframes valueanim
|
||||
{
|
||||
from { --value: blue; }
|
||||
to { --value: green; }
|
||||
}
|
||||
|
||||
/* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
|
||||
#target
|
||||
{
|
||||
animation-name: valueanim;
|
||||
animation-duration: 1s;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: both;
|
||||
--value: red;
|
||||
color: var(--value);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">This text should animate 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 animation runs");
|
||||
}, "Verify CSS variable value before animation");
|
||||
|
||||
test(function() {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 0, 255)", "color is blue before animation runs");
|
||||
}, "Verify substituted color value before animation");
|
||||
|
||||
var afterAnimationVariableTest = async_test("Verify CSS variable value after animation");
|
||||
document.getElementById("target").addEventListener("animationend", afterAnimationVariableTest.step_func_done(function() {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after animation runs")
|
||||
}));
|
||||
|
||||
var afterAnimationColorTest = async_test("Verify substituted color value after animation");
|
||||
document.getElementById("target").addEventListener("animationend", afterAnimationColorTest.step_func_done(function() {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 128, 0)", "color is green after animation runs")
|
||||
}));
|
||||
|
||||
// Trigger animation
|
||||
document.getElementById("target").style.animationPlayState = "running";
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Animation - Overriding Transition</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>
|
||||
@keyframes valueanim
|
||||
{
|
||||
from { --value: blue; }
|
||||
to { --value: green; }
|
||||
}
|
||||
|
||||
/* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
|
||||
#target
|
||||
{
|
||||
animation-name: valueanim;
|
||||
animation-duration: 1s;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: both;
|
||||
transition-property: --value;
|
||||
transition-duration: 1s;
|
||||
--value: red;
|
||||
color: var(--value);
|
||||
}
|
||||
#target.changed
|
||||
{
|
||||
--value: black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">This text should animate from blue to green over a period of 1 second. The transition is not visible because the animation overrides it.</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 animation runs");
|
||||
}, "Verify CSS variable value before animation");
|
||||
|
||||
test(function() {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 0, 255)", "color is blue before animation runs");
|
||||
}, "Verify substituted color value before animation");
|
||||
|
||||
var afterAnimationVariableTest = async_test("Verify CSS variable value after animation");
|
||||
document.getElementById("target").addEventListener("animationend", afterAnimationVariableTest.step_func_done(function() {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after animation runs")
|
||||
}));
|
||||
|
||||
var afterAnimationColorTest = async_test("Verify substituted color value after animation");
|
||||
document.getElementById("target").addEventListener("animationend", afterAnimationColorTest.step_func_done(function() {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 128, 0)", "color is green after animation runs")
|
||||
}));
|
||||
|
||||
// Trigger animation and transition
|
||||
document.getElementById("target").style.animationPlayState = "running";
|
||||
document.getElementById("target").className = "changed";
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Animation - Substitute Into Keyframe with Shorthand</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>
|
||||
@keyframes coloranim
|
||||
{
|
||||
from { border: 1px solid blue; }
|
||||
to { border: 1px solid var(--endColor); }
|
||||
}
|
||||
|
||||
/* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
|
||||
#target
|
||||
{
|
||||
animation-name: coloranim;
|
||||
animation-duration: 1s;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
#target
|
||||
{
|
||||
border: 1px solid red;
|
||||
--endColor: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">The border around this text should animate 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() {
|
||||
// Different browsers generate interpolated colors differently, so check multiple valid forms.
|
||||
assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("border-bottom-color").trim(),
|
||||
["rgb(0, 0, 255)", "rgba(0, 0, 255, 1)"],
|
||||
"border-bottom-color is blue before animation runs");
|
||||
}, "Verify border-bottom-color before animation");
|
||||
|
||||
var animationTest = async_test("Verify border-bottom-color after animation");
|
||||
|
||||
animationTest.step(function() {
|
||||
// Set event handler
|
||||
document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() {
|
||||
assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("border-bottom-color").trim(),
|
||||
["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
|
||||
"border-bottom-color is green after animation runs")
|
||||
animationTest.done();
|
||||
}));
|
||||
|
||||
// Trigger animation
|
||||
document.getElementById("target").style.animationPlayState = "running";
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Animation - Substitute Into Keyframe - transform property</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<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">
|
||||
|
||||
<style>
|
||||
@keyframes transformanim
|
||||
{
|
||||
from { transform: scale(0.5); }
|
||||
to { transform: scale(var(--finalScale)); }
|
||||
}
|
||||
|
||||
/* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
|
||||
#target
|
||||
{
|
||||
animation-name: transformanim;
|
||||
animation-duration: 1s;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: both;
|
||||
transform-origin: 0 0;
|
||||
--finalScale: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">This text should scale from half size to double size 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("transform").trim(),
|
||||
"matrix(0.5, 0, 0, 0.5, 0, 0)",
|
||||
"scale is 0.5 before animation runs");
|
||||
}, "Verify transform before animation");
|
||||
|
||||
var animationTest = async_test("Verify transform after animation");
|
||||
|
||||
animationTest.step(function() {
|
||||
// Set event handler
|
||||
document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("transform").trim(),
|
||||
"matrix(2, 0, 0, 2, 0, 0)",
|
||||
"scale is 2 after animation runs")
|
||||
animationTest.done();
|
||||
}));
|
||||
|
||||
// Trigger animation
|
||||
document.getElementById("target").style.animationPlayState = "running";
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Animation - Substitute Into Keyframe</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<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">
|
||||
|
||||
<style>
|
||||
@keyframes coloranim
|
||||
{
|
||||
from { color: blue; }
|
||||
to { color: var(--endColor); }
|
||||
}
|
||||
|
||||
/* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
|
||||
#target
|
||||
{
|
||||
animation-name: coloranim;
|
||||
animation-duration: 1s;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
#target
|
||||
{
|
||||
color: red;
|
||||
--endColor: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">This text should animate 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() {
|
||||
// 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 animation runs");
|
||||
}, "Verify color before animation");
|
||||
|
||||
var animationTest = async_test("Verify color after animation");
|
||||
|
||||
animationTest.step(function() {
|
||||
// Set event handler
|
||||
document.getElementById("target").addEventListener("animationend", animationTest.step_func(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 animation runs")
|
||||
animationTest.done();
|
||||
}));
|
||||
|
||||
// Trigger animation
|
||||
document.getElementById("target").style.animationPlayState = "running";
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Animation - Substitute Within Keyframe - Fallback</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<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">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
|
||||
<meta name="assert" content='The --endColor does the 50% flip and supports the fallback syntax'>
|
||||
|
||||
<style>
|
||||
@keyframes coloranim
|
||||
{
|
||||
from { color: blue; }
|
||||
to { --endColor: var(--nonexistent, green); color: var(--endColor); }
|
||||
}
|
||||
|
||||
/* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
|
||||
#target
|
||||
{
|
||||
animation-name: coloranim;
|
||||
animation-duration: 1s;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
#target
|
||||
{
|
||||
color: red;
|
||||
--endColor: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">This text should animate 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() {
|
||||
// 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 animation runs");
|
||||
}, "Verify color before animation");
|
||||
|
||||
var animationTest = async_test("Verify color after animation");
|
||||
|
||||
animationTest.step(function() {
|
||||
// Set event handler
|
||||
document.getElementById("target").addEventListener("animationend", animationTest.step_func(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 animation runs")
|
||||
animationTest.done();
|
||||
}));
|
||||
|
||||
// Trigger animation
|
||||
document.getElementById("target").style.animationPlayState = "running";
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Animation - Substitute Within Keyframe - Multiple Substitution</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>
|
||||
@keyframes coloranim
|
||||
{
|
||||
from { color: blue; }
|
||||
to { --myColor: green; --endColor: var(--myColor); color: var(--endColor); }
|
||||
}
|
||||
|
||||
/* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
|
||||
#target
|
||||
{
|
||||
animation-name: coloranim;
|
||||
animation-duration: 1s;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
#target
|
||||
{
|
||||
color: red;
|
||||
--myColor: red;
|
||||
--endColor: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">This text should animate 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() {
|
||||
// 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 animation runs");
|
||||
}, "Verify color before animation");
|
||||
|
||||
var animationTest = async_test("Verify color after animation");
|
||||
|
||||
animationTest.step(function() {
|
||||
// Set event handler
|
||||
document.getElementById("target").addEventListener("animationend", animationTest.step_func(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 animation runs")
|
||||
animationTest.done();
|
||||
}));
|
||||
|
||||
// Trigger animation
|
||||
document.getElementById("target").style.animationPlayState = "running";
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Animation - Substitute Within Keyframe</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>
|
||||
@keyframes coloranim
|
||||
{
|
||||
from { color: blue; }
|
||||
to { --endColor: green; color: var(--endColor); }
|
||||
}
|
||||
|
||||
/* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
|
||||
#target
|
||||
{
|
||||
animation-name: coloranim;
|
||||
animation-duration: 1s;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
#target
|
||||
{
|
||||
color: red;
|
||||
--endColor: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">This text should animate 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() {
|
||||
// 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 animation runs");
|
||||
}, "Verify color before animation");
|
||||
|
||||
var animationTest = async_test("Verify color after animation");
|
||||
|
||||
animationTest.step(function() {
|
||||
// Set event handler
|
||||
document.getElementById("target").addEventListener("animationend", animationTest.step_func(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 animation runs")
|
||||
animationTest.done();
|
||||
}));
|
||||
|
||||
// Trigger animation
|
||||
document.getElementById("target").style.animationPlayState = "running";
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Animation - From and To Values</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>
|
||||
@keyframes valueanim
|
||||
{
|
||||
to { --value: green; }
|
||||
}
|
||||
|
||||
/* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
|
||||
#target
|
||||
{
|
||||
animation-name: valueanim;
|
||||
animation-duration: 1s;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
#target
|
||||
{
|
||||
--value: blue;
|
||||
}
|
||||
#target span
|
||||
{
|
||||
color: var(--value);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"><span>This text should animate from blue to green over a period of 1 second.</span></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 animation runs");
|
||||
}, "Verify CSS variable value before animation");
|
||||
|
||||
var animationTest = async_test("Verify CSS variable value after animation");
|
||||
|
||||
animationTest.step(function() {
|
||||
// Set event handler
|
||||
document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after animation runs")
|
||||
animationTest.done();
|
||||
}));
|
||||
|
||||
// Trigger animation
|
||||
document.getElementById("target").style.animationPlayState = "running";
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Variable added to created document</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 stated in the spec, but still worth testing to ensure it works -->
|
||||
<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">This text should be green.</div>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var workDocument = document.implementation.createHTMLDocument("");
|
||||
workDocument.documentElement.innerHTML = "<style id='style'>#target { --c: rgb(0, 136, 0); color: var(--c) }</style>";
|
||||
document.head.appendChild(workDocument.getElementById("style"));
|
||||
|
||||
test( function () {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--c").trim(), "rgb(0, 136, 0)");
|
||||
}, "Variable definition appearing in a created document should work once spliced into the creating document");
|
||||
|
||||
test( function () {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 136, 0)");
|
||||
}, "Variable reference appearing in a created document should work once spliced into the creating document");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Variable on created 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 not directly stated in the spec, but still worth testing to ensure it works -->
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var newDiv = document.createElement("div");
|
||||
newDiv.appendChild(document.createTextNode("This text should be green."));
|
||||
newDiv.setAttribute("id", "target");
|
||||
newDiv.setAttribute("style", "--c: rgb(0, 136, 0); color: var(--c)");
|
||||
document.body.insertBefore(newDiv, document.body.firstChild);
|
||||
|
||||
test( function () {
|
||||
assert_equals(document.getElementById("target").style.getPropertyValue("--c").trim(), "rgb(0, 136, 0)");
|
||||
}, "Specified variable value appearing in a created element's inline style should work once spliced into the creating document");
|
||||
|
||||
test( function () {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--c").trim(), "rgb(0, 136, 0)");
|
||||
}, "Computed variable value appearing in a created element's inline style should work once spliced into the creating document");
|
||||
|
||||
test( function () {
|
||||
assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 136, 0)");
|
||||
}, "Variable reference appearing in a created element's inline style should work once spliced into the creating document");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Parse, store, and serialize CSS variable (thorugh css Text)</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/#serializing-custom-props">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target1" style="--var: var1;"></div>
|
||||
<div id="target2" style="margin: var(--prop);"></div>
|
||||
<div id="target3" style="background: var(--prop);"></div>
|
||||
<div id="target4" style="margin: var(--prop) !important;"></div>
|
||||
<div id="target5" style="background: var(--prop) !important;"></div>
|
||||
<div id="target6" style="background: var(--prop); background: green;"></div>
|
||||
<div id="target7" style="background: green; background: var(--prop);"></div>
|
||||
<div id="target8" style="color: green; color: var(--prop);"></div>
|
||||
<div id="target9" style="margin: var(--prop); margin-top: 10px"></div>
|
||||
<div id="target10"style="expando: var(--prop);"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var testcases = [
|
||||
{ element: "target1", expectedCssText: "--var: var1;" },
|
||||
{ element: "target2", expectedCssText: "margin: var(--prop);" },
|
||||
{ element: "target3", expectedCssText: "background: var(--prop);" },
|
||||
{ element: "target4", expectedCssText: "margin: var(--prop) !important;" },
|
||||
{ element: "target5", expectedCssText: "background: var(--prop) !important;" },
|
||||
{ element: "target6", expectedCssText: "background: green;" },
|
||||
{ element: "target7", expectedCssText: "background: var(--prop);" },
|
||||
{ element: "target8", expectedCssText: "color: var(--prop);" },
|
||||
{ element: "target9", expectedCssText: "margin-top: 10px; margin-right: ; margin-bottom: ; margin-left: ;" },
|
||||
{ element: "target10", expectedCssText: "" }
|
||||
];
|
||||
|
||||
testcases.forEach(function (testcase) {
|
||||
test( function () {
|
||||
var div = document.getElementById(testcase.element);
|
||||
var actualCssText = div.style.cssText;
|
||||
assert_equals(actualCssText, testcase.expectedCssText);
|
||||
}, testcase.element + " " + testcase.propertyName);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Variables - border shorthand set, serialize border-color</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/#variables-in-shorthands">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target" style="border: var(--borderwidth) solid black"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
test(function() {
|
||||
var target = document.getElementById("target");
|
||||
assert_equals(target.style.getPropertyValue("border-color"), "");
|
||||
}, "border-color should serialize to empty when border shorthand references a variable");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>variable definition cascading tests</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/#using-variables">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
* {
|
||||
--var0:x;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- test global selector -->
|
||||
<div id="t0"></div>
|
||||
|
||||
<!-- multiple unique variables cascading together -->
|
||||
<div id="t1a" style="--var1:a">
|
||||
<div id="t1b" style="--var2:b">
|
||||
<div id="t1c" style="--var3:c"></div>
|
||||
<div id="t1d" style="--var4:d"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- testing overwriting -->
|
||||
<div id="t2a" style="--var0:a">
|
||||
<div id="t2b" style="--var0:b;--var1:c">
|
||||
<div id="t2c" style="--var0:d;--var1:e"></div>
|
||||
<div id="t2d" style="--var2:f"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var tests = [
|
||||
{"divid": "t0", "expectedValues":["x"]},
|
||||
{"divid": "t1a", "expectedValues":["x","a"]},
|
||||
{"divid": "t1b", "expectedValues":["x","a","b"]},
|
||||
{"divid": "t1c", "expectedValues":["x","a","b","c"]},
|
||||
{"divid": "t1d", "expectedValues":["x","a","b","","d"]},
|
||||
{"divid": "t2a", "expectedValues":["a"]},
|
||||
{"divid": "t2b", "expectedValues":["b","c"]},
|
||||
{"divid": "t2c", "expectedValues":["d","e"]},
|
||||
{"divid": "t2d", "expectedValues":["x","c","f"]}
|
||||
];
|
||||
|
||||
let maxVariables = 5;
|
||||
|
||||
tests.forEach(function (testCase) {
|
||||
test( function () {
|
||||
let div = document.getElementById(testCase.divid);
|
||||
let computedStyle = window.getComputedStyle(div);
|
||||
for (var i = 0; i < maxVariables; ++i) {
|
||||
let testVar = "--var" + i;
|
||||
let actualValue = computedStyle.getPropertyValue(testVar);
|
||||
let expectedValue = testCase.expectedValues[i];
|
||||
if (expectedValue === undefined){
|
||||
expectedValue = "";
|
||||
}
|
||||
assert_equals(actualValue, expectedValue, "Actual Value for '" + testVar + "' should match expected value");
|
||||
|
||||
}
|
||||
}, "testing cascaded CSS Variables on div '" + testCase.divid + "'");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variable definitions and keywords</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/#using-variables">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
/* Specify a value in a rule hitting keyword targets so that the keywords
|
||||
have something to override in the cascade. */
|
||||
div > div
|
||||
{
|
||||
--var: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="inheritParent" style="--var: 20px;">
|
||||
<div id="inheritTest" style="--var: inherit;"></div>
|
||||
</div>
|
||||
|
||||
<div id="initialParent" style="--var: 20px;">
|
||||
<div id="initialTest" style="--var: initial;"></div>
|
||||
</div>
|
||||
|
||||
<div id="unsetParent" style="--var: 20px;">
|
||||
<div id="unsetTest" style="--var: unset;"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
let computedStyle = [
|
||||
{ elementId: "inheritTest", property: "--var", expectedValue: "20px", testName: "computed style inherit" },
|
||||
{ elementId: "initialTest", property: "--var", expectedValue: "", testName: "computed style initial" },
|
||||
{ elementId: "unsetTest", property: "--var", expectedValue: "20px", testName: "computed style unset" }
|
||||
];
|
||||
|
||||
let specifiedStyle = [
|
||||
{ elementId: "inheritTest", property: "--var", expectedValue: "inherit", testName: "specified style inherit" },
|
||||
{ elementId: "initialTest", property: "--var", expectedValue: "initial", testName: "specified style initial" },
|
||||
{ elementId: "unsetTest", property: "--var", expectedValue: "unset", testName: "specified style unset" }
|
||||
];
|
||||
|
||||
computedStyle.forEach(function (csTest) {
|
||||
test( function () {
|
||||
var elem = document.getElementById(csTest.elementId);
|
||||
var actualValue = window.getComputedStyle(elem).getPropertyValue(csTest.property).trim();
|
||||
assert_equals(csTest.expectedValue, actualValue);
|
||||
}, csTest.testName);
|
||||
});
|
||||
|
||||
specifiedStyle.forEach(function (ssTest) {
|
||||
test( function () {
|
||||
var elem = document.getElementById(ssTest.elementId);
|
||||
var actualValue = elem.style.getPropertyValue(ssTest.property);
|
||||
assert_equals(ssTest.expectedValue, actualValue);
|
||||
}, ssTest.testName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>variable-definition: get variable value using getPropertyValue</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/#using-variables">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
let templates = [
|
||||
{ varName:"--var", expectedValue:"", style:"", testName:"no variable"},
|
||||
{ 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:"--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:"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:"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:"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"},
|
||||
{ varName:"--var", expectedValue:"value1", style:"--var:value1!important;--var:value2;", testName:"!important 2"},
|
||||
{ varName:"--var", expectedValue:"value1 ", style:"--var:value1 !important;--var:value2;", testName:"!important (with space)"}
|
||||
];
|
||||
|
||||
templates.forEach(function (template) {
|
||||
test( function () {
|
||||
let div = document.createElement("div");
|
||||
div.style.cssText = template.style;
|
||||
document.body.appendChild(div);
|
||||
let value = div.style.getPropertyValue(template.varName);
|
||||
assert_equals(value, template.expectedValue, "Expected Value should match actual value");
|
||||
document.body.removeChild(div);
|
||||
}, template.testName);
|
||||
});
|
||||
|
||||
templates.forEach(function (template) {
|
||||
test( function () {
|
||||
let div = document.createElement("div");
|
||||
div.style.cssText = template.style;
|
||||
document.body.appendChild(div);
|
||||
let computedStyle = window.getComputedStyle(div);
|
||||
let value = computedStyle.getPropertyValue(template.varName);
|
||||
assert_equals(value, template.expectedValue, "Expected Value should match actual value");
|
||||
document.body.removeChild(div);
|
||||
}, template.testName +" (Computed Style)");
|
||||
});
|
||||
|
||||
templates.forEach(function (template) {
|
||||
test( function () {
|
||||
let div = document.createElement("div");
|
||||
div.style.cssText = template.style;
|
||||
document.body.appendChild(div);
|
||||
let divChild = document.createElement("div");
|
||||
div.appendChild(divChild);
|
||||
let computedStyle = window.getComputedStyle(divChild);
|
||||
let value = computedStyle.getPropertyValue(template.varName);
|
||||
assert_equals(value, template.expectedValue, "Expected Value should match actual value");
|
||||
document.body.removeChild(div);
|
||||
}, template.testName +" (Cascading)");
|
||||
});
|
||||
|
||||
let template2 = [
|
||||
{ varToSet:"--varUnique", setValue:"green", varNameForRetrieval:"--varUnique", expectedValue:"green", testName:"basic CSSOM.setProperty"},
|
||||
{ varToSet:"--varUnique2 ", setValue:"green", varNameForRetrieval:"--varUnique2 ", expectedValue:"", testName:"CSSOM.setProperty with space 1"},
|
||||
{ varToSet:"--varUnique3 name", setValue:"green", varNameForRetrieval:"--varUnique3 name", expectedValue:"", testName:"CSSOM.setProperty with space 2"},
|
||||
{ varToSet:"--varUnique4 name", setValue:"green", varNameForRetrieval:"--varUnique4", expectedValue:"", testName:"CSSOM.setProperty with space 3"},
|
||||
];
|
||||
|
||||
template2.forEach(function (template) {
|
||||
test( function () {
|
||||
let div = document.createElement("div");
|
||||
div.style.setProperty(template.varToSet, template.setValue);
|
||||
document.body.appendChild(div);
|
||||
let computedStyle = window.getComputedStyle(div);
|
||||
let value = computedStyle.getPropertyValue(template.varNameForRetrieval);
|
||||
assert_equals(value, template.expectedValue, "Expected Value should match actual value");
|
||||
document.body.removeChild(div);
|
||||
}, template.testName);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables with ::first-letter pseudo-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 not directly specified in the spec but should work -->
|
||||
<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>
|
||||
<style>
|
||||
#div1::first-letter {
|
||||
color: var(--my-color);
|
||||
--my-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
#div2::first-letter {
|
||||
font-size: var(--my-font-size);
|
||||
--my-font-size: 25px;
|
||||
}
|
||||
|
||||
#div3::first-letter {
|
||||
font-weight: var(--my-font-weight);
|
||||
--my-font-weight: 900;
|
||||
}
|
||||
|
||||
#div4::first-letter {
|
||||
position: var(--my-position);
|
||||
--my-position: absolute;
|
||||
}
|
||||
|
||||
#div5::first-letter {
|
||||
color: var(--my-color1);
|
||||
--my-color1: var(--my-color2);
|
||||
--my-color2: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
#div6::first-letter {
|
||||
position: var(--my-position1);
|
||||
--my-position1: var(--my-position2);
|
||||
--my-position2: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">CSS variable defining 'color' property should be applied to ::first-letter and its color should be blue.</div>
|
||||
<div id="div2">CSS variable defining 'font-size' property should be applied to ::first-letter and its font-size should be 25px.</div>
|
||||
<div id="div3">CSS variable defining 'font-weight' property should be applied to ::first-letter and its font-weight should be 900.</div>
|
||||
<div id="div4">CSS variable defining 'position' property should not be applied to ::first-letter and its position should be static.</div>
|
||||
<div id="div5">CSS variable referencing another CSS variable that defines 'color' property should be applied to ::first-letter and its color should be blue.</div>
|
||||
<div id="div6">CSS variable referencing another CSS variable that defines 'position' property should not be applied to ::first-letter and its position should be static.</div>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
var testcases = [
|
||||
{ elementId: "div1", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "color" },
|
||||
{ elementId: "div2", property: "font-size", expectedValue: "25px", testName: "font-size" },
|
||||
{ elementId: "div3", property: "font-weight", expectedValue: "900", testName: "font-weight" },
|
||||
{ elementId: "div4", property: "position", expectedValue: "static", testName: "position" },
|
||||
{ elementId: "div5", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "nested color" },
|
||||
{ elementId: "div6", property: "position", expectedValue: "static", testName: "abspos" },
|
||||
];
|
||||
|
||||
testcases.forEach(function (tc) {
|
||||
test( function () {
|
||||
var elem = document.getElementById(tc.elementId);
|
||||
var actualValue = window.getComputedStyle(elem, ':first-letter').getPropertyValue(tc.property);
|
||||
assert_equals(tc.expectedValue, actualValue);
|
||||
}, tc.testName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables with ::first-line pseudo-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 not directly specified in the spec but should work -->
|
||||
<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>
|
||||
<style>
|
||||
div {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#div1::first-line {
|
||||
color: var(--my-color);
|
||||
--my-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
#div2::first-line {
|
||||
font-size: var(--my-font-size);
|
||||
--my-font-size: 25px;
|
||||
}
|
||||
|
||||
#div3::first-line {
|
||||
font-weight: var(--my-font-weight);
|
||||
--my-font-weight: 900;
|
||||
}
|
||||
|
||||
#div4::first-line {
|
||||
position: var(--my-position);
|
||||
--my-position: absolute;
|
||||
}
|
||||
|
||||
#div5::first-line {
|
||||
color: var(--my-color1);
|
||||
--my-color1: var(--my-color2);
|
||||
--my-color2: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
#div6::first-line {
|
||||
position: var(--my-position1);
|
||||
--my-position1: var(--my-position2);
|
||||
--my-position2: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">CSS variable defining 'color' property should be applied to ::first-line and its color should be blue.</div>
|
||||
<br />
|
||||
<div id="div2">CSS variable defining 'font-size' property should be applied to ::first-line and its font-size should be 25px.</div>
|
||||
<br />
|
||||
<div id="div3">CSS variable defining 'font-weight' property should be applied to ::first-line and its font-weight should be 900.</div>
|
||||
<br />
|
||||
<div id="div4">CSS variable defining 'position' property should not be applied to ::first-line and its position should be static.</div>
|
||||
<br />
|
||||
<div id="div5">CSS variable referencing another CSS variable that defines 'color' property should be applied to ::first-line and its color should be blue.</div>
|
||||
<br />
|
||||
<div id="div6">CSS variable referencing another CSS variable that defines 'position' property should not be applied to ::first-line and its position should be static.</div>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
let templates = [
|
||||
{ elementId: "div1", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "color" },
|
||||
{ elementId: "div2", property: "font-size", expectedValue: "25px", testName: "font-size" },
|
||||
{ elementId: "div3", property: "font-weight", expectedValue: "900", testName: "font-weight" },
|
||||
{ elementId: "div4", property: "position", expectedValue: "static", testName: "position" },
|
||||
{ elementId: "div5", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "nested color" },
|
||||
{ elementId: "div6", property: "position", expectedValue: "static", testName: "abspos" },
|
||||
];
|
||||
|
||||
templates.forEach(function (template) {
|
||||
test( function () {
|
||||
var elem = document.getElementById(template.elementId);
|
||||
var actualValue = window.getComputedStyle(elem, ':first-line').getPropertyValue(template.property);
|
||||
assert_equals(template.expectedValue, actualValue);
|
||||
}, template.testName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<div>PASS</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Dynamic attribute change handling in generated content</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-variables/#using-variables">
|
||||
<link rel="match" href="variable-generated-content-dynamic-001-ref.html">
|
||||
<style>
|
||||
:root {
|
||||
--my-attr: attr(data-foo);
|
||||
}
|
||||
div::before {
|
||||
content: var(--my-attr);
|
||||
}
|
||||
</style>
|
||||
<div data-foo="FAIL"></div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.querySelector('div').setAttribute('data-foo', "PASS");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests css variable invalidation</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="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#test1 {
|
||||
--var1:red;
|
||||
}
|
||||
#test2 {
|
||||
--var2:red!important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test1"><div><div><div class="testElem"></div></div></div></div>
|
||||
<div id="test2"><div><div><div class="testElem"></div></div></div></div>
|
||||
<div id="test3" style="--var3:red"><div><div><div class="testElem"></div></div></div></div>
|
||||
<div id="test4" style="--var4:red!important"><div><div><div class="testElem"></div></div></div></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
// This is a helper function to avoid repitition
|
||||
function testExpectations(testProperty, cssStyle, testElement, testDescription, expectedValue, expectedCssText, expectedPriority, expectedLength, expectedItem0) {
|
||||
assert_equals(cssStyle.cssText, expectedCssText, "cssText " + testDescription + ".");
|
||||
assert_equals(cssStyle.getPropertyValue(testProperty), expectedValue, "Value " + testDescription + ".");
|
||||
assert_equals(cssStyle.getPropertyPriority(testProperty), expectedPriority, "Priority " + testDescription + ".");
|
||||
assert_equals(cssStyle.length, expectedLength, "style length " + testDescription + ".");
|
||||
assert_equals(cssStyle.item(0), expectedItem0, "item(0) " + testDescription + ".");
|
||||
|
||||
var computedStyle = window.getComputedStyle(testElement);
|
||||
assert_equals(computedStyle.getPropertyValue(testProperty), expectedValue, "Computed Style value " + testDescription + ".");
|
||||
}
|
||||
|
||||
// This is a boilerplate to build a testcase and then test the expected outcome
|
||||
function testCase(cssStyle, testProperty, testElement, testImportant) {
|
||||
var initialCssText = testProperty + (testImportant ? ": red !important;" : ": red;");
|
||||
|
||||
testExpectations(testProperty, cssStyle, testElement, "initial", "red", initialCssText, testImportant ? "important" : "", 1, testProperty);
|
||||
|
||||
cssStyle.setProperty(testProperty, "blue");
|
||||
|
||||
if (!testImportant) {
|
||||
testExpectations(testProperty, cssStyle, testElement, "after setProperty", "blue", testProperty + ": blue;", "", 1, testProperty);
|
||||
}
|
||||
|
||||
if (testProperty) {
|
||||
cssStyle.setProperty(testProperty, "pink", 'important');
|
||||
testExpectations(testProperty, cssStyle, testElement, "after setProperty important", "pink", testProperty + ": pink !important;", "important", 1, testProperty);
|
||||
}
|
||||
|
||||
cssStyle.removeProperty(testProperty);
|
||||
testExpectations(testProperty, cssStyle, testElement, "after removeProperty", "", "", "", 0, "");
|
||||
|
||||
var cssText = testProperty + (testImportant ? ":green!important;" : ":green;");
|
||||
var expectedCssText = testProperty + (testImportant ? ": green !important;" : ": green;");
|
||||
cssStyle.cssText = cssText;
|
||||
testExpectations(testProperty, cssStyle, testElement, "after setting cssText", "green", expectedCssText, testImportant ? "important" : "", 1, testProperty);
|
||||
}
|
||||
|
||||
// The actual tests that utilize the boilerplate & helper methods above
|
||||
test( function () {
|
||||
var cssStyle = document.styleSheets[0].cssRules[0].style;
|
||||
var testProperty = "--var1";
|
||||
var testElement = document.querySelectorAll("#test1 .testElem")[0];
|
||||
|
||||
testCase(cssStyle, testProperty, testElement, false);
|
||||
}, "css rule test");
|
||||
|
||||
test( function () {
|
||||
var cssStyle = document.styleSheets[0].cssRules[1].style;
|
||||
var testProperty = "--var2";
|
||||
var testElement = document.querySelectorAll("#test2 .testElem")[0];
|
||||
|
||||
testCase(cssStyle, testProperty, testElement, true);
|
||||
}, "css rule test important");
|
||||
|
||||
test( function () {
|
||||
var element = document.getElementById("test3");
|
||||
var cssStyle = element.style;
|
||||
var testProperty = "--var3";
|
||||
var testElement = document.querySelectorAll("#test3 .testElem")[0];
|
||||
|
||||
testCase(cssStyle, testProperty, testElement, false);
|
||||
}, "inline style test");
|
||||
|
||||
test( function () {
|
||||
var element = document.getElementById("test4");
|
||||
var cssStyle = element.style;
|
||||
var testProperty = "--var4";
|
||||
var testElement = document.querySelectorAll("#test4 .testElem")[0];
|
||||
|
||||
testCase(cssStyle, testProperty, testElement, true);
|
||||
}, "inline style test important");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables and SVG presentation attributes</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="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
--stroke3: 5px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="--prop: ;">
|
||||
<svg id="svg" width="300px" height="100px">
|
||||
<defs>
|
||||
<linearGradient id="gradient">
|
||||
<stop offset="0" stop-color="#ff8800"></stop>
|
||||
<stop offset="1" stop-color="#ffff00"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect id="box1" x="15" y="15" width="50" height="50" fill="lightgreen" stroke-width="var(--stroke1)" stroke="green" style="--stroke1: 10px"></rect>
|
||||
<rect id="box2" x="115" y="15" width="50" height="50" fill="lightgreen" stroke-width="var(--stroke2)" stroke="green" style="--stroke2: 20px"></rect>
|
||||
<rect id="box3" x="215" y="15" width="50" height="50" fill="lightgreen" stroke-width="var(--stroke3)" stroke="green"></rect>
|
||||
<symbol id="test4" clip="var(--clip)" style="--clip: rect(1px 10em 3rem 2ch)"></symbol>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var testcases = [
|
||||
{ element: "box1", property:"stroke-width", expectedPropertyValue: "10px" },
|
||||
{ element: "box2", property:"stroke-width", expectedPropertyValue: "20px" },
|
||||
{ element: "box3", property:"stroke-width", expectedPropertyValue: "5px" },
|
||||
{ element: "test4", property:"clip", expectedPropertyValue: "rect(1px, 160px, 48px, 16px)" },
|
||||
];
|
||||
|
||||
testcases.forEach(function (testcase) {
|
||||
test( function () {
|
||||
var element = document.getElementById(testcase.element);
|
||||
var computedStyle = window.getComputedStyle(element);
|
||||
var computedPropertyValue = computedStyle.getPropertyValue(testcase.property);
|
||||
assert_equals(computedPropertyValue, testcase.expectedPropertyValue);
|
||||
}, "Testing '" + testcase.property + "' on '#" + testcase.element + "'.");
|
||||
});
|
||||
|
||||
let testproperties = [
|
||||
{ property: "alignment-baseline", valuesToTest:["auto", "baseline", "before-edge", "text-before-edge", "middle", "central", "after-edge", "text-after-edge", "ideographic", "alphabetic", "hanging", "mathematical"], default: "auto" },
|
||||
{ property: "baseline-shift", valuesToTest:["baseline", "sub", "super", "13%", "28px"], default: "baseline" },
|
||||
{ property: "clip-rule", valuesToTest:["nonzero", "evenodd"], default: "nonzero" },
|
||||
{ property: "color", valuesToTest:["rgb(128, 0, 128)"], default: "rgb(0, 0, 0)" },
|
||||
{ property: "color-interpolation-filters", valuesToTest:["auto", "sRGB", "linearRGB"], default: "" },
|
||||
{ property: "cursor", valuesToTest:["auto", "crosshair", "default", "pointer", "move", "e-resize", "ne-resize", "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", "text", "wait", "help"], default: "auto" },
|
||||
{ property: "direction", valuesToTest:["ltr", "rtl"], default: "ltr" },
|
||||
{ property: "display", valuesToTest:["inline", "block", "list-item", "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group", "table-column", "table-cell", "table-caption", "none"], default: "inline" },
|
||||
{ property: "dominant-baseline", valuesToTest:["auto", "use-script", "no-change", "reset-size", "ideographic", "alphabetic", "hanging", "mathematical", "central", "middle", "text-after-edge", "text-before-edge"], default: "auto" },
|
||||
{ property: "fill", valuesToTest:["red", "url(#gradient) black"], default: "black" },
|
||||
{ property: "fill-opacity", valuesToTest:["0.8"], default: "1" },
|
||||
{ property: "fill-rule", valuesToTest:["nonzero", "evenodd"], default: "nonzero" },
|
||||
{ property: "filter", valuesToTest:["none"], default: "none" },
|
||||
{ property: "flood-color", valuesToTest:["currentColor", "green"], default: "" },
|
||||
{ property: "flood-opacity", valuesToTest:["0.7"], default: "1" },
|
||||
{ property: "font-family", valuesToTest:["Arial", "Times New Roman"], default: "Times New Roman" },
|
||||
{ property: "font-size", valuesToTest:["31px"], default: "16px" },
|
||||
{ property: "font-size-adjust", valuesToTest:["22", "none"], default: "none" },
|
||||
{ property: "font-stretch", valuesToTest:["normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"], default: "normal" },
|
||||
{ property: "font-style", valuesToTest:["normal", "italic"], default: "normal" },
|
||||
{ property: "font-weight", valuesToTest:["100", "200", "300", "400", "500", "600", "700", "800", "900"], default: "400" },
|
||||
{ property: "glyph-orientation-horizontal", valuesToTest:["13deg"], default: "0deg" },
|
||||
{ property: "glyph-orientation-vertical", valuesToTest:["auto", "19deg"], default: "auto" },
|
||||
{ property: "kerning", valuesToTest:["auto", "15"], default: "auto" },
|
||||
{ property: "letter-spacing", valuesToTest:["normal", "21px"], default: "normal" },
|
||||
{ property: "lighting-color", valuesToTest:["currentColor", "pink"], default: "" },
|
||||
{ property: "opacity", valuesToTest:["0.11"], default: "1" },
|
||||
{ property: "overflow", valuesToTest:["visible", "hidden", "scroll", "auto"], default: "visible" },
|
||||
{ property: "pointer-events", valuesToTest:["visiblePainted", "visibleFill", "visibleStroke", "visible", "painted", "fill", "stroke", "all", "none"], default: "visiblePainted" },
|
||||
{ property: "stop-color", valuesToTest:["currentColor", "maroon"], default: "" },
|
||||
{ property: "stop-opacity", valuesToTest:["0.225"], default: "1" },
|
||||
{ property: "stroke", valuesToTest:["green", "url(#gradient)"], default: "" },
|
||||
{ property: "stroke-dasharray", valuesToTest:["none", "2px"], default: "none" },
|
||||
{ property: "stroke-dashoffset", valuesToTest:["14%", "98px"], default: "0px" },
|
||||
{ property: "stroke-linecap", valuesToTest:["butt", "round", "square"], default: "butt" },
|
||||
{ property: "stroke-linejoin", valuesToTest:["miter", "round", "bevel"], default: "miter" },
|
||||
{ property: "stroke-miterlimit", valuesToTest:["2"], default: "4" },
|
||||
{ property: "stroke-opacity", valuesToTest:["0.221"], default: "1" },
|
||||
{ property: "stroke-width", valuesToTest:["88%", "31px"], default: "1px" },
|
||||
{ property: "text-anchor", valuesToTest:["start", "middle", "end"], default: "start" },
|
||||
{ property: "text-decoration", valuesToTest:["none", "underline", "overline", "line-through"], default: "none" },
|
||||
{ property: "visibility", valuesToTest:["visible", "hidden", "collapse"], default: "visible" },
|
||||
{ property: "word-spacing", valuesToTest:["31px"], default: "0px" },
|
||||
{ property: "writing-mode", valuesToTest:["lr-tb", "rl-tb"], default: "lr-tb" },
|
||||
];
|
||||
|
||||
testproperties.forEach(function (testcase) {
|
||||
test( function () {
|
||||
let svg = document.getElementById("svg");
|
||||
let rect = document.createElement("rect");
|
||||
svg.appendChild(rect);
|
||||
let computedStyle = window.getComputedStyle(rect);
|
||||
let expectedDefaultValue = testcase.default ? testcase.default : "";
|
||||
let actualValue = computedStyle.getPropertyValue(testcase.property);
|
||||
assert_equals(actualValue, expectedDefaultValue, "Default value.");
|
||||
rect.style.cssText = testcase.property + ":var(--prop);";
|
||||
|
||||
for (var value of testcase.valuesToTest)
|
||||
{
|
||||
document.body.style.setProperty("--prop", value);
|
||||
computedStyle = window.getComputedStyle(rect);
|
||||
let actualValue = computedStyle.getPropertyValue(testcase.property);
|
||||
assert_equals(actualValue, value, "Value Test.");
|
||||
}
|
||||
|
||||
svg.removeChild(rect);
|
||||
}, "Testing '" + testcase.property + "'.");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Parse, store, and serialize CSS variable references</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="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;
|
||||
}
|
||||
|
||||
#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
|
||||
{
|
||||
content: '[before]';
|
||||
color: var(--my-color);
|
||||
--my-color: orange;
|
||||
}
|
||||
|
||||
#div2::before
|
||||
{
|
||||
content: '[before]';
|
||||
color: var(--my-color2);
|
||||
}
|
||||
|
||||
#div3::before
|
||||
{
|
||||
content: '[before]';
|
||||
--my-color: orange;
|
||||
}
|
||||
|
||||
#div4::before
|
||||
{
|
||||
content: '[before]';
|
||||
color: var(--my-color);
|
||||
--my-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">div1</div>
|
||||
<div id="div2">div2</div>
|
||||
<div id="div3">div3</div>
|
||||
<div id="div4">div4</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"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) {
|
||||
test( function () {
|
||||
var div = document.getElementById(testcase.ID);
|
||||
var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('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);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS variable references - via CSSOM</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="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="target1"></div>
|
||||
<div id="target2" style="background-color: red;"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
// This test verifies that variable references are usable when set via CSSOM calls.
|
||||
|
||||
function TestCssom() {
|
||||
var target = document.getElementById("target1");
|
||||
|
||||
target.style.setProperty("background-color", "var(--prop)");
|
||||
assert_equals(target.style.backgroundColor, "var(--prop)", "background-color property value after calling setProperty");
|
||||
assert_equals(target.style.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty");
|
||||
|
||||
target.style.removeProperty("background-color");
|
||||
assert_equals(target.style.backgroundColor, "", "background-color property value after calling removeProperty");
|
||||
assert_equals(target.style.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty");
|
||||
}
|
||||
|
||||
function TestCssomOverridingMarkup() {
|
||||
var target = document.getElementById("target1");
|
||||
|
||||
target.style.setProperty("background-color", "var(--prop)");
|
||||
assert_equals(target.style.backgroundColor, "var(--prop)", "background-color property value after calling setProperty");
|
||||
assert_equals(target.style.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty");
|
||||
|
||||
target.style.removeProperty("background-color");
|
||||
assert_equals(target.style.backgroundColor, "", "background-color property value after calling removeProperty");
|
||||
assert_equals(target.style.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty");
|
||||
}
|
||||
|
||||
test(TestCssom, "Verify correct results using CSSOM");
|
||||
test(TestCssomOverridingMarkup, "Verify correct results with CSSOM overriding markup-set values");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Variable reference across document refresh</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="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>
|
||||
|
||||
<iframe id="iframe" src="resources/variable-reference-refresh-iframe.html"></iframe>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
setup({explicit_done: true});
|
||||
|
||||
// Set up event handler to drive tests
|
||||
var loadCount = 0;
|
||||
document.getElementById("iframe").addEventListener("load", function() {
|
||||
loadCount++;
|
||||
if (loadCount == 1)
|
||||
{
|
||||
test(function() {
|
||||
var iframe = document.getElementById("iframe");
|
||||
var iframeWindow = iframe.contentWindow;
|
||||
var iframeDocument = iframe.contentDocument;
|
||||
var testElement = iframeDocument.getElementById("testElement");
|
||||
var computedValue = iframeWindow.getComputedStyle(testElement).getPropertyValue("color").trim();
|
||||
assert_equals(computedValue, "rgb(0, 128, 0)", "color is green before page refresh");
|
||||
iframe.src = iframe.src;
|
||||
}, "Verify substituted color value before refresh");
|
||||
}
|
||||
else if (loadCount == 2)
|
||||
{
|
||||
test(function() {
|
||||
var iframeWindow = document.getElementById("iframe").contentWindow;
|
||||
var iframeDocument = document.getElementById("iframe").contentDocument;
|
||||
var testElement = iframeDocument.getElementById("testElement");
|
||||
var computedValue = iframeWindow.getComputedStyle(testElement).getPropertyValue("color").trim();
|
||||
assert_equals(computedValue, "rgb(0, 128, 0)", "color is green after page refresh");
|
||||
}, "Verify substituted color value after refresh");
|
||||
|
||||
done();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS variable references - shorthand properties - via CSSOM</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/#serializing-custom-props">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
function runTest() {
|
||||
var target = document.getElementById("target");
|
||||
|
||||
target.style.setProperty("margin", "var(--prop)");
|
||||
assert_equals(target.style.margin, "var(--prop)", "margin property value after calling setProperty");
|
||||
assert_equals(target.style.getPropertyValue("margin"), "var(--prop)", "getPropertyValue('margin') after calling setProperty");
|
||||
|
||||
target.style.removeProperty("margin");
|
||||
assert_equals(target.style.margin, "", "margin property value after calling removeProperty");
|
||||
assert_equals(target.style.getPropertyValue("margin"), "", "getPropertyValue('margin') after calling removeProperty");
|
||||
}
|
||||
|
||||
test(runTest);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Parse, store, and serialize CSS variable references - shorthand properties</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/#serializing-custom-props">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target1" style="margin: var(--prop); margin-top: 10px"></div>
|
||||
<div id="target2" style="margin: var(--prop) !important; margin-top: 10px"></div>
|
||||
<div id="target3" style="margin: var(--prop); margin-top: 10px !important"></div>
|
||||
<div id="target4" style="background: var(--prop);"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var testcases = [
|
||||
{ element: "target1", propertyName: "margin", expectedPropertyValue: "" },
|
||||
{ element: "target1", propertyName: "margin-left", expectedPropertyValue: "" },
|
||||
{ element: "target1", propertyName: "margin-top", expectedPropertyValue: "10px" },
|
||||
{ element: "target1", propertyName: "margin-right", expectedPropertyValue: "" },
|
||||
{ element: "target1", propertyName: "margin-bottom", expectedPropertyValue: "" },
|
||||
|
||||
{ element: "target2", propertyName: "margin", expectedPropertyValue: "var(--prop)" },
|
||||
{ element: "target2", propertyName: "margin-left", expectedPropertyValue: "" },
|
||||
{ element: "target2", propertyName: "margin-top", expectedPropertyValue: "" },
|
||||
{ element: "target2", propertyName: "margin-right", expectedPropertyValue: "" },
|
||||
{ element: "target2", propertyName: "margin-bottom", expectedPropertyValue: "" },
|
||||
|
||||
{ element: "target3", propertyName: "margin", expectedPropertyValue: "" },
|
||||
{ element: "target3", propertyName: "margin-left", expectedPropertyValue: "" },
|
||||
{ element: "target3", propertyName: "margin-top", expectedPropertyValue: "10px" },
|
||||
{ element: "target3", propertyName: "margin-right", expectedPropertyValue: "" },
|
||||
{ element: "target3", propertyName: "margin-bottom", expectedPropertyValue: "" },
|
||||
|
||||
{ element: "target4", propertyName: "background", expectedPropertyValue: "var(--prop)" }
|
||||
];
|
||||
|
||||
testcases.forEach(function (testcase) {
|
||||
test( function () {
|
||||
var div = document.getElementById(testcase.element);
|
||||
var actualPropertyValue = div.style.getPropertyValue(testcase.propertyName).trim();
|
||||
assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
|
||||
}, testcase.element + " " + testcase.propertyName);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Parse, store, and serialize CSS variable referencing another CSS variable</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/#serializing-custom-props">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test1" style="--prop1: var(--prop2);"></div>
|
||||
<div id="test2" style="--prop1: var(--prop2, var(--prop3));"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var testcases = [
|
||||
{ elementId: "test1", expectedPropertyValue: "var(--prop2)" },
|
||||
{ elementId: "test2", expectedPropertyValue: "var(--prop2, var(--prop3))" },
|
||||
];
|
||||
|
||||
testcases.forEach(function (testcase) {
|
||||
test( function () {
|
||||
var testElement = document.getElementById(testcase.elementId);
|
||||
var actualPropertyValue = testElement.style.getPropertyValue("--prop1").trim();
|
||||
assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
|
||||
}, testcase.cssText);
|
||||
});
|
||||
</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,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Parse, store, and serialize CSS variable references</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/#using-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
|
||||
{
|
||||
width: var(--prop</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var testcases = [
|
||||
{ cssText: "width: var(--prop);", expectedPropertyValue: "var(--prop)" },
|
||||
{ cssText: "width: var(--prop) !important;", expectedPropertyValue: "var(--prop)" },
|
||||
{ cssText: "width: var(--prop, );", expectedPropertyValue: "var(--prop, )" },
|
||||
{ cssText: "width: var(--prop, 20px);", expectedPropertyValue: "var(--prop, 20px)" },
|
||||
{ cssText: "width: var(--prop, blue);", expectedPropertyValue: "var(--prop, blue)" },
|
||||
{ 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();", 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: "" },
|
||||
{ cssText: "width: var(20px);", expectedPropertyValue: "" },
|
||||
{ cssText: "width: var(var(--prop));", expectedPropertyValue: "" },
|
||||
];
|
||||
|
||||
testcases.forEach(function (testcase) {
|
||||
test( function () {
|
||||
var div = document.createElement("div");
|
||||
document.body.appendChild(div);
|
||||
div.style.cssText = testcase.cssText;
|
||||
var actualPropertyValue = div.style.getPropertyValue("width").trim();
|
||||
assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
|
||||
document.body.removeChild(div);
|
||||
}, testcase.cssText);
|
||||
});
|
||||
|
||||
test( function() {
|
||||
var actualPropertyValue = document.getElementById("variable-reference-left-open").sheet.cssRules[0].style.getPropertyValue("width").trim();
|
||||
assert_equals(actualPropertyValue, "var(--prop");
|
||||
}, "Variable reference left open at end of stylesheet");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>test background property variable substitution</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/#variables-in-shorthands">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.testArea {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
background-image: url("../../../../images/green.png");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div class="testArea" id="background-attachment" style="--foo: fixed; background-attachment: var(--foo);"></div>
|
||||
<div class="testArea" id="background-clip" style="--foo: padding-box; background-clip: var(--foo);"></div>
|
||||
<div class="testArea" id="background-color" style="background-image: none; --foo: rgb(0, 128, 0); background-color: var(--foo);"></div>
|
||||
<div class="testArea" id="background-origin" style="--foo: content-box; background-origin: var(--foo);"></div>
|
||||
<div class="testArea" id="background-position" style="--foo: 0% 50%; background-position: var(--foo);"></div>
|
||||
<div class="testArea" id="background-repeat" style="--foo: repeat-x; background-repeat: var(--foo);"></div>
|
||||
<div class="testArea" id="background-size" style="--foo: cover; background-size: var(--foo);"></div>
|
||||
<div class="testArea" id="background-image-url" style="--foo: url('../../../../images/green-16x16.png'); background-image: var(--foo);"></div>
|
||||
<div class="testArea" id="background-image-linear-gradient" style="--location: bottom; background-image: linear-gradient(to var(--location), rgb(30,87,0) 0%,rgb(125,232,185) 100%);"></div>
|
||||
<div class="testArea" id="background-image-radial-gradient" style="--shape: ellipse; --location: farthest-corner; background-image: radial-gradient(var(--shape) var(--location) at 25px 25px, black 10%, green 90%);"></div>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
let templates = [
|
||||
{
|
||||
testName:"background-attachment",
|
||||
propertyName:"background-attachment",
|
||||
expectedValue:"fixed",
|
||||
},
|
||||
{
|
||||
testName:"background-clip",
|
||||
propertyName:"background-clip",
|
||||
expectedValue:"padding-box",
|
||||
},
|
||||
{
|
||||
testName:"background-color",
|
||||
propertyName:"background-color",
|
||||
expectedValue:"rgb(0, 128, 0)",
|
||||
},
|
||||
{
|
||||
testName:"background-origin",
|
||||
propertyName:"background-origin",
|
||||
expectedValue:"content-box",
|
||||
},
|
||||
{
|
||||
testName:"background-position",
|
||||
propertyName:"background-position",
|
||||
expectedValue:"0% 50%",
|
||||
},
|
||||
{
|
||||
testName:"background-repeat",
|
||||
propertyName:"background-repeat",
|
||||
expectedValue:"repeat-x",
|
||||
},
|
||||
{
|
||||
testName:"background-size",
|
||||
propertyName:"background-size",
|
||||
expectedValue:"cover",
|
||||
},
|
||||
{
|
||||
testName:"background-image-url",
|
||||
propertyName:"background-image",
|
||||
expectedValue:"url(\"../../../../images/green-16x16.png\")",
|
||||
},
|
||||
{
|
||||
testName:"background-image-linear-gradient",
|
||||
propertyName:"background-image",
|
||||
expectedValue:"linear-gradient(rgb(30, 87, 0) 0%, rgb(125, 232, 185) 100%)",
|
||||
},
|
||||
{
|
||||
testName:"background-image-radial-gradient",
|
||||
propertyName:"background-image",
|
||||
expectedValue:"radial-gradient(at 25px 25px, black 10%, green 90%)",
|
||||
},
|
||||
];
|
||||
|
||||
templates.forEach(function (template) {
|
||||
test( function () {
|
||||
let target = document.getElementById(template.testName);
|
||||
let computedStyle = window.getComputedStyle(target);
|
||||
let value = computedStyle.getPropertyValue(template.propertyName);
|
||||
|
||||
if (template.testName != "background-image-url")
|
||||
{
|
||||
assert_equals(value, template.expectedValue, "Expected Value should match actual value");
|
||||
}
|
||||
else
|
||||
{
|
||||
assert_regexp_match(value, /green-16x16/, "Actual value should contain expected substring");
|
||||
}
|
||||
}, template.testName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>test basic variable substitution</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/#defining-variables">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#testArea {
|
||||
color: orange;
|
||||
}
|
||||
#testArea > div {
|
||||
width: 50px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="testArea"></div>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
let templates = [
|
||||
{
|
||||
testName:"Simple substitution test",
|
||||
propertyName:"border-spacing",
|
||||
expectedValue:"20px 20px",
|
||||
style:"--gap: 20px;border-spacing: var(--gap);"
|
||||
},
|
||||
{
|
||||
testName:"You can't build up a single token where part of it is provided by a variable",
|
||||
propertyName:"border-spacing",
|
||||
expectedValue:"0px 0px",
|
||||
style:"--gap: 20;border-spacing: var(--gap)px;"
|
||||
},
|
||||
{
|
||||
testName:"Multiple variable references in a single property",
|
||||
propertyName:"border-spacing",
|
||||
expectedValue:"19px 47px",
|
||||
style:"--gap1: 19px;--gap2: 47px;border-spacing: var(--gap1) var(--gap2);"
|
||||
},
|
||||
{
|
||||
testName:"Multiple variable references in a single property (no spaces)",
|
||||
propertyName:"border-spacing",
|
||||
expectedValue:"23px 59px",
|
||||
style:"--gap1:23px;--gap2:59px;border-spacing:var(--gap1)var(--gap2);"
|
||||
},
|
||||
{
|
||||
testName:"Fallback value",
|
||||
propertyName:"border-spacing",
|
||||
expectedValue:"11px 11px",
|
||||
style:"border-spacing:var(--gap,11px);"
|
||||
},
|
||||
{
|
||||
testName:"Fallback value which is also a variable reference",
|
||||
propertyName:"border-spacing",
|
||||
expectedValue:"27px 27px",
|
||||
style:"--gap2: 27px; border-spacing:var(--gap,var(--gap2));"
|
||||
},
|
||||
{
|
||||
testName:"Multiple var references in fallback value",
|
||||
propertyName:"border-spacing",
|
||||
expectedValue:"66px 92px",
|
||||
style:"--gap2: 66px; --gap3: 92px; border-spacing:var(--gap,var(--gap2)var(--gap3));"
|
||||
},
|
||||
{
|
||||
testName:"Multiple nested fallbacks",
|
||||
propertyName:"border-spacing",
|
||||
expectedValue:"98px 18px",
|
||||
style:"--gap4: 98px 18px; border-spacing:var(--gap1,var(--gap2,var(--gap3,var(--gap4,var(--gap5)))));"
|
||||
},
|
||||
{
|
||||
testName:"Bad variable reference that should inherit by default",
|
||||
propertyName:"color",
|
||||
expectedValue:"rgb(255, 165, 0)",
|
||||
style:"color: var(--colorVar) pink;"
|
||||
},
|
||||
{
|
||||
testName:"Test that var reference doesn’t overwrite !important",
|
||||
propertyName:"width",
|
||||
expectedValue:"50px",
|
||||
style:"--varWidth: 28px; width: var(--varWidth);"
|
||||
},
|
||||
{
|
||||
testName:"Test that !important on a property that has a variable reference can overwrite !important",
|
||||
propertyName:"width",
|
||||
expectedValue:"28px",
|
||||
style:"--varWidth: 28px; width: var(--varWidth) !important;"
|
||||
},
|
||||
{
|
||||
testName:"Test that !important inside of var reference can't overwrite !important on property",
|
||||
propertyName:"width",
|
||||
expectedValue:"50px",
|
||||
style:"--varWidth: 28px !important; width: var(--varWidth);"
|
||||
},
|
||||
];
|
||||
|
||||
let testArea = document.getElementById("testArea");
|
||||
|
||||
templates.forEach(function (template) {
|
||||
test( function () {
|
||||
let div = document.createElement("div");
|
||||
div.style.cssText = template.style;
|
||||
testArea.appendChild(div);
|
||||
let computedStyle = window.getComputedStyle(div);
|
||||
let value = computedStyle.getPropertyValue(template.propertyName);
|
||||
assert_equals(value, template.expectedValue, "Expected Value should match actual value");
|
||||
testArea.removeChild(div);
|
||||
}, template.testName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>test filter function variable substitution</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>
|
||||
<style>
|
||||
.testArea {
|
||||
width: 250px;
|
||||
height: 167px;
|
||||
display: inline-block;
|
||||
background-image: url("../../../../images/a.jpg");
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div class="testArea" id="blur" style="--blur: 15px; filter: blur(var(--blur));"></div>
|
||||
<div class="testArea" id="brightness" style="--foo: 0.5; filter: brightness(var(--foo));"></div>
|
||||
<div class="testArea" id="contrast" style="--foo: 2; filter: contrast(var(--foo));"></div>
|
||||
<div class="testArea" id="grayscale" style="--foo: 1; filter: grayscale(var(--foo));"></div>
|
||||
<div class="testArea" id="invert" style="--foo: 1; filter: invert(var(--foo));"></div>
|
||||
<div class="testArea" id="sepia" style="--foo: 1; filter: sepia(var(--foo));"></div>
|
||||
<div class="testArea" id="saturate" style="--foo: 8; filter: saturate(var(--foo));"></div>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
let templates = [
|
||||
{
|
||||
testName:"blur",
|
||||
expectedValue:"blur(15px)",
|
||||
},
|
||||
{
|
||||
testName:"brightness",
|
||||
expectedValue:"brightness(0.5)",
|
||||
},
|
||||
{
|
||||
testName:"contrast",
|
||||
expectedValue:"contrast(2)",
|
||||
},
|
||||
{
|
||||
testName:"grayscale",
|
||||
expectedValue:"grayscale(1)",
|
||||
},
|
||||
{
|
||||
testName:"invert",
|
||||
expectedValue:"invert(1)",
|
||||
},
|
||||
{
|
||||
testName:"sepia",
|
||||
expectedValue:"sepia(1)",
|
||||
},
|
||||
{
|
||||
testName:"saturate",
|
||||
expectedValue:"saturate(8)",
|
||||
},
|
||||
];
|
||||
|
||||
templates.forEach(function (template) {
|
||||
test( function () {
|
||||
let target = document.getElementById(template.testName);
|
||||
let computedStyle = window.getComputedStyle(target);
|
||||
let value = computedStyle.getPropertyValue("filter");
|
||||
assert_equals(value, template.expectedValue, "Expected Value should match actual value");
|
||||
}, template.testName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>variable substitution into size properties on certain replaced elements</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>
|
||||
<style>
|
||||
.testcases > *
|
||||
{
|
||||
border: none;
|
||||
--w: 10px;
|
||||
--h: 10px;
|
||||
width: calc(var(--w) + 20px);
|
||||
height: calc(var(--h) + 20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="testcases">
|
||||
<iframe></iframe>
|
||||
<input type="text">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var testcases = document.querySelectorAll(".testcases > *");
|
||||
for (var i = 0; i < testcases.length; i++)
|
||||
{
|
||||
test(function() {
|
||||
assert_equals(window.getComputedStyle(testcases[i]).width, "30px");
|
||||
}, "width on " + testcases[i].tagName);
|
||||
test(function() {
|
||||
assert_equals(window.getComputedStyle(testcases[i]).height, "30px");
|
||||
}, "height on " + testcases[i].tagName);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>test shadow property variable substitution</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>
|
||||
<style>
|
||||
.testArea {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div class="testArea" id="box-shadow" style="--foo: rgb(0, 128, 0); box-shadow: 1px 1px 1px 1px var(--foo);">box-shadow</div>
|
||||
<div class="testArea" id="text-shadow" style="--foo: rgb(0, 128, 0); text-shadow: 1px 1px 1px var(--foo);">text-shadow</div>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
let templates = [
|
||||
{
|
||||
testName:"box-shadow",
|
||||
expectedValue:"1px 1px 1px 1px rgb(0,128,0)",
|
||||
},
|
||||
{
|
||||
testName:"text-shadow",
|
||||
expectedValue:"1px 1px 1px rgb(0,128,0)",
|
||||
},
|
||||
];
|
||||
|
||||
templates.forEach(function (template) {
|
||||
test( function () {
|
||||
let target = document.getElementById(template.testName);
|
||||
let computedStyle = window.getComputedStyle(target);
|
||||
let value = computedStyle.getPropertyValue(template.testName);
|
||||
assert_equals(value, template.expectedValue, "Expected Value should match actual value");
|
||||
}, template.testName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test shorthand variable substitution</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<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/#variables-in-shorthands">
|
||||
|
||||
<style>
|
||||
#target7parent > #target7 {
|
||||
margin: var(--invalid); /* invalid at compute time */
|
||||
}
|
||||
|
||||
#target7 {
|
||||
margin: 77px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target1" style="--prop: 8px; margin: var(--prop); margin-top: 10px"></div>
|
||||
<div id="target2" style="--prop: 8px; margin: var(--prop) !important; margin-top: 10px"></div>
|
||||
<div id="target3" style="--prop: 8px; margin-top: 10px !important; margin: var(--prop);"></div>
|
||||
<div id="target4" style="--prop: 3px 5px 7px 11px; margin: var(--prop);"></div>
|
||||
<div id="target5" style="--border1: 5px solid rgb(0, 0, 0); --border2: 3px dotted red; border-left: var(--border2); border: var(--border1);"></div>
|
||||
<div id="target6" style="--border1: 5px solid rgb(0, 0, 0); --border2: 3px dotted red; border: var(--border1); border-left: var(--border2);"></div>
|
||||
<div id="target7parent">
|
||||
<div id="target7"></div>
|
||||
</div>
|
||||
<div id="target8" style="transition: opacity var(--duration); --duration: 2s"></div>
|
||||
<div id="target9" style="border-style: dashed; --border1: 5px solid rgb(0, 0, 0); --border2: 3px dotted red; --width: 1px; border-left: var(--border1); border-width: var(--width);"></div>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
// Set a value via CSSOM to test precedence over markup values
|
||||
document.getElementById("target9").style.borderLeft = "var(--border2)";
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var testcases = [
|
||||
{ element: "target1", propertyName: "margin-left", expectedPropertyValue: "8px" },
|
||||
{ element: "target1", propertyName: "margin-top", expectedPropertyValue: "10px" },
|
||||
{ element: "target1", propertyName: "margin-right", expectedPropertyValue: "8px" },
|
||||
{ element: "target1", propertyName: "margin-bottom", expectedPropertyValue: "8px" },
|
||||
|
||||
{ element: "target2", propertyName: "margin-left", expectedPropertyValue: "8px" },
|
||||
{ element: "target2", propertyName: "margin-top", expectedPropertyValue: "8px" },
|
||||
{ element: "target2", propertyName: "margin-right", expectedPropertyValue: "8px" },
|
||||
{ element: "target2", propertyName: "margin-bottom", expectedPropertyValue: "8px" },
|
||||
|
||||
{ element: "target3", propertyName: "margin-left", expectedPropertyValue: "8px" },
|
||||
{ element: "target3", propertyName: "margin-top", expectedPropertyValue: "10px" },
|
||||
{ element: "target3", propertyName: "margin-right", expectedPropertyValue: "8px" },
|
||||
{ element: "target3", propertyName: "margin-bottom", expectedPropertyValue: "8px" },
|
||||
|
||||
{ element: "target4", propertyName: "margin-left", expectedPropertyValue: "11px" },
|
||||
{ element: "target4", propertyName: "margin-top", expectedPropertyValue: "3px" },
|
||||
{ element: "target4", propertyName: "margin-right", expectedPropertyValue: "5px" },
|
||||
{ element: "target4", propertyName: "margin-bottom", expectedPropertyValue: "7px" },
|
||||
|
||||
{ element: "target5", propertyName: "border-top-width", expectedPropertyValue: "5px" },
|
||||
{ element: "target5", propertyName: "border-top-style", expectedPropertyValue: "solid" },
|
||||
{ element: "target5", propertyName: "border-top-color", expectedPropertyValue: "rgb(0, 0, 0)" },
|
||||
{ element: "target5", propertyName: "border-right-width", expectedPropertyValue: "5px" },
|
||||
{ element: "target5", propertyName: "border-right-style", expectedPropertyValue: "solid" },
|
||||
{ element: "target5", propertyName: "border-right-color", expectedPropertyValue: "rgb(0, 0, 0)" },
|
||||
{ element: "target5", propertyName: "border-bottom-width", expectedPropertyValue: "5px" },
|
||||
{ element: "target5", propertyName: "border-bottom-style", expectedPropertyValue: "solid" },
|
||||
{ element: "target5", propertyName: "border-bottom-color", expectedPropertyValue: "rgb(0, 0, 0)" },
|
||||
{ element: "target5", propertyName: "border-left-width", expectedPropertyValue: "5px" },
|
||||
{ element: "target5", propertyName: "border-left-style", expectedPropertyValue: "solid" },
|
||||
{ element: "target5", propertyName: "border-left-color", expectedPropertyValue: "rgb(0, 0, 0)" },
|
||||
|
||||
{ element: "target6", propertyName: "border-top-width", expectedPropertyValue: "5px" },
|
||||
{ element: "target6", propertyName: "border-top-style", expectedPropertyValue: "solid" },
|
||||
{ element: "target6", propertyName: "border-top-color", expectedPropertyValue: "rgb(0, 0, 0)" },
|
||||
{ element: "target6", propertyName: "border-right-width", expectedPropertyValue: "5px" },
|
||||
{ element: "target6", propertyName: "border-right-style", expectedPropertyValue: "solid" },
|
||||
{ element: "target6", propertyName: "border-right-color", expectedPropertyValue: "rgb(0, 0, 0)" },
|
||||
{ element: "target6", propertyName: "border-bottom-width", expectedPropertyValue: "5px" },
|
||||
{ element: "target6", propertyName: "border-bottom-style", expectedPropertyValue: "solid" },
|
||||
{ element: "target6", propertyName: "border-bottom-color", expectedPropertyValue: "rgb(0, 0, 0)" },
|
||||
{ element: "target6", propertyName: "border-left-width", expectedPropertyValue: "3px" },
|
||||
{ element: "target6", propertyName: "border-left-style", expectedPropertyValue: "dotted" },
|
||||
{ element: "target6", propertyName: "border-left-color", expectedPropertyValue: "rgb(255, 0, 0)" },
|
||||
|
||||
{ element: "target7", propertyName: "margin-left", expectedPropertyValue: "0px" },
|
||||
{ element: "target7", propertyName: "margin-top", expectedPropertyValue: "0px" },
|
||||
{ element: "target7", propertyName: "margin-right", expectedPropertyValue: "0px" },
|
||||
{ element: "target7", propertyName: "margin-bottom", expectedPropertyValue: "0px" },
|
||||
|
||||
{ element: "target8", propertyName: "transition-duration", expectedPropertyValue: "2s" },
|
||||
|
||||
{ element: "target9", propertyName: "border-left-width", expectedPropertyValue: "3px" },
|
||||
{ element: "target9", propertyName: "border-left-style", expectedPropertyValue: "dotted" },
|
||||
{ element: "target9", propertyName: "border-left-color", expectedPropertyValue: "rgb(255, 0, 0)" },
|
||||
{ element: "target9", propertyName: "border-top-width", expectedPropertyValue: "1px" },
|
||||
{ element: "target9", propertyName: "border-right-width", expectedPropertyValue: "1px" },
|
||||
{ element: "target9", propertyName: "border-bottom-width", expectedPropertyValue: "1px" },
|
||||
];
|
||||
|
||||
testcases.forEach(function (testcase) {
|
||||
test( function () {
|
||||
var div = document.getElementById(testcase.element);
|
||||
var actualPropertyValue = window.getComputedStyle(div).getPropertyValue(testcase.propertyName);
|
||||
assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
|
||||
}, testcase.element + " " + testcase.propertyName);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Testing substituting variable references inside of variable declerations</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/#using-variables">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#target1 {
|
||||
margin: var(--var2);
|
||||
--var2: var(--var1) 10px;
|
||||
--var1: var(--var0) 13px 17px;
|
||||
--var0: 23px;
|
||||
}
|
||||
|
||||
#target2parent {
|
||||
--var2: var(--var1, fallback);
|
||||
--var1: var(--var2, fallback);
|
||||
}
|
||||
#target2 {
|
||||
--var1: good;
|
||||
}
|
||||
|
||||
#target3 {
|
||||
--var2: var(--var1, 3px);
|
||||
--var1: var(--var0, 5px);
|
||||
}
|
||||
|
||||
#target4 {
|
||||
--varA: var(--varB);
|
||||
--varB: var(--varA);
|
||||
--varC: var(--varB,13px);
|
||||
}
|
||||
|
||||
#target5 {
|
||||
--varA: var(--varB);
|
||||
--varB: var(--varA) var(--varC);
|
||||
--varC: var(--varB,13px);
|
||||
}
|
||||
|
||||
#target6 {
|
||||
--varA: var(--varB);
|
||||
--varB: var(--varA) var(--varDoesNotExist,var(--varC));
|
||||
--varC: var(--varB,13px);
|
||||
}
|
||||
|
||||
#target7 {
|
||||
--varDoesExist: 5px;
|
||||
--varA: var(--varB);
|
||||
--varB: var(--varA) var(--varDoesExist,var(--varC));
|
||||
--varC: var(--varB,13px);
|
||||
}
|
||||
|
||||
#target8 {
|
||||
--varA: var(--varA, 9px);
|
||||
--varB: var(--varA, 7px);
|
||||
}
|
||||
|
||||
#target9 {
|
||||
--varA: good;
|
||||
--varB: very var(--varA, var(--varC));
|
||||
--varC: var(--varB);
|
||||
}
|
||||
|
||||
#target10parent {
|
||||
--varA: good;
|
||||
--varB: Also good;
|
||||
--varC: another good one;
|
||||
}
|
||||
|
||||
#target10 {
|
||||
--varA: var(--varB);
|
||||
--varB: var(--varA);
|
||||
--varC: var(--varB);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target1"></div>
|
||||
<div id="target2parent">
|
||||
<div id="target2"></div>
|
||||
</div>
|
||||
<div id="target3"></div>
|
||||
<div id="target4"></div>
|
||||
<div id="target5"></div>
|
||||
<div id="target6"></div>
|
||||
<div id="target7"></div>
|
||||
<div id="target8"></div>
|
||||
<div id="target9"></div>
|
||||
<div id="target10parent">
|
||||
<div id="target10"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
var testcases = [
|
||||
{ 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" },
|
||||
{ element: "target1", propertyName: "margin-left", expectedPropertyValue: "10px" },
|
||||
|
||||
{ element: "target2parent", propertyName: "--var1", expectedPropertyValue: "" },
|
||||
{ element: "target2parent", propertyName: "--var2", expectedPropertyValue: "" },
|
||||
{ element: "target2", propertyName: "--var1", expectedPropertyValue: " good" },
|
||||
{ element: "target2", propertyName: "--var2", expectedPropertyValue: "" },
|
||||
|
||||
{ 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: "target5", propertyName: "--varA", expectedPropertyValue: "" },
|
||||
{ element: "target5", propertyName: "--varB", expectedPropertyValue: "" },
|
||||
{ element: "target5", propertyName: "--varC", expectedPropertyValue: "" },
|
||||
|
||||
{ element: "target6", propertyName: "--varA", expectedPropertyValue: "" },
|
||||
{ element: "target6", propertyName: "--varB", expectedPropertyValue: "" },
|
||||
{ element: "target6", propertyName: "--varC", expectedPropertyValue: "" },
|
||||
|
||||
{ element: "target7", propertyName: "--varA", expectedPropertyValue: "" },
|
||||
{ element: "target7", propertyName: "--varB", expectedPropertyValue: "" },
|
||||
{ element: "target7", propertyName: "--varC", expectedPropertyValue: "" },
|
||||
|
||||
{ element: "target8", propertyName: "--varA", expectedPropertyValue: "" },
|
||||
{ element: "target8", propertyName: "--varB", expectedPropertyValue: " 7px" },
|
||||
|
||||
{ element: "target9", propertyName: "--varA", expectedPropertyValue: " good" },
|
||||
{ element: "target9", propertyName: "--varB", expectedPropertyValue: "" },
|
||||
{ element: "target9", propertyName: "--varC", expectedPropertyValue: "" },
|
||||
|
||||
{ element: "target10", propertyName: "--varA", expectedPropertyValue: "" },
|
||||
{ element: "target10", propertyName: "--varB", expectedPropertyValue: "" },
|
||||
{ element: "target10", propertyName: "--varC", expectedPropertyValue: "" },
|
||||
];
|
||||
|
||||
testcases.forEach(function (testcase) {
|
||||
test( function () {
|
||||
var div = document.getElementById(testcase.element);
|
||||
var actualPropertyValue = window.getComputedStyle(div).getPropertyValue(testcase.propertyName);
|
||||
assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
|
||||
}, testcase.element + " " + testcase.propertyName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Transitions - Variable value specified before transition; 'all' keyword used</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: all;
|
||||
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>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables - Transitions - Variable value specified before transition; 'all' keyword used</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: all;
|
||||
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() {
|
||||
// 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>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!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>
|
||||
|
|
@ -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,63 @@
|
|||
<!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>
|
||||
|
||||
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