servo/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/chapter-3.xht

701 lines
No EOL
35 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using Cascading Variables: the var() notation - CSS Custom Properties Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Custom Properties Level 1 CR Test Suite</h1>
<h2>Using Cascading Variables: the var() notation (79 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="http://www.w3.org/TR/css-variables-1/#using-variables">3 Using Cascading Variables: the var() notation</a></th></tr>
<!-- 74 tests -->
<tr id="css-vars-custom-property-case-sensitive-001-3" class="primary">
<td><strong>
<a href="css-vars-custom-property-case-sensitive-001.xht">css-vars-custom-property-case-sensitive-001</a></strong></td>
<td><a href="reference/css-vars-custom-property-case-sensitive-ref.xht">=</a> </td>
<td></td>
<td>custom property names start with &quot;var-&quot; in lower case
<ul class="assert">
<li>Custom property names start with var- which must be lower case</li>
</ul>
</td>
</tr>
<tr id="css-vars-custom-property-inheritance-3" class="primary">
<td><strong>
<a href="css-vars-custom-property-inheritance.xht">css-vars-custom-property-inheritance</a></strong></td>
<td><a href="reference/css-vars-custom-property-inheritance-ref.xht">=</a> </td>
<td></td>
<td>custom properties use normal inheritance and cascade rules
<ul class="assert">
<li>custom properties are resolved with the normal inheritance and cascade rules</li>
</ul>
</td>
</tr>
<tr id="variable-declaration-52-3" class="primary">
<td><strong>
<a href="variable-declaration-52.xht">variable-declaration-52</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a variable that consists of a reference to an inherited variable whose value was a variable reference that used its fallback.
</td>
</tr>
<tr id="variable-declaration-53-3" class="primary">
<td><strong>
<a href="variable-declaration-53.xht">variable-declaration-53</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a variable that consists of two variable references without fallback and with no intervening white space.
</td>
</tr>
<tr id="variable-declaration-54-3" class="primary">
<td><strong>
<a href="variable-declaration-54.xht">variable-declaration-54</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a variable that consists of two variable references with the first variable reference using fallback and with no intervening white space.
</td>
</tr>
<tr id="variable-declaration-55-3" class="primary">
<td><strong>
<a href="variable-declaration-55.xht">variable-declaration-55</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a variable that consists of two variable references with the second variable reference using fallback and with no intervening white space.
</td>
</tr>
<tr id="variable-external-reference-01-3" class="primary">
<td><strong>
<a href="variable-external-reference-01.xht">variable-external-reference-01</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test the use of a variable in a non-custom property where the variable value is inherited within an external CSS.
</td>
</tr>
<tr id="variable-external-supports-01-3" class="primary">
<td><strong>
<a href="variable-external-supports-01.xht">variable-external-supports-01</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference within an external stylesheet file.
</td>
</tr>
<tr id="variable-reference-01-3" class="primary">
<td><strong>
<a href="variable-reference-01.xht">variable-reference-01</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test the use of a variable in a non-custom property where the variable value is inherited.
</td>
</tr>
<tr id="variable-reference-03-3" class="primary">
<td><strong>
<a href="variable-reference-03.xht">variable-reference-03</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test the use of two variables in a non-custom property where the variable values are inherited and one of the variable values consists only of white space.
</td>
</tr>
<tr id="variable-reference-04-3" class="primary">
<td><strong>
<a href="variable-reference-04.xht">variable-reference-04</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test the use of two variables in a non-custom property where one variable is inherited and the other references a non-existing variable with fallback that consists only of white space.
</td>
</tr>
<tr id="variable-reference-05-3" class="primary">
<td><strong>
<a href="variable-reference-05.xht">variable-reference-05</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test the use of a variable in a non-custom property where the values contains no tokens other than the variable reference.
</td>
</tr>
<tr id="variable-reference-06-3" class="primary">
<td><strong>
<a href="variable-reference-06.xht">variable-reference-06</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains no tokens.
</td>
</tr>
<tr id="variable-reference-07-3" class="primary">
<td><strong>
<a href="variable-reference-07.xht">variable-reference-07</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains a top level ';' token.
</td>
</tr>
<tr id="variable-reference-08-3" class="primary">
<td><strong>
<a href="variable-reference-08.xht">variable-reference-08</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains a top level '!' token.
</td>
</tr>
<tr id="variable-reference-09-3" class="primary">
<td><strong>
<a href="variable-reference-09.xht">variable-reference-09</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with a variable reference that has a non-top level ';' token.
</td>
</tr>
<tr id="variable-reference-10-3" class="primary">
<td><strong>
<a href="variable-reference-10.xht">variable-reference-10</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with a variable reference that has a non-top level '!' token.
</td>
</tr>
<tr id="variable-reference-11-3" class="primary">
<td><strong>
<a href="variable-reference-11.xht">variable-reference-11</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains nothing but a comment.
</td>
</tr>
<tr id="variable-reference-12-3" class="primary">
<td><strong>
<a href="variable-reference-12.xht">variable-reference-12</a></strong></td>
<td><a href="reference/variable-reference-12-ref.xht">=</a> </td>
<td></td>
<td>Test the use of variable references in the 'content' property.
</td>
</tr>
<tr id="variable-reference-15-3" class="primary">
<td><strong>
<a href="variable-reference-15.xht">variable-reference-15</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with two variable references with no intervening white space.
</td>
</tr>
<tr id="variable-reference-16-3" class="primary">
<td><strong>
<a href="variable-reference-16.xht">variable-reference-16</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that consists of a variable reference with a number of levels of variable reference fallbacks.
</td>
</tr>
<tr id="variable-reference-17-3" class="primary">
<td><strong>
<a href="variable-reference-17.xht">variable-reference-17</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that consists of a variable reference whose fallback contains a CDO token.
</td>
</tr>
<tr id="variable-reference-18-3" class="primary">
<td><strong>
<a href="variable-reference-18.xht">variable-reference-18</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a variable reference and balanced braces and square brackets.
</td>
</tr>
<tr id="variable-reference-19-3" class="primary">
<td><strong>
<a href="variable-reference-19.xht">variable-reference-19</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a variable reference and a non-top level ';' token.
</td>
</tr>
<tr id="variable-reference-20-3" class="primary">
<td><strong>
<a href="variable-reference-20.xht">variable-reference-20</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a variable reference whose function token is in uppercase.
</td>
</tr>
<tr id="variable-reference-21-3" class="primary">
<td><strong>
<a href="variable-reference-21.xht">variable-reference-21</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a reference to a variable whose name must be escaped.
</td>
</tr>
<tr id="variable-reference-22-3" class="primary">
<td><strong>
<a href="variable-reference-22.xht">variable-reference-22</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a reference to a variable whose name is U+FFFD but which was declared and referenced using a lone surrogate.
</td>
</tr>
<tr id="variable-reference-23-3" class="primary">
<td><strong>
<a href="variable-reference-23.xht">variable-reference-23</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a reference to a variable whose name is U+FFFD but which was declared using a lone surrogate.
</td>
</tr>
<tr id="variable-reference-24-3" class="primary">
<td><strong>
<a href="variable-reference-24.xht">variable-reference-24</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a reference to a variable whose name is U+FFFD but which was declared using an out-of-range Unicode character escape.
</td>
</tr>
<tr id="variable-reference-25-3" class="primary">
<td><strong>
<a href="variable-reference-25.xht">variable-reference-25</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a variable reference with no fallback and which is implicitly closed due to EOF.
</td>
</tr>
<tr id="variable-reference-26-3" class="primary">
<td><strong>
<a href="variable-reference-26.xht">variable-reference-26</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a variable reference with white space before its comma and fallback consisting only of white space and which is implicitly closed due to EOF.
</td>
</tr>
<tr id="variable-reference-27-3" class="primary">
<td><strong>
<a href="variable-reference-27.xht">variable-reference-27</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a variable reference with fallback consisting only of white space and which is implicitly closed due to EOF.
</td>
</tr>
<tr id="variable-reference-28-3" class="primary">
<td><strong>
<a href="variable-reference-28.xht">variable-reference-28</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a variable reference whose fallback is a variable reference, both of which are implicitly closed due to EOF.
</td>
</tr>
<tr id="variable-reference-29-3" class="primary">
<td><strong>
<a href="variable-reference-29.xht">variable-reference-29</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property that contains a variable reference with no fallback, and whose variable name is followed by a comment, and where the comment and the variable reference are implicitly closed due to EOF.
</td>
</tr>
<tr id="variable-reference-30-3" class="primary">
<td><strong>
<a href="variable-reference-30.xht">variable-reference-30</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with invalid syntax due to containing two &quot;!important&quot; priorities.
</td>
</tr>
<tr id="variable-reference-31-3" class="primary">
<td><strong>
<a href="variable-reference-31.xht">variable-reference-31</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with a variable reference that has a digit after the &quot;--&quot; prefix.
</td>
</tr>
<tr id="variable-reference-32-3" class="primary">
<td><strong>
<a href="variable-reference-32.xht">variable-reference-32</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with invalid syntax due to containing a variable reference with fallback that contains a bad string.
</td>
</tr>
<tr id="variable-reference-33-3" class="primary">
<td><strong>
<a href="variable-reference-33.xht">variable-reference-33</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property containing a variable reference with fallback is an implicitly closed string due to EOF.
</td>
</tr>
<tr id="variable-reference-34-3" class="primary">
<td><strong>
<a href="variable-reference-34.xht">variable-reference-34</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property with invalid syntax due to containing a variable reference with fallback that contains a bad URL.
</td>
</tr>
<tr id="variable-reference-35-3" class="primary">
<td><strong>
<a href="variable-reference-35.xht">variable-reference-35</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom property containing a variable reference with fallback is an implicitly closed URL due to EOF.
</td>
</tr>
<tr id="variable-reference-40-3" class="primary">
<td><strong>
<a href="variable-reference-40.xht">variable-reference-40</a></strong></td>
<td><a href="reference/variable-reference-40-ref.xht">=</a> </td>
<td></td>
<td>Test that a variable reference within a gradient value in a border-image shorthand parses correctly.
</td>
</tr>
<tr id="variable-supports-01-3" class="primary">
<td><strong>
<a href="variable-supports-01.xht">variable-supports-01</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference and no white space tokens.
</td>
</tr>
<tr id="variable-supports-02-3" class="primary">
<td><strong>
<a href="variable-supports-02.xht">variable-supports-02</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule where the property value contains a white space token followed by a variable reference.
</td>
</tr>
<tr id="variable-supports-03-3" class="primary">
<td><strong>
<a href="variable-supports-03.xht">variable-supports-03</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference surrounded by white space tokens.
</td>
</tr>
<tr id="variable-supports-04-3" class="primary">
<td><strong>
<a href="variable-supports-04.xht">variable-supports-04</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference surrounded by white space tokens and with white space surrounding the variable name.
</td>
</tr>
<tr id="variable-supports-05-3" class="primary">
<td><strong>
<a href="variable-supports-05.xht">variable-supports-05</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens.
</td>
</tr>
<tr id="variable-supports-06-3" class="primary">
<td><strong>
<a href="variable-supports-06.xht">variable-supports-06</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference with fallback that is only white space.
</td>
</tr>
<tr id="variable-supports-07-3" class="primary">
<td><strong>
<a href="variable-supports-07.xht">variable-supports-07</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens, just a comment.
</td>
</tr>
<tr id="variable-supports-08-3" class="primary">
<td><strong>
<a href="variable-supports-08.xht">variable-supports-08</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule where the property value contains a comment and an identifier.
</td>
</tr>
<tr id="variable-supports-09-3" class="primary">
<td><strong>
<a href="variable-supports-09.xht">variable-supports-09</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having a '!' token at the top level of its fallback.
</td>
</tr>
<tr id="variable-supports-10-3" class="primary">
<td><strong>
<a href="variable-supports-10.xht">variable-supports-10</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having &quot;!important&quot; at the top level of its fallback.
</td>
</tr>
<tr id="variable-supports-11-3" class="primary">
<td><strong>
<a href="variable-supports-11.xht">variable-supports-11</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing 'color' property declaration in an @supports rule with a variable reference that comes after a non-color value.
</td>
</tr>
<tr id="variable-supports-12-3" class="primary">
<td><strong>
<a href="variable-supports-12.xht">variable-supports-12</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing 'color' property declaration in an @supports rule with a variable reference that comes before a non-color value.
</td>
</tr>
<tr id="variable-supports-13-3" class="primary">
<td><strong>
<a href="variable-supports-13.xht">variable-supports-13</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing 'color' property declaration in an @supports rule with a range of different tokens and a variable reference not at the top level.
</td>
</tr>
<tr id="variable-supports-14-3" class="primary">
<td><strong>
<a href="variable-supports-14.xht">variable-supports-14</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule with a variable reference and an &quot;!important&quot; priority.
</td>
</tr>
<tr id="variable-supports-15-3" class="primary">
<td><strong>
<a href="variable-supports-15.xht">variable-supports-15</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule with two adjacent variable references with no intervening white space.
</td>
</tr>
<tr id="variable-supports-16-3" class="primary">
<td><strong>
<a href="variable-supports-16.xht">variable-supports-16</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule with a variable reference that has a number of levels of variable reference fallbacks.
</td>
</tr>
<tr id="variable-supports-17-3" class="primary">
<td><strong>
<a href="variable-supports-17.xht">variable-supports-17</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a failing non-custom property declaration in an @supports rule with two &quot;!important&quot; priorities.
</td>
</tr>
<tr id="variable-supports-18-3" class="primary">
<td><strong>
<a href="variable-supports-18.xht">variable-supports-18</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a CDO token.
</td>
</tr>
<tr id="variable-supports-19-3" class="primary">
<td><strong>
<a href="variable-supports-19.xht">variable-supports-19</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a CDC token.
</td>
</tr>
<tr id="variable-supports-20-3" class="primary">
<td><strong>
<a href="variable-supports-20.xht">variable-supports-20</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and balanced braces and square brackets.
</td>
</tr>
<tr id="variable-supports-21-3" class="primary">
<td><strong>
<a href="variable-supports-21.xht">variable-supports-21</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having a ';' token at the top level of its fallback.
</td>
</tr>
<tr id="variable-supports-22-3" class="primary">
<td><strong>
<a href="variable-supports-22.xht">variable-supports-22</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a non-top level ';' token.
</td>
</tr>
<tr id="variable-supports-23-3" class="primary">
<td><strong>
<a href="variable-supports-23.xht">variable-supports-23</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a failing non-custom property declaration in an @supports rule whose value contains a variable reference with a top level ';' token.
</td>
</tr>
<tr id="variable-supports-24-3" class="primary">
<td><strong>
<a href="variable-supports-24.xht">variable-supports-24</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a non-top level ';' token in its fallback.
</td>
</tr>
<tr id="variable-supports-25-3" class="primary">
<td><strong>
<a href="variable-supports-25.xht">variable-supports-25</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference whose function token is in uppercase.
</td>
</tr>
<tr id="variable-supports-26-3" class="primary">
<td><strong>
<a href="variable-supports-26.xht">variable-supports-26</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a digit after the &quot;--&quot; variable name prefix.
</td>
</tr>
<tr id="variable-supports-27-3" class="primary">
<td><strong>
<a href="variable-supports-27.xht">variable-supports-27</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a variable name beginning with an escaped digit.
</td>
</tr>
<tr id="variable-supports-28-3" class="primary">
<td><strong>
<a href="variable-supports-28.xht">variable-supports-28</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a U+FFFD variable name specified by an escaped lone surrogate.
</td>
</tr>
<tr id="variable-supports-29-3" class="primary">
<td><strong>
<a href="variable-supports-29.xht">variable-supports-29</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a U+FFFD variable name specified by an out-of-range Unicode character escape.
</td>
</tr>
<tr id="variable-supports-30-3" class="primary">
<td><strong>
<a href="variable-supports-30.xht">variable-supports-30</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a dimension token as the variable name.
</td>
</tr>
<tr id="variable-supports-31-3" class="primary">
<td><strong>
<a href="variable-supports-31.xht">variable-supports-31</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with white space surrounding the fallback comma.
</td>
</tr>
<tr id="variable-supports-32-3" class="primary">
<td><strong>
<a href="variable-supports-32.xht">variable-supports-32</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a passing non-custom shorthand property declaration in an @supports rule whose value contains a variable reference.
</td>
</tr>
<tr id="variable-supports-64-3" class="primary">
<td><strong>
<a href="variable-supports-64.xht">variable-supports-64</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test a failing custom property declaration in an @supports rule whose value is a variable reference with a dimension token as the variable name.
</td>
</tr>
</tbody>
<tbody id="s3.#funcdef-var">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#substitute-a-var">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="http://www.w3.org/TR/css-variables-1/#invalid-variables">3.1 Invalid Variables</a></th></tr>
<!-- 2 tests -->
<tr id="variable-declaration-51-3.1" class="primary">
<td><strong>
<a href="variable-declaration-51.xht">variable-declaration-51</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a variable that consists of a reference to an invalid inherited variable.
</td>
</tr>
<tr id="variable-reference-02-3.1" class="primary">
<td><strong>
<a href="variable-reference-02.xht">variable-reference-02</a></strong></td>
<td><a href="support/color-green-ref.xht">=</a> </td>
<td></td>
<td>Test the use of a variable in a non-custom property where the value is invalid at computed-value time due to referencing a non-existent variable.
</td>
</tr>
</tbody>
<tbody id="s3.1.#invalid-at-computed-value-time">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.2">+</a>
<a href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands">3.2 Variables in Shorthand Properties</a></th></tr>
<!-- 3 tests -->
<tr id="variable-reference-36-3.2" class="primary">
<td><strong>
<a href="variable-reference-36.xht">variable-reference-36</a></strong></td>
<td><a href="reference/variable-reference-36-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom shorthand property containing a variable reference.
</td>
</tr>
<tr id="variable-reference-37-3.2" class="primary">
<td><strong>
<a href="variable-reference-37.xht">variable-reference-37</a></strong></td>
<td><a href="reference/variable-reference-37-ref.xht">=</a> </td>
<td></td>
<td>Test declaring a non-custom shorthand property containing a variable reference, with a subsequent property in the declaration block that overrides one of the shorthand's components.
</td>
</tr>
<tr id="variable-reference-38-3.2" class="primary">
<td><strong>
<a href="variable-reference-38.xht">variable-reference-38</a></strong></td>
<td><a href="reference/variable-reference-38-ref.xht">=</a> </td>
<td></td>
<td>Test using variables in overlapping shorthands.
</td>
</tr>
</tbody>
<tbody id="s3.2.#pending-substitution-value">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>