diff options
Diffstat (limited to 'tests/wpt/css-tests/css-variables-1_dev')
40 files changed, 889 insertions, 24 deletions
diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/chapter-2.htm b/tests/wpt/css-tests/css-variables-1_dev/html/chapter-2.htm index b8bfa2b4da2..4e03e8a3b61 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/html/chapter-2.htm +++ b/tests/wpt/css-tests/css-variables-1_dev/html/chapter-2.htm @@ -13,7 +13,7 @@ <body> <h1>CSS Custom Properties Level 1 CR Test Suite</h1> - <h2>Defining Custom Properties: the --* family of properties (96 tests)</h2> + <h2>Defining Custom Properties: the --* family of properties (97 tests)</h2> <table width="100%"> <col id="test-column"> <col id="refs-column"> @@ -335,7 +335,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s2.1">+</a> <a href="https://www.w3.org/TR/css-variables-1/#syntax">2.1 Custom Property Value Syntax</a></th></tr> - <!-- 55 tests --> + <!-- 56 tests --> <tr id="variable-declaration-01-2.1" class=""> <td> <a href="variable-declaration-01.htm">variable-declaration-01</a></td> @@ -568,6 +568,14 @@ <td>Test declaring a variable in an external CSS file. </td> </tr> + <tr id="variable-reference-without-whitespace-2.1" class=""> + <td> + <a href="variable-reference-without-whitespace.htm">variable-reference-without-whitespace</a></td> + <td><a href="reference/variable-reference-without-whitespace-ref.htm">=</a> </td> + <td></td> + <td>Variable reference without whitespace + </td> + </tr> <tr id="variable-supports-33-2.1" class=""> <td> <a href="variable-supports-33.htm">variable-supports-33</a></td> diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/chapter-3.htm b/tests/wpt/css-tests/css-variables-1_dev/html/chapter-3.htm index 01ed88cf92a..29328fa9304 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/html/chapter-3.htm +++ b/tests/wpt/css-tests/css-variables-1_dev/html/chapter-3.htm @@ -13,7 +13,7 @@ <body> <h1>CSS Custom Properties Level 1 CR Test Suite</h1> - <h2>Using Cascading Variables: the var() notation (79 tests)</h2> + <h2>Using Cascading Variables: the var() notation (81 tests)</h2> <table width="100%"> <col id="test-column"> <col id="refs-column"> @@ -678,7 +678,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s3.2">+</a> <a href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands">3.2 Variables in Shorthand Properties</a></th></tr> - <!-- 3 tests --> + <!-- 5 tests --> <tr id="variable-reference-36-3.2" class=""> <td> <a href="variable-reference-36.htm">variable-reference-36</a></td> @@ -703,6 +703,22 @@ <td>Test using variables in overlapping shorthands. </td> </tr> + <tr id="vars-background-shorthand-001-3.2" class="primary"> + <td><strong> + <a href="vars-background-shorthand-001.htm">vars-background-shorthand-001</a></strong></td> + <td><a href="reference/vars-background-shorthand-001-ref.htm">=</a> </td> + <td></td> + <td>CSS Variables 1: Test variables in background shorthand. + </td> + </tr> + <tr id="vars-font-shorthand-001-3.2" class="primary ahem"> + <td><strong> + <a href="vars-font-shorthand-001.htm">vars-font-shorthand-001</a></strong></td> + <td><a href="reference/vars-font-shorthand-001-ref.htm">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>CSS Variables 1: Test variables in @font-face, font-family, font shorthand. + </td> + </tr> </tbody> <tbody id="s3.2.#pending-substitution-value"> <!-- 0 tests --> diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/reference/variable-reference-without-whitespace-ref.htm b/tests/wpt/css-tests/css-variables-1_dev/html/reference/variable-reference-without-whitespace-ref.htm new file mode 100644 index 00000000000..d749ff62dfc --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/html/reference/variable-reference-without-whitespace-ref.htm @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html><head><title>Variable reference without whitespace - reference</title> +<link href="http://exyr.org/about/" rel="author" title="Simon Sapin"> +</head><body><p>The next four lines must be identical, containing only zeroes: +</p><p>0 0 0 +</p><p>0 0 0 +</p><p>0 0 0 +</p><p>0 0 0 + +</p><p>The next four lines must be identical, containing increasing integers: +</p><p>1 2 3 +</p><p>1 2 3 +</p><p>1 2 3 +</p><p>1 2 3 +</p></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/reference/vars-background-shorthand-001-ref.htm b/tests/wpt/css-tests/css-variables-1_dev/html/reference/vars-background-shorthand-001-ref.htm new file mode 100644 index 00000000000..d1b674a4476 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/html/reference/vars-background-shorthand-001-ref.htm @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html><head><title>CSS Variables 1: Test variables in background shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou"> +<style> +div { + width: 50px; + height: 50px; + padding: 50px; + margin: 10px; + display: inline-block; + background: green; +} +</style> +</head><body><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> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/reference/vars-font-shorthand-001-ref.htm b/tests/wpt/css-tests/css-variables-1_dev/html/reference/vars-font-shorthand-001-ref.htm new file mode 100644 index 00000000000..d7138058a92 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/html/reference/vars-font-shorthand-001-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><head><title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou"> +<style> + + + +div { + width: 150px; + height: 150px; + margin: 10px; + display: inline-block; + vertical-align: middle; + background: green; + text-align: center; + color: green; + overflow: hidden; +} + +</style> +</head><body><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> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/reftest-toc.htm b/tests/wpt/css-tests/css-variables-1_dev/html/reftest-toc.htm index 7d50d8e0573..a89416c4b4d 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/html/reftest-toc.htm +++ b/tests/wpt/css-tests/css-variables-1_dev/html/reftest-toc.htm @@ -880,6 +880,14 @@ <td rowspan="1"></td> </tr> </tbody> + <tbody id="variable-reference-without-whitespace" class=""> + <tr> + <td rowspan="1" title="Variable reference without whitespace"> + <a href="variable-reference-without-whitespace.htm">variable-reference-without-whitespace</a></td> + <td><a href="reference/variable-reference-without-whitespace-ref.htm">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> <tbody id="variable-supports-01" class=""> <tr> <td rowspan="1" title="Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference and no white space tokens."> @@ -1416,6 +1424,22 @@ <td rowspan="1"></td> </tr> </tbody> + <tbody id="vars-background-shorthand-001" class=""> + <tr> + <td rowspan="1" title="CSS Variables 1: Test variables in background shorthand."> + <a href="vars-background-shorthand-001.htm">vars-background-shorthand-001</a></td> + <td><a href="reference/vars-background-shorthand-001-ref.htm">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vars-font-shorthand-001" class="ahem"> + <tr> + <td rowspan="1" title="CSS Variables 1: Test variables in @font-face, font-family, font shorthand."> + <a href="vars-font-shorthand-001.htm">vars-font-shorthand-001</a></td> + <td><a href="reference/vars-font-shorthand-001-ref.htm">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> </table> </body> diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/reftest.list b/tests/wpt/css-tests/css-variables-1_dev/html/reftest.list index 5a47e17ae20..75c588d8b7e 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/html/reftest.list +++ b/tests/wpt/css-tests/css-variables-1_dev/html/reftest.list @@ -106,6 +106,7 @@ variable-reference-37.htm == reference/variable-reference-37-ref.htm variable-reference-38.htm == reference/variable-reference-38-ref.htm variable-reference-39.htm == support/color-green-ref.htm variable-reference-40.htm == reference/variable-reference-40-ref.htm +variable-reference-without-whitespace.htm == reference/variable-reference-without-whitespace-ref.htm variable-supports-01.htm == support/color-green-ref.htm variable-supports-02.htm == support/color-green-ref.htm variable-supports-03.htm == support/color-green-ref.htm @@ -173,3 +174,5 @@ variable-supports-64.htm == support/color-green-ref.htm variable-supports-65.htm == support/color-green-ref.htm variable-supports-66.htm == support/color-green-ref.htm variable-supports-67.htm == support/color-green-ref.htm +vars-background-shorthand-001.htm == reference/vars-background-shorthand-001-ref.htm +vars-font-shorthand-001.htm == reference/vars-font-shorthand-001-ref.htm diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/test_variable_legal_values.htm b/tests/wpt/css-tests/css-variables-1_dev/html/test_variable_legal_values.htm index 965fa5e957a..e67ae00efb5 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/html/test_variable_legal_values.htm +++ b/tests/wpt/css-tests/css-variables-1_dev/html/test_variable_legal_values.htm @@ -1,7 +1,7 @@ <!DOCTYPE html> <html><head> <title>CSS Variables Allowed Syntax</title> - <link href="http://dbaron.org/" rel="author" title="L. David Baron"> + <link href="https://dbaron.org/" rel="author" title="L. David Baron"> <link href="http://mozilla.com/" rel="author" title="Mozilla Corporation"> <link href="http://www.w3.org/TR/css-variables-1/#defining-variables" rel="help"> <meta 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].' name="assert"> diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/toc.htm b/tests/wpt/css-tests/css-variables-1_dev/html/toc.htm index 0f2aff6a75b..681f4a6b4e5 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/html/toc.htm +++ b/tests/wpt/css-tests/css-variables-1_dev/html/toc.htm @@ -27,12 +27,12 @@ <tbody id="s2"> <tr><th><a href="chapter-2.htm">Chapter 2 - Defining Custom Properties: the --* family of properties</a></th> - <td>(96 Tests)</td></tr> + <td>(97 Tests)</td></tr> </tbody> <tbody id="s3"> <tr><th><a href="chapter-3.htm">Chapter 3 - Using Cascading Variables: the var() notation</a></th> - <td>(79 Tests)</td></tr> + <td>(81 Tests)</td></tr> </tbody> <tbody id="s4"> <tr><th><a href="chapter-4.htm">Chapter 4 - diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/variable-reference-without-whitespace.htm b/tests/wpt/css-tests/css-variables-1_dev/html/variable-reference-without-whitespace.htm new file mode 100644 index 00000000000..470da1a6556 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/html/variable-reference-without-whitespace.htm @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html><head><title>Variable reference without whitespace</title> +<link href="reference/variable-reference-without-whitespace-ref.htm" rel="match"> +<link href="http://www.w3.org/TR/css-variables-1/#syntax" rel="help"> +<link href="http://exyr.org/about/" rel="author" title="Simon Sapin"> +<meta 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." rel="assert"> +<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> +</head><body><p>The next four lines must be identical, containing only zeroes: +</p><p id="test_1"><span></span> <span></span> <span></span> +</p><p id="test_2"><span></span> <span></span> <span></span> +</p><p id="test_3"><span></span> <span></span> <span></span> +</p><p>0 0 0 + +</p><p>The next four lines must be identical, containing increasing integers: +</p><p id="control_1"><span></span> <span></span> <span></span> +</p><p id="control_2"><span></span> <span></span> <span></span> +</p><p id="control_3"><span></span> <span></span> <span></span> +</p><p>1 2 3 +</p></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/vars-background-shorthand-001.htm b/tests/wpt/css-tests/css-variables-1_dev/html/vars-background-shorthand-001.htm new file mode 100644 index 00000000000..cd4367a1f23 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/html/vars-background-shorthand-001.htm @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html><head><title>CSS Variables 1: Test variables in background shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou"> +<link href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands" rel="help"> +<link href="reference/vars-background-shorthand-001-ref.htm" rel="match"> +<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> +</head><body><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> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/html/vars-font-shorthand-001.htm b/tests/wpt/css-tests/css-variables-1_dev/html/vars-font-shorthand-001.htm new file mode 100644 index 00000000000..bf9912de788 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/html/vars-font-shorthand-001.htm @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html><head><title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou"> +<link href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands" rel="help"> +<link href="reference/vars-font-shorthand-001-ref.htm" rel="match"> +<meta content="ahem" name="flags"> +<style> + +@font-face { + font-family: Ahem; + src: url(https://cdn.rawgit.com/w3c/csswg-test/master/fonts/ahem/ahem.ttf); +} + +div { + width: 150px; + height: 150px; + margin: 10px; + display: inline-block; + vertical-align: middle; + background: red; + text-align: center; + color: green; + overflow: hidden; +} + +div#d1 { + --foo: Ahem; + font-family: var(--foo); + font-size: 150px; + line-height: 1; +} + +div#d2 { + --foo: 0 Ahem; + font: var(--foo); + font-size: 150px; + line-height: 150px; +} + +div#d3 { + --foo: Ahem, sans-serif; + font: 150px/1 var(--foo); +} + +div#d4 { + --foo: Ahem; + font: 150px/1 var(--foo), sans-serif; +} + +div#d5 { + --foo: 1 Ahem; + font: 150px/var(--foo); +} + +div#d6 { + --foo: 150px/1 Ahem; + font: var(--foo); +} +</style> +</head><body><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> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/implementation-report-TEMPLATE.data b/tests/wpt/css-tests/css-variables-1_dev/implementation-report-TEMPLATE.data index 84a924a3a4e..1b5c8f3d9dd 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/implementation-report-TEMPLATE.data +++ b/tests/wpt/css-tests/css-variables-1_dev/implementation-report-TEMPLATE.data @@ -7,8 +7,8 @@ html/css-vars-custom-property-case-sensitive-001.htm 6621d4c36be7454a8997bbf8159 xhtml1/css-vars-custom-property-case-sensitive-001.xht 6621d4c36be7454a8997bbf8159288825000133e ? html/css-vars-custom-property-inheritance.htm 81714590ccc94dddb3216fd5223891ccc9ad4b6c ? xhtml1/css-vars-custom-property-inheritance.xht 81714590ccc94dddb3216fd5223891ccc9ad4b6c ? -html/test_variable_legal_values.htm 019cbba84cf2951566a7d363f4ddc78b6b6f8c65 ? -xhtml1/test_variable_legal_values.xht 019cbba84cf2951566a7d363f4ddc78b6b6f8c65 ? +html/test_variable_legal_values.htm b9949c109b9887821bf9c20a5f783c657af9c21d ? +xhtml1/test_variable_legal_values.xht b9949c109b9887821bf9c20a5f783c657af9c21d ? html/variable-declaration-01.htm 0d1c6d96e6f0c7dc9082c8d616b52a74a92c5bac ? xhtml1/variable-declaration-01.xht 0d1c6d96e6f0c7dc9082c8d616b52a74a92c5bac ? html/variable-declaration-02.htm c6d3c7d84d4ea1c2322da25c5b67babc33c90506 ? @@ -219,6 +219,8 @@ html/variable-reference-39.htm 87d4f5a8474c7d505a5cedf330b69adbe72425e5 ? xhtml1/variable-reference-39.xht 87d4f5a8474c7d505a5cedf330b69adbe72425e5 ? html/variable-reference-40.htm 2dc90de2f2ee674455cc427c1ce8f1e62d9dffee ? xhtml1/variable-reference-40.xht 2dc90de2f2ee674455cc427c1ce8f1e62d9dffee ? +html/variable-reference-without-whitespace.htm 062eab7f81eadff677d0987d9348686f1d158c65 ? +xhtml1/variable-reference-without-whitespace.xht 062eab7f81eadff677d0987d9348686f1d158c65 ? html/variable-supports-01.htm aea47c3174023e5424aa8e183ae5915ea18d4ebc ? xhtml1/variable-supports-01.xht aea47c3174023e5424aa8e183ae5915ea18d4ebc ? html/variable-supports-02.htm 69456e5880107a4d5d00ef0d6ccc9475abb77331 ? @@ -353,3 +355,7 @@ html/variable-supports-66.htm 2ca28cc9c29d2083fe0b3ed3a4cb764d41a44ed0 ? xhtml1/variable-supports-66.xht 2ca28cc9c29d2083fe0b3ed3a4cb764d41a44ed0 ? html/variable-supports-67.htm d9318198dd393ada88c2c242984cb90ebafa41ee ? xhtml1/variable-supports-67.xht d9318198dd393ada88c2c242984cb90ebafa41ee ? +html/vars-background-shorthand-001.htm d7b7e9048415c5b744cc06421f3f773666fc1d0c ? +xhtml1/vars-background-shorthand-001.xht d7b7e9048415c5b744cc06421f3f773666fc1d0c ? +html/vars-font-shorthand-001.htm 22e745357e4d44cccd6e43a7347ce51c7fe75480 ? +xhtml1/vars-font-shorthand-001.xht 22e745357e4d44cccd6e43a7347ce51c7fe75480 ? diff --git a/tests/wpt/css-tests/css-variables-1_dev/index.htm b/tests/wpt/css-tests/css-variables-1_dev/index.htm index a74f442cee3..2d1834b4cce 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/index.htm +++ b/tests/wpt/css-tests/css-variables-1_dev/index.htm @@ -133,9 +133,11 @@ <ul> <li>Cameron McCormack</li> <li>L. David Baron</li> + <li>Lea Verou</li> <li>Mihaela Velimiroviciu</li> <li>Mozilla Corporation</li> <li>Noah Collins</li> + <li>Simon Sapin</li> </ul> </body> diff --git a/tests/wpt/css-tests/css-variables-1_dev/index.xht b/tests/wpt/css-tests/css-variables-1_dev/index.xht index 18e20249652..4ccf7e74431 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/index.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/index.xht @@ -133,9 +133,11 @@ <ul> <li>Cameron McCormack</li> <li>L. David Baron</li> + <li>Lea Verou</li> <li>Mihaela Velimiroviciu</li> <li>Mozilla Corporation</li> <li>Noah Collins</li> + <li>Simon Sapin</li> </ul> </body> diff --git a/tests/wpt/css-tests/css-variables-1_dev/testinfo.data b/tests/wpt/css-tests/css-variables-1_dev/testinfo.data index 1cf3ad2cc93..fb10d2870d5 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/testinfo.data +++ b/tests/wpt/css-tests/css-variables-1_dev/testinfo.data @@ -1,7 +1,7 @@ id references title flags links revision credits assertion css-vars-custom-property-case-sensitive-001 reference/css-vars-custom-property-case-sensitive-ref custom property names are case-sensitive http://www.w3.org/TR/css-variables-1/#using-variables 6621d4c36be7454a8997bbf8159288825000133e `Noah Collins`<mailto:noahcollins@gmail.com> Custom property names are case-sensitive css-vars-custom-property-inheritance reference/css-vars-custom-property-inheritance-ref custom properties use normal inheritance and cascade rules http://www.w3.org/TR/css-variables-1/#using-variables 81714590ccc94dddb3216fd5223891ccc9ad4b6c `Noah Collins`<mailto:noahcollins@gmail.com> custom properties are resolved with the normal inheritance and cascade rules -test_variable_legal_values CSS Variables Allowed Syntax script http://www.w3.org/TR/css-variables-1/#defining-variables 019cbba84cf2951566a7d363f4ddc78b6b6f8c65 `L. David Baron`<http://dbaron.org/>,`Mozilla Corporation`<http://mozilla.com/> The <value> type used in the syntax above is defined as anything matching the "value" production in CSS 2.1 Chapter 4.1 [CSS21]. +test_variable_legal_values CSS Variables Allowed Syntax script http://www.w3.org/TR/css-variables-1/#defining-variables b9949c109b9887821bf9c20a5f783c657af9c21d `L. David Baron`<https://dbaron.org/>,`Mozilla Corporation`<http://mozilla.com/> The <value> type used in the syntax above is defined as anything matching the "value" production in CSS 2.1 Chapter 4.1 [CSS21]. variable-declaration-01 support/color-green-ref Test declaring a variable consisting of a single token preceded by white space. http://www.w3.org/TR/css-variables-1/#syntax 0d1c6d96e6f0c7dc9082c8d616b52a74a92c5bac `Cameron McCormack`<mailto:cam@mcc.id.au> variable-declaration-02 support/color-green-ref Test declaring a variable consisting of a single token with no preceding white space. http://www.w3.org/TR/css-variables-1/#syntax c6d3c7d84d4ea1c2322da25c5b67babc33c90506 `Cameron McCormack`<mailto:cam@mcc.id.au> variable-declaration-03 support/color-green-ref Test declaring a variable that references another variable. http://www.w3.org/TR/css-variables-1/#syntax 37c4b2cf1249e34ce61286f453d19be7bea68358 `Cameron McCormack`<mailto:cam@mcc.id.au> @@ -107,6 +107,7 @@ variable-reference-37 reference/variable-reference-37-ref Test declaring a non-c variable-reference-38 reference/variable-reference-38-ref Test using variables in overlapping shorthands. http://www.w3.org/TR/css-variables-1/#variables-in-shorthands a51a3479ee624ccac3e677ebf988d5f0ff785a51 `Cameron McCormack`<mailto:cam@mcc.id.au> variable-reference-39 support/color-green-ref Test declaring a variable that references itself but uses fallback. http://www.w3.org/TR/css-variables-1/#cycles 87d4f5a8474c7d505a5cedf330b69adbe72425e5 `Cameron McCormack`<mailto:cam@mcc.id.au> variable-reference-40 reference/variable-reference-40-ref Test that a variable reference within a gradient value in a border-image shorthand parses correctly. http://www.w3.org/TR/css-variables-1/#using-variables 2dc90de2f2ee674455cc427c1ce8f1e62d9dffee `Cameron McCormack`<mailto:cam@mcc.id.au> +variable-reference-without-whitespace reference/variable-reference-without-whitespace-ref Variable reference without whitespace http://www.w3.org/TR/css-variables-1/#syntax 062eab7f81eadff677d0987d9348686f1d158c65 `Simon Sapin`<http://exyr.org/about/> variable-supports-01 support/color-green-ref Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference and no white space tokens. http://www.w3.org/TR/css-variables-1/#using-variables aea47c3174023e5424aa8e183ae5915ea18d4ebc `Cameron McCormack`<mailto:cam@mcc.id.au> variable-supports-02 support/color-green-ref 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. http://www.w3.org/TR/css-variables-1/#using-variables 69456e5880107a4d5d00ef0d6ccc9475abb77331 `Cameron McCormack`<mailto:cam@mcc.id.au> variable-supports-03 support/color-green-ref Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference surrounded by white space tokens. http://www.w3.org/TR/css-variables-1/#using-variables c52eb1e427e47a9631766a578d14031f33f14a6e `Cameron McCormack`<mailto:cam@mcc.id.au> @@ -174,3 +175,5 @@ variable-supports-64 support/color-green-ref Test a failing custom property decl variable-supports-65 support/color-green-ref Test a passing custom property declaration in an @supports rule whose value is a variable reference with white space surrounding the fallback comma. http://www.w3.org/TR/css-variables-1/#syntax 6ce69d92a521555242c7521b9b90decd43edbc8c `Cameron McCormack`<mailto:cam@mcc.id.au> variable-supports-66 support/color-green-ref Test a failing custom property declaration in an @supports rule where the property name begins with "VAR-". http://www.w3.org/TR/css-variables-1/#defining-variables 2ca28cc9c29d2083fe0b3ed3a4cb764d41a44ed0 `Cameron McCormack`<mailto:cam@mcc.id.au> variable-supports-67 support/color-green-ref Test a declaration for a custom property has an invalid value does not cause the @supports rule to fail to parse. http://www.w3.org/TR/css-variables-1/#defining-variables d9318198dd393ada88c2c242984cb90ebafa41ee `Cameron McCormack`<mailto:cam@mcc.id.au> +vars-background-shorthand-001 reference/vars-background-shorthand-001-ref CSS Variables 1: Test variables in background shorthand. https://www.w3.org/TR/css-variables-1/#variables-in-shorthands d7b7e9048415c5b744cc06421f3f773666fc1d0c `Lea Verou`<mailto:lea@verou.me> +vars-font-shorthand-001 reference/vars-font-shorthand-001-ref CSS Variables 1: Test variables in @font-face, font-family, font shorthand. ahem https://www.w3.org/TR/css-variables-1/#variables-in-shorthands 22e745357e4d44cccd6e43a7347ce51c7fe75480 `Lea Verou`<mailto:lea@verou.me> diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/chapter-2.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/chapter-2.xht index 762d98a222e..e5934d97d92 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/chapter-2.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/chapter-2.xht @@ -13,7 +13,7 @@ <body> <h1>CSS Custom Properties Level 1 CR Test Suite</h1> - <h2>Defining Custom Properties: the --* family of properties (96 tests)</h2> + <h2>Defining Custom Properties: the --* family of properties (97 tests)</h2> <table width="100%"> <col id="test-column"></col> <col id="refs-column"></col> @@ -335,7 +335,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s2.1">+</a> <a href="https://www.w3.org/TR/css-variables-1/#syntax">2.1 Custom Property Value Syntax</a></th></tr> - <!-- 55 tests --> + <!-- 56 tests --> <tr id="variable-declaration-01-2.1" class=""> <td> <a href="variable-declaration-01.xht">variable-declaration-01</a></td> @@ -568,6 +568,14 @@ <td>Test declaring a variable in an external CSS file. </td> </tr> + <tr id="variable-reference-without-whitespace-2.1" class=""> + <td> + <a href="variable-reference-without-whitespace.xht">variable-reference-without-whitespace</a></td> + <td><a href="reference/variable-reference-without-whitespace-ref.xht">=</a> </td> + <td></td> + <td>Variable reference without whitespace + </td> + </tr> <tr id="variable-supports-33-2.1" class=""> <td> <a href="variable-supports-33.xht">variable-supports-33</a></td> diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/chapter-3.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/chapter-3.xht index 4dce33d927c..639b2a85fc6 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/chapter-3.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/chapter-3.xht @@ -13,7 +13,7 @@ <body> <h1>CSS Custom Properties Level 1 CR Test Suite</h1> - <h2>Using Cascading Variables: the var() notation (79 tests)</h2> + <h2>Using Cascading Variables: the var() notation (81 tests)</h2> <table width="100%"> <col id="test-column"></col> <col id="refs-column"></col> @@ -678,7 +678,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s3.2">+</a> <a href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands">3.2 Variables in Shorthand Properties</a></th></tr> - <!-- 3 tests --> + <!-- 5 tests --> <tr id="variable-reference-36-3.2" class=""> <td> <a href="variable-reference-36.xht">variable-reference-36</a></td> @@ -703,6 +703,22 @@ <td>Test using variables in overlapping shorthands. </td> </tr> + <tr id="vars-background-shorthand-001-3.2" class="primary"> + <td><strong> + <a href="vars-background-shorthand-001.xht">vars-background-shorthand-001</a></strong></td> + <td><a href="reference/vars-background-shorthand-001-ref.xht">=</a> </td> + <td></td> + <td>CSS Variables 1: Test variables in background shorthand. + </td> + </tr> + <tr id="vars-font-shorthand-001-3.2" class="primary ahem"> + <td><strong> + <a href="vars-font-shorthand-001.xht">vars-font-shorthand-001</a></strong></td> + <td><a href="reference/vars-font-shorthand-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>CSS Variables 1: Test variables in @font-face, font-family, font shorthand. + </td> + </tr> </tbody> <tbody id="s3.2.#pending-substitution-value"> <!-- 0 tests --> diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reference/variable-reference-without-whitespace-ref.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reference/variable-reference-without-whitespace-ref.xht new file mode 100644 index 00000000000..7baee19a429 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reference/variable-reference-without-whitespace-ref.xht @@ -0,0 +1,15 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Variable reference without whitespace - reference</title> +<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" /> +</head><body><p>The next four lines must be identical, containing only zeroes: +</p><p>0 0 0 +</p><p>0 0 0 +</p><p>0 0 0 +</p><p>0 0 0 + +</p><p>The next four lines must be identical, containing increasing integers: +</p><p>1 2 3 +</p><p>1 2 3 +</p><p>1 2 3 +</p><p>1 2 3 +</p></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reference/vars-background-shorthand-001-ref.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reference/vars-background-shorthand-001-ref.xht new file mode 100644 index 00000000000..2602ee11ffa --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reference/vars-background-shorthand-001-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Variables 1: Test variables in background shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou" /> +<style> +div { + width: 50px; + height: 50px; + padding: 50px; + margin: 10px; + display: inline-block; + background: green; +} +</style> +</head><body><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> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reference/vars-font-shorthand-001-ref.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reference/vars-font-shorthand-001-ref.xht new file mode 100644 index 00000000000..ebba5f572f5 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reference/vars-font-shorthand-001-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou" /> +<style> + + + +div { + width: 150px; + height: 150px; + margin: 10px; + display: inline-block; + vertical-align: middle; + background: green; + text-align: center; + color: green; + overflow: hidden; +} + +</style> +</head><body><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> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reftest-toc.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reftest-toc.xht index ccc59a2528d..e1a9891e02f 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reftest-toc.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reftest-toc.xht @@ -880,6 +880,14 @@ <td rowspan="1"></td> </tr> </tbody> + <tbody id="variable-reference-without-whitespace" class=""> + <tr> + <td rowspan="1" title="Variable reference without whitespace"> + <a href="variable-reference-without-whitespace.xht">variable-reference-without-whitespace</a></td> + <td><a href="reference/variable-reference-without-whitespace-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> <tbody id="variable-supports-01" class=""> <tr> <td rowspan="1" title="Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference and no white space tokens."> @@ -1416,6 +1424,22 @@ <td rowspan="1"></td> </tr> </tbody> + <tbody id="vars-background-shorthand-001" class=""> + <tr> + <td rowspan="1" title="CSS Variables 1: Test variables in background shorthand."> + <a href="vars-background-shorthand-001.xht">vars-background-shorthand-001</a></td> + <td><a href="reference/vars-background-shorthand-001-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vars-font-shorthand-001" class="ahem"> + <tr> + <td rowspan="1" title="CSS Variables 1: Test variables in @font-face, font-family, font shorthand."> + <a href="vars-font-shorthand-001.xht">vars-font-shorthand-001</a></td> + <td><a href="reference/vars-font-shorthand-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> </table> </body> diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reftest.list b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reftest.list index cf111f0dab3..113d163a73a 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reftest.list +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/reftest.list @@ -106,6 +106,7 @@ variable-reference-37.xht == reference/variable-reference-37-ref.xht variable-reference-38.xht == reference/variable-reference-38-ref.xht variable-reference-39.xht == support/color-green-ref.xht variable-reference-40.xht == reference/variable-reference-40-ref.xht +variable-reference-without-whitespace.xht == reference/variable-reference-without-whitespace-ref.xht variable-supports-01.xht == support/color-green-ref.xht variable-supports-02.xht == support/color-green-ref.xht variable-supports-03.xht == support/color-green-ref.xht @@ -173,3 +174,5 @@ variable-supports-64.xht == support/color-green-ref.xht variable-supports-65.xht == support/color-green-ref.xht variable-supports-66.xht == support/color-green-ref.xht variable-supports-67.xht == support/color-green-ref.xht +vars-background-shorthand-001.xht == reference/vars-background-shorthand-001-ref.xht +vars-font-shorthand-001.xht == reference/vars-font-shorthand-001-ref.xht diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/test_variable_legal_values.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/test_variable_legal_values.xht index 03b0a669279..13aa4d72942 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/test_variable_legal_values.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/test_variable_legal_values.xht @@ -1,7 +1,7 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Variables Allowed Syntax</title> - <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="https://dbaron.org/" rel="author" title="L. David Baron" /> <link href="http://mozilla.com/" rel="author" title="Mozilla Corporation" /> <link href="http://www.w3.org/TR/css-variables-1/#defining-variables" rel="help" /> <meta 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].' name="assert" /> diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/toc.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/toc.xht index 0b277d7eaf7..15ff75f9125 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/toc.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/toc.xht @@ -27,12 +27,12 @@ <tbody id="s2"> <tr><th><a href="chapter-2.xht">Chapter 2 - Defining Custom Properties: the --* family of properties</a></th> - <td>(96 Tests)</td></tr> + <td>(97 Tests)</td></tr> </tbody> <tbody id="s3"> <tr><th><a href="chapter-3.xht">Chapter 3 - Using Cascading Variables: the var() notation</a></th> - <td>(79 Tests)</td></tr> + <td>(81 Tests)</td></tr> </tbody> <tbody id="s4"> <tr><th><a href="chapter-4.xht">Chapter 4 - diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/variable-reference-without-whitespace.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/variable-reference-without-whitespace.xht new file mode 100644 index 00000000000..019b3c0a935 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/variable-reference-without-whitespace.xht @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Variable reference without whitespace</title> +<link href="reference/variable-reference-without-whitespace-ref.xht" rel="match" /> +<link href="http://www.w3.org/TR/css-variables-1/#syntax" rel="help" /> +<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" /> +<meta 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." rel="assert" /> +<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> +</head><body><p>The next four lines must be identical, containing only zeroes: +</p><p id="test_1"><span></span> <span></span> <span></span> +</p><p id="test_2"><span></span> <span></span> <span></span> +</p><p id="test_3"><span></span> <span></span> <span></span> +</p><p>0 0 0 + +</p><p>The next four lines must be identical, containing increasing integers: +</p><p id="control_1"><span></span> <span></span> <span></span> +</p><p id="control_2"><span></span> <span></span> <span></span> +</p><p id="control_3"><span></span> <span></span> <span></span> +</p><p>1 2 3 +</p></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/vars-background-shorthand-001.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/vars-background-shorthand-001.xht new file mode 100644 index 00000000000..755774f91a5 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/vars-background-shorthand-001.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Variables 1: Test variables in background shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou" /> +<link href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands" rel="help" /> +<link href="reference/vars-background-shorthand-001-ref.xht" rel="match" /> +<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> +</head><body><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> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/vars-font-shorthand-001.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/vars-font-shorthand-001.xht new file mode 100644 index 00000000000..e77a1695880 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/vars-font-shorthand-001.xht @@ -0,0 +1,69 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou" /> +<link href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands" rel="help" /> +<link href="reference/vars-font-shorthand-001-ref.xht" rel="match" /> +<meta content="ahem" name="flags" /> +<style> + +@font-face { + font-family: Ahem; + src: url(https://cdn.rawgit.com/w3c/csswg-test/master/fonts/ahem/ahem.ttf); +} + +div { + width: 150px; + height: 150px; + margin: 10px; + display: inline-block; + vertical-align: middle; + background: red; + text-align: center; + color: green; + overflow: hidden; +} + +div#d1 { + --foo: Ahem; + font-family: var(--foo); + font-size: 150px; + line-height: 1; +} + +div#d2 { + --foo: 0 Ahem; + font: var(--foo); + font-size: 150px; + line-height: 150px; +} + +div#d3 { + --foo: Ahem, sans-serif; + font: 150px/1 var(--foo); +} + +div#d4 { + --foo: Ahem; + font: 150px/1 var(--foo), sans-serif; +} + +div#d5 { + --foo: 1 Ahem; + font: 150px/var(--foo); +} + +div#d6 { + --foo: 150px/1 Ahem; + font: var(--foo); +} +</style> +</head><body><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> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/chapter-2.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/chapter-2.xht index 762d98a222e..e5934d97d92 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/chapter-2.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/chapter-2.xht @@ -13,7 +13,7 @@ <body> <h1>CSS Custom Properties Level 1 CR Test Suite</h1> - <h2>Defining Custom Properties: the --* family of properties (96 tests)</h2> + <h2>Defining Custom Properties: the --* family of properties (97 tests)</h2> <table width="100%"> <col id="test-column"></col> <col id="refs-column"></col> @@ -335,7 +335,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s2.1">+</a> <a href="https://www.w3.org/TR/css-variables-1/#syntax">2.1 Custom Property Value Syntax</a></th></tr> - <!-- 55 tests --> + <!-- 56 tests --> <tr id="variable-declaration-01-2.1" class=""> <td> <a href="variable-declaration-01.xht">variable-declaration-01</a></td> @@ -568,6 +568,14 @@ <td>Test declaring a variable in an external CSS file. </td> </tr> + <tr id="variable-reference-without-whitespace-2.1" class=""> + <td> + <a href="variable-reference-without-whitespace.xht">variable-reference-without-whitespace</a></td> + <td><a href="reference/variable-reference-without-whitespace-ref.xht">=</a> </td> + <td></td> + <td>Variable reference without whitespace + </td> + </tr> <tr id="variable-supports-33-2.1" class=""> <td> <a href="variable-supports-33.xht">variable-supports-33</a></td> diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/chapter-3.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/chapter-3.xht index 4dce33d927c..639b2a85fc6 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/chapter-3.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/chapter-3.xht @@ -13,7 +13,7 @@ <body> <h1>CSS Custom Properties Level 1 CR Test Suite</h1> - <h2>Using Cascading Variables: the var() notation (79 tests)</h2> + <h2>Using Cascading Variables: the var() notation (81 tests)</h2> <table width="100%"> <col id="test-column"></col> <col id="refs-column"></col> @@ -678,7 +678,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s3.2">+</a> <a href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands">3.2 Variables in Shorthand Properties</a></th></tr> - <!-- 3 tests --> + <!-- 5 tests --> <tr id="variable-reference-36-3.2" class=""> <td> <a href="variable-reference-36.xht">variable-reference-36</a></td> @@ -703,6 +703,22 @@ <td>Test using variables in overlapping shorthands. </td> </tr> + <tr id="vars-background-shorthand-001-3.2" class="primary"> + <td><strong> + <a href="vars-background-shorthand-001.xht">vars-background-shorthand-001</a></strong></td> + <td><a href="reference/vars-background-shorthand-001-ref.xht">=</a> </td> + <td></td> + <td>CSS Variables 1: Test variables in background shorthand. + </td> + </tr> + <tr id="vars-font-shorthand-001-3.2" class="primary ahem"> + <td><strong> + <a href="vars-font-shorthand-001.xht">vars-font-shorthand-001</a></strong></td> + <td><a href="reference/vars-font-shorthand-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>CSS Variables 1: Test variables in @font-face, font-family, font shorthand. + </td> + </tr> </tbody> <tbody id="s3.2.#pending-substitution-value"> <!-- 0 tests --> diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reference/variable-reference-without-whitespace-ref.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reference/variable-reference-without-whitespace-ref.xht new file mode 100644 index 00000000000..7baee19a429 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reference/variable-reference-without-whitespace-ref.xht @@ -0,0 +1,15 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Variable reference without whitespace - reference</title> +<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" /> +</head><body><p>The next four lines must be identical, containing only zeroes: +</p><p>0 0 0 +</p><p>0 0 0 +</p><p>0 0 0 +</p><p>0 0 0 + +</p><p>The next four lines must be identical, containing increasing integers: +</p><p>1 2 3 +</p><p>1 2 3 +</p><p>1 2 3 +</p><p>1 2 3 +</p></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reference/vars-background-shorthand-001-ref.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reference/vars-background-shorthand-001-ref.xht new file mode 100644 index 00000000000..2602ee11ffa --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reference/vars-background-shorthand-001-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Variables 1: Test variables in background shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou" /> +<style> +div { + width: 50px; + height: 50px; + padding: 50px; + margin: 10px; + display: inline-block; + background: green; +} +</style> +</head><body><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> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reference/vars-font-shorthand-001-ref.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reference/vars-font-shorthand-001-ref.xht new file mode 100644 index 00000000000..ebba5f572f5 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reference/vars-font-shorthand-001-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou" /> +<style> + + + +div { + width: 150px; + height: 150px; + margin: 10px; + display: inline-block; + vertical-align: middle; + background: green; + text-align: center; + color: green; + overflow: hidden; +} + +</style> +</head><body><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> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reftest-toc.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reftest-toc.xht index ccc59a2528d..e1a9891e02f 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reftest-toc.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reftest-toc.xht @@ -880,6 +880,14 @@ <td rowspan="1"></td> </tr> </tbody> + <tbody id="variable-reference-without-whitespace" class=""> + <tr> + <td rowspan="1" title="Variable reference without whitespace"> + <a href="variable-reference-without-whitespace.xht">variable-reference-without-whitespace</a></td> + <td><a href="reference/variable-reference-without-whitespace-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> <tbody id="variable-supports-01" class=""> <tr> <td rowspan="1" title="Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference and no white space tokens."> @@ -1416,6 +1424,22 @@ <td rowspan="1"></td> </tr> </tbody> + <tbody id="vars-background-shorthand-001" class=""> + <tr> + <td rowspan="1" title="CSS Variables 1: Test variables in background shorthand."> + <a href="vars-background-shorthand-001.xht">vars-background-shorthand-001</a></td> + <td><a href="reference/vars-background-shorthand-001-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vars-font-shorthand-001" class="ahem"> + <tr> + <td rowspan="1" title="CSS Variables 1: Test variables in @font-face, font-family, font shorthand."> + <a href="vars-font-shorthand-001.xht">vars-font-shorthand-001</a></td> + <td><a href="reference/vars-font-shorthand-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> </table> </body> diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reftest.list b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reftest.list index cf111f0dab3..113d163a73a 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reftest.list +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/reftest.list @@ -106,6 +106,7 @@ variable-reference-37.xht == reference/variable-reference-37-ref.xht variable-reference-38.xht == reference/variable-reference-38-ref.xht variable-reference-39.xht == support/color-green-ref.xht variable-reference-40.xht == reference/variable-reference-40-ref.xht +variable-reference-without-whitespace.xht == reference/variable-reference-without-whitespace-ref.xht variable-supports-01.xht == support/color-green-ref.xht variable-supports-02.xht == support/color-green-ref.xht variable-supports-03.xht == support/color-green-ref.xht @@ -173,3 +174,5 @@ variable-supports-64.xht == support/color-green-ref.xht variable-supports-65.xht == support/color-green-ref.xht variable-supports-66.xht == support/color-green-ref.xht variable-supports-67.xht == support/color-green-ref.xht +vars-background-shorthand-001.xht == reference/vars-background-shorthand-001-ref.xht +vars-font-shorthand-001.xht == reference/vars-font-shorthand-001-ref.xht diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/test_variable_legal_values.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/test_variable_legal_values.xht index 03b0a669279..13aa4d72942 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/test_variable_legal_values.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/test_variable_legal_values.xht @@ -1,7 +1,7 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Variables Allowed Syntax</title> - <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="https://dbaron.org/" rel="author" title="L. David Baron" /> <link href="http://mozilla.com/" rel="author" title="Mozilla Corporation" /> <link href="http://www.w3.org/TR/css-variables-1/#defining-variables" rel="help" /> <meta 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].' name="assert" /> diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/toc.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/toc.xht index 0b277d7eaf7..15ff75f9125 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/toc.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/toc.xht @@ -27,12 +27,12 @@ <tbody id="s2"> <tr><th><a href="chapter-2.xht">Chapter 2 - Defining Custom Properties: the --* family of properties</a></th> - <td>(96 Tests)</td></tr> + <td>(97 Tests)</td></tr> </tbody> <tbody id="s3"> <tr><th><a href="chapter-3.xht">Chapter 3 - Using Cascading Variables: the var() notation</a></th> - <td>(79 Tests)</td></tr> + <td>(81 Tests)</td></tr> </tbody> <tbody id="s4"> <tr><th><a href="chapter-4.xht">Chapter 4 - diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/variable-reference-without-whitespace.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/variable-reference-without-whitespace.xht new file mode 100644 index 00000000000..019b3c0a935 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/variable-reference-without-whitespace.xht @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Variable reference without whitespace</title> +<link href="reference/variable-reference-without-whitespace-ref.xht" rel="match" /> +<link href="http://www.w3.org/TR/css-variables-1/#syntax" rel="help" /> +<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" /> +<meta 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." rel="assert" /> +<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> +</head><body><p>The next four lines must be identical, containing only zeroes: +</p><p id="test_1"><span></span> <span></span> <span></span> +</p><p id="test_2"><span></span> <span></span> <span></span> +</p><p id="test_3"><span></span> <span></span> <span></span> +</p><p>0 0 0 + +</p><p>The next four lines must be identical, containing increasing integers: +</p><p id="control_1"><span></span> <span></span> <span></span> +</p><p id="control_2"><span></span> <span></span> <span></span> +</p><p id="control_3"><span></span> <span></span> <span></span> +</p><p>1 2 3 +</p></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/vars-background-shorthand-001.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/vars-background-shorthand-001.xht new file mode 100644 index 00000000000..755774f91a5 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/vars-background-shorthand-001.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Variables 1: Test variables in background shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou" /> +<link href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands" rel="help" /> +<link href="reference/vars-background-shorthand-001-ref.xht" rel="match" /> +<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> +</head><body><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> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/vars-font-shorthand-001.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/vars-font-shorthand-001.xht new file mode 100644 index 00000000000..e77a1695880 --- /dev/null +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1print/vars-font-shorthand-001.xht @@ -0,0 +1,69 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title> +<link href="mailto:lea@verou.me" rel="author" title="Lea Verou" /> +<link href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands" rel="help" /> +<link href="reference/vars-font-shorthand-001-ref.xht" rel="match" /> +<meta content="ahem" name="flags" /> +<style> + +@font-face { + font-family: Ahem; + src: url(https://cdn.rawgit.com/w3c/csswg-test/master/fonts/ahem/ahem.ttf); +} + +div { + width: 150px; + height: 150px; + margin: 10px; + display: inline-block; + vertical-align: middle; + background: red; + text-align: center; + color: green; + overflow: hidden; +} + +div#d1 { + --foo: Ahem; + font-family: var(--foo); + font-size: 150px; + line-height: 1; +} + +div#d2 { + --foo: 0 Ahem; + font: var(--foo); + font-size: 150px; + line-height: 150px; +} + +div#d3 { + --foo: Ahem, sans-serif; + font: 150px/1 var(--foo); +} + +div#d4 { + --foo: Ahem; + font: 150px/1 var(--foo), sans-serif; +} + +div#d5 { + --foo: 1 Ahem; + font: 150px/var(--foo); +} + +div#d6 { + --foo: 150px/1 Ahem; + font: var(--foo); +} +</style> +</head><body><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> + + +</body></html>
\ No newline at end of file |