diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-variables')
258 files changed, 7463 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-variables/META.yml b/testing/web-platform/tests/css/css-variables/META.yml new file mode 100644 index 0000000000..a1747aadc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.csswg.org/css-variables/ +suggested_reviewers: + - dbaron + - svgeesus + - tabatkins diff --git a/testing/web-platform/tests/css/css-variables/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-variables/WEB_FEATURES.yml new file mode 100644 index 0000000000..b06c71a226 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: custom-properties + files: "**" diff --git a/testing/web-platform/tests/css/css-variables/css-variable-change-style-001.html b/testing/web-platform/tests/css/css-variables/css-variable-change-style-001.html new file mode 100644 index 0000000000..4db8373873 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/css-variable-change-style-001.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Variables Test: Style changes on properties using variables</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<meta name="assert" content="A change in the custom property declaration must be propagated to all the descendants"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .inner { + color: var(--x); + background-color: var(--x); + white-space: var(--x); + } +</style> +<div id="outer"> + <div id="inbetween"> + <div id="inner"></div> + </div> +</div> +<script> + "use strict"; + let colorValues = [ + { Id: "case1", outer: "red", inbetween: "", expected: "rgb(255, 0, 0)" }, + { Id: "case2", outer: "red", inbetween: "blue", expected: "rgb(0, 0, 255)" }, + { Id: "case3", outer: "green", inbetween: "blue", expected: "rgb(0, 0, 255)" }, + { Id: "case4", outer: "green", inbetween: "", expected: "rgb(0, 128, 0)" }, + { Id: "case5", outer: "green", inbetween: "red", expected: "rgb(255, 0, 0)" }, + { Id: "case6", outer: "" , inbetween: "red", expected: "rgb(255, 0, 0)" }, + { Id: "case7", outer: "blue" , inbetween: "" , expected: "rgb(0, 0, 255)" }, + ]; + + let whiteSpaceValues = [ + { Id: "case1", outer: "pre", inbetween: "", expected: "pre" }, + { Id: "case2", outer: "pre-wrap", inbetween: "", expected: "pre-wrap" }, + { Id: "case3", outer: "pre-wrap", inbetween: "nowrap", expected: "nowrap" }, + { Id: "case3", outer: "pre-wrap", inbetween: "", expected: "pre-wrap" }, + { Id: "case4", outer: "pre-line", inbetween: "normal", expected: "normal" }, + { Id: "case5", outer: "pre-line", inbetween: "", expected: "pre-line" }, + { Id: "case6", outer: "", inbetween: "pre-wrap", expected: "pre-wrap" }, + { Id: "case7", outer: "", inbetween: "", expected: "normal" }, + ]; + + let testcases = [ + { property: "color", values: colorValues, }, + { property: "background-color", values: colorValues, }, + { property: "white-space", values: whiteSpaceValues }, + ]; + + function initializeStyles() { + outer.style.cssText = ""; + inbetween.style.cssText = ""; + inner.style.cssText = ""; + } + + testcases.forEach(function (testcase) { + test( function () { + initializeStyles(); + inner.style.cssText = testcase.property + ': var(--x)'; + testcase.values.forEach(function (value) { + outer.style.cssText = value.outer ? "--x:" + value.outer : ""; + inbetween.style.cssText = value.inbetween ? "--x:" + value.inbetween : ""; + let computedStyle = getComputedStyle(inner); + let actualValue = computedStyle.getPropertyValue(testcase.property); + assert_equals(actualValue, value.expected, value.Id); + }); + }, "Test declaration changes on '" + testcase.property + "' as variable"); + + test( function () { + initializeStyles(); + inbetween.style.cssText = testcase.property + ': inherit'; + inner.style.cssText = testcase.property + ': inherit'; + testcase.values.forEach(function (value) { + outer.style.cssText = "--x:" + value.outer + "; " + testcase.property + ": " + value.outer; + let actualValue = getComputedStyle(inner).getPropertyValue(testcase.property); + let expectedValue = getComputedStyle(outer).getPropertyValue(testcase.property); + assert_equals(actualValue, expectedValue, value.Id); + }); + }, "Avoid masking differences on '" + testcase.property + "' due to declaration changes"); + + test( function () { + initializeStyles(); + inbetween.style.cssText = testcase.property + ': inherit'; + inner.style.cssText = testcase.property + ': inherit'; + let value1 = testcase.values[0]; + let value2 = testcase.values[3]; + outer.style.cssText = "--x:" + value2.outer + "; " + testcase.property + ": " + value1.outer; + let actualValue = getComputedStyle(inner).getPropertyValue(testcase.property); + assert_equals(actualValue, value1.expected, value1.Id); + + inner.style.cssText = testcase.property + ': var(--x)'; + actualValue = getComputedStyle(inner).getPropertyValue(testcase.property); + assert_equals(actualValue, value2.expected, value2.Id); + }, "Test changing '" + testcase.property + "' value to become a css variable"); + }); +</script> diff --git a/testing/web-platform/tests/css/css-variables/css-variable-change-style-002.html b/testing/web-platform/tests/css/css-variables/css-variable-change-style-002.html new file mode 100644 index 0000000000..9057136dda --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/css-variable-change-style-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Variables Test: Style changes on properties using variables</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<meta name="assert" content="A change in the custom property declaration must be propagated to all the descendants"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .test1 > div > div { color: var(--x); } + .test2 > div > div { background-color: var(--x); } + .test3 > div > div { white-space: var(--x); } +</style> +<div id="outer"> + <div> + <div id="inner1"></div> + </div> + <div> + <div id="inner2"></div> + </div> + <div> + <div id="inner3"></div> + </div> +</div> +<script> + "use strict"; + + let colorValues = [ + { Id: "case1", value: "red", expected: "rgb(255, 0, 0)" }, + { Id: "case2", value: "green", expected: "rgb(0, 128, 0)" }, + ]; + let whiteSpaceValues = [ + { Id: "case1", value: "pre-wrap", expected: "pre-wrap" }, + { Id: "case2", value: "nowrap", expected: "nowrap" }, + ]; + let testcases = [ + { property: "color", className: "test1", values: colorValues, }, + { property: "background-color", className: "test2", values: colorValues, }, + { property: "white-space", className: "test3", values: whiteSpaceValues}, + ]; + + testcases.forEach(function (testcase) { + test( function () { + outer.className = testcase.className; + testcase.values.forEach(function (entry) { + document.body.style.cssText = "--x: " + entry.value; + let actualValue = getComputedStyle(inner1).getPropertyValue(testcase.property); + assert_equals(actualValue, entry.expected, entry.Id + "-1"); + actualValue = getComputedStyle(inner2).getPropertyValue(testcase.property); + assert_equals(actualValue, entry.expected, entry.Id + "-2"); + actualValue = getComputedStyle(inner3).getPropertyValue(testcase.property); + assert_equals(actualValue, entry.expected, entry.Id + "-3"); + }); + }, "Declaration changes on '" + testcase.property + "' propagate to all variable references"); + }); +</script> diff --git a/testing/web-platform/tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html b/testing/web-platform/tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html new file mode 100644 index 0000000000..df2b352702 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html @@ -0,0 +1,31 @@ +<!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="/css/reference/ref-filled-green-100px-square.xht"> + <style type="text/css"> + :root { + --lowercasegreen: green; + --MixedCaseGreen: green; + + --lowercasered: red; + --MixedCaseRed: red; + } + div { + width: 100px; + height: 25px; + } + </style> +</head> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div style="background-color: var(--lowercasegreen, red);"></div> + <div style="background-color: var(--MixedCaseGreen, red);"></div> + <div style="background-color: var(--LowerCaseRed, green);"></div> + <div style="background-color: var(--mixedcasered, green);"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-variables/css-vars-custom-property-inheritance.html b/testing/web-platform/tests/css/css-variables/css-vars-custom-property-inheritance.html new file mode 100644 index 0000000000..bbda51d2fe --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/css-vars-custom-property-inheritance.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="/css/reference/ref-filled-green-100px-square.xht"> + <style type="text/css"> + + /* test cascade importance */ + :root { --color-1: green !important; } + :root { --color-1: red; } + div.color1 { background-color: var(--color-1); } + + /* test cascade order */ + :root { --color-2: green; } + div.color2 { background-color: red; } + div.color2 { background-color: var(--color-2); } + + div { width: 100px; height: 50px; } + </style> +</head> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class=color1></div> + <div class=color2></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-variables/long-variable-reference-crash.html b/testing/web-platform/tests/css/css-variables/long-variable-reference-crash.html new file mode 100644 index 0000000000..d2e36d3c46 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/long-variable-reference-crash.html @@ -0,0 +1,8 @@ +<!doctype html> +<title>Very long properties with variable references should not crash</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<link rel="help" href="https://crbug.com/1429823"> +<style id="x"></style> +<script> +x.textContent = '* { border: ' + 'a'.repeat(2097152) + ' var(--b); }'; +</script> diff --git a/testing/web-platform/tests/css/css-variables/reference/variable-reference-without-whitespace-ref.html b/testing/web-platform/tests/css/css-variables/reference/variable-reference-without-whitespace-ref.html new file mode 100644 index 0000000000..3d9aaed6b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/reference/variable-reference-without-whitespace-ref.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 diff --git a/testing/web-platform/tests/css/css-variables/reference/vars-background-shorthand-001-ref.html b/testing/web-platform/tests/css/css-variables/reference/vars-background-shorthand-001-ref.html new file mode 100644 index 0000000000..93561fd614 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/reference/vars-background-shorthand-001-ref.html @@ -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> + + + diff --git a/testing/web-platform/tests/css/css-variables/reference/vars-font-shorthand-001-ref.html b/testing/web-platform/tests/css/css-variables/reference/vars-font-shorthand-001-ref.html new file mode 100644 index 0000000000..39cb4da9bc --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/reference/vars-font-shorthand-001-ref.html @@ -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> + + diff --git a/testing/web-platform/tests/css/css-variables/resources/variable-reference-refresh-iframe.css b/testing/web-platform/tests/css/css-variables/resources/variable-reference-refresh-iframe.css new file mode 100644 index 0000000000..7a10918d00 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/resources/variable-reference-refresh-iframe.css @@ -0,0 +1,5 @@ +#testElement +{ + --color: green; + color: var(--color); +} diff --git a/testing/web-platform/tests/css/css-variables/resources/variable-reference-refresh-iframe.html b/testing/web-platform/tests/css/css-variables/resources/variable-reference-refresh-iframe.html new file mode 100644 index 0000000000..b3a4819a29 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/resources/variable-reference-refresh-iframe.html @@ -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> diff --git a/testing/web-platform/tests/css/css-variables/revert-in-fallback.html b/testing/web-platform/tests/css/css-variables/revert-in-fallback.html new file mode 100644 index 0000000000..ae99e5192f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/revert-in-fallback.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>CSS Custom Properties: Using revert in fallbacks</title> +<link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + body.revert { + --x:FAIL; + margin: -1px; + display: grid; + + --x: var(--unknown, revert); + margin: var(--unknown, revert); + display: var(--unknown, revert); + } +</style> +<html> + <body> + <pre id=out></pre> + <script> + let body_ua_display = getComputedStyle(document.body).display; + let body_ua_margin = getComputedStyle(document.body).margin; + document.body.classList.add('revert'); + + test((t) => { + assert_equals(getComputedStyle(document.body).getPropertyValue('--x'), ''); + }, 'var(--unknown, revert) in custom property'); + + test((t) => { + assert_equals(getComputedStyle(document.body).getPropertyValue('margin'), body_ua_margin); + }, 'var(--unknown, revert-layer) in shorthand'); + + test((x) => { + assert_equals(getComputedStyle(document.body).getPropertyValue('margin-left'), body_ua_margin); + }, 'var(--unknown, revert-layer) in shorthand observed via longhand'); + + test((t) => { + assert_equals(getComputedStyle(document.body).getPropertyValue('display'), body_ua_display); + }, 'var(--unknown, revert-layer) in longhand'); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-variables/revert-layer-in-fallback.html b/testing/web-platform/tests/css/css-variables/revert-layer-in-fallback.html new file mode 100644 index 0000000000..ed20821fb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/revert-layer-in-fallback.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>CSS Custom Properties: Using revert-layer in fallbacks</title> +<link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@layer { + #child { + --x:PASS; + margin: 1px; + padding-left: 1px; + } +} +@layer { + #parent { + --x:FAIL; + margin: -1px; + padding-left: -1px; + } + #child { + --x: var(--unknown, revert-layer); + margin: var(--unknown, revert-layer); + padding-left: var(--unknown, revert-layer); + } +} +</style> +<div id=parent> + <div id=child> + </div> +</div> +<pre id=out> +</pre> +<script> + test((x) => { + assert_equals(getComputedStyle(child).getPropertyValue('--x'), 'PASS'); + }, 'var(--unknown, revert-layer) in custom property'); + + test((x) => { + assert_equals(getComputedStyle(child).getPropertyValue('margin'), '1px'); + }, 'var(--unknown, revert-layer) in shorthand'); + + test((x) => { + assert_equals(getComputedStyle(child).getPropertyValue('margin-left'), '1px'); + }, 'var(--unknown, revert-layer) in shorthand observed via longhand'); + + test((x) => { + assert_equals(getComputedStyle(child).getPropertyValue('padding-left'), '1px'); + }, 'var(--unknown, revert-layer) in longhand'); +</script> diff --git a/testing/web-platform/tests/css/css-variables/support/color-green-ref.html b/testing/web-platform/tests/css/css-variables/support/color-green-ref.html new file mode 100644 index 0000000000..0eabe58c81 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/support/color-green-ref.html @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<style> +p { + color: green; +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/support/external-variable-declaration.css b/testing/web-platform/tests/css/css-variables/support/external-variable-declaration.css new file mode 100644 index 0000000000..9ba1b9d328 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/support/external-variable-declaration.css @@ -0,0 +1,5 @@ +p { + color: red; + --a: green; + color: var(--a); +} diff --git a/testing/web-platform/tests/css/css-variables/support/external-variable-font-face.css b/testing/web-platform/tests/css/css-variables/support/external-variable-font-face.css new file mode 100644 index 0000000000..e3ad1eddb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/support/external-variable-font-face.css @@ -0,0 +1,15 @@ +@font-face { + --a: MyTestFontName; + font-family: var(--a); + src: url(/fonts/Ahem.ttf); +} +@font-face { + font-family: MyTestFontName2; + src: url(/fonts/Ahem.ttf); +} +#a { + font-family: MyTestFontName, serif; +} +#b { + font-family: MyTestFontName2, serif; +} diff --git a/testing/web-platform/tests/css/css-variables/support/external-variable-reference.css b/testing/web-platform/tests/css/css-variables/support/external-variable-reference.css new file mode 100644 index 0000000000..0c697fdcf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/support/external-variable-reference.css @@ -0,0 +1,6 @@ +:root { + --a: green; +} +p { + color: var(--a); +} diff --git a/testing/web-platform/tests/css/css-variables/support/external-variable-supports.css b/testing/web-platform/tests/css/css-variables/support/external-variable-supports.css new file mode 100644 index 0000000000..96582bfd8f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/support/external-variable-supports.css @@ -0,0 +1,4 @@ +body { color: red; } +@supports (color:var(--a)) { + p { color: green; } +} diff --git a/testing/web-platform/tests/css/css-variables/test_variable_legal_values.html b/testing/web-platform/tests/css/css-variables/test_variable_legal_values.html new file mode 100644 index 0000000000..1d86c0834c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/test_variable_legal_values.html @@ -0,0 +1,93 @@ +<!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> +</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)); + } + + 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_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> diff --git a/testing/web-platform/tests/css/css-variables/variable-animation-from-to.html b/testing/web-platform/tests/css/css-variables/variable-animation-from-to.html new file mode 100644 index 0000000000..bcb42566fa --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-animation-from-to.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-animation-over-transition.html b/testing/web-platform/tests/css/css-variables/variable-animation-over-transition.html new file mode 100644 index 0000000000..f0ade7c711 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-animation-over-transition.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand.html b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand.html new file mode 100644 index 0000000000..2054d35178 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-animation-substitute-into-keyframe-transform.html b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-into-keyframe-transform.html new file mode 100644 index 0000000000..20e04e872c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-into-keyframe-transform.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-animation-substitute-into-keyframe.html b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-into-keyframe.html new file mode 100644 index 0000000000..b6ad0a2477 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-into-keyframe.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback.html b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback.html new file mode 100644 index 0000000000..e1b3a94dc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple.html b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple.html new file mode 100644 index 0000000000..263aaf38ae --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-animation-substitute-within-keyframe.html b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-within-keyframe.html new file mode 100644 index 0000000000..a01d018d14 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-animation-substitute-within-keyframe.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-variables/variable-animation-to-only.html b/testing/web-platform/tests/css/css-variables/variable-animation-to-only.html new file mode 100644 index 0000000000..6f5ffd17ea --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-animation-to-only.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-created-document.html b/testing/web-platform/tests/css/css-variables/variable-created-document.html new file mode 100644 index 0000000000..8e7040d398 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-created-document.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> + diff --git a/testing/web-platform/tests/css/css-variables/variable-created-element.html b/testing/web-platform/tests/css/css-variables/variable-created-element.html new file mode 100644 index 0000000000..84bc1b6e46 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-created-element.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> + diff --git a/testing/web-platform/tests/css/css-variables/variable-cssText.html b/testing/web-platform/tests/css/css-variables/variable-cssText.html new file mode 100644 index 0000000000..15a3ad83c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-cssText.html @@ -0,0 +1,55 @@ +<!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> +<div id="target11"style="color: /* comment that must not be preserved */ var(--prop) /* kept comment */ var(--prop); /* another stripped comment */ /* indeed */ "></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-right: ; margin-bottom: ; margin-left: ; margin-top: 10px;" }, + { element: "target10", expectedCssText: "" }, + { element: "target11", expectedCssText: "color: var(--prop) /* kept comment */ var(--prop);" } + ]; + + testcases.forEach(function (testcase) { + test( function () { + var div = document.getElementById(testcase.element); + var actualCssText = div.style.cssText; + assert_equals(actualCssText, testcase.expectedCssText); + }, testcase.element); + }); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-variables/variable-cycles.html b/testing/web-platform/tests/css/css-variables/variable-cycles.html new file mode 100644 index 0000000000..950cffb2ab --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-cycles.html @@ -0,0 +1,419 @@ +<!DOCTYPE html> +<meta charset="utf8"> +<title>Test that custom property cycles behave correctly</title> +<link rel="help" href="https://drafts.csswg.org/css-variables/#cycles"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<main id=main></main> +<script> + + // Test that, for the given list of |declarations|, the computed values + // of properties listed in |expected_invalid| are invalid (i.e. empty string), + // and the computed values listed in |expected_valid| are *not* invalid + // (i.e. not the empty string). + function test_cycles(declarations, expected_invalid, expected_valid, description) { + test(() => { + let element = document.createElement('div'); + + try { + declarations.push('--sanity:valid'); + element.style = declarations.join(';'); + main.append(element); + let cs = getComputedStyle(element); + + for (let e of expected_invalid) + assert_equals(cs.getPropertyValue(e), '', `${e}`); + for (let e of expected_valid) + assert_not_equals(cs.getPropertyValue(e), '', `${e}`); + + assert_equals(cs.getPropertyValue('--sanity'), 'valid', '--sanity'); + + } finally { + element.remove(); + } + }, description); + } + + // (Diagrams produced with graph-easy). + + // ┌───┐ + // │ │ ───┐ + // │ a │ │ + // │ │ ◀──┘ + // └───┘ + test_cycles( + ['--a:var(--a)'], + ['--a'], + [], + 'Self-cycle'); + + + // ┌───┐ + // │ a │ ◀┐ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ b │ ─┘ + // └───┘ + test_cycles( + [ + '--a:var(--b)', + '--b:var(--a)', + ], + ['--a', '--b'], + [], + 'Simple a/b cycle'); + + + // ┌───┐ + // │ a │ ◀┐ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ b │ │ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ c │ ─┘ + // └───┘ + test_cycles( + [ + '--a:var(--b, cycle)', + '--b:var(--c, cycle)', + '--c:var(--a, cycle)', + ], + ['--a', '--b', '--c'], + [], + 'Three-var cycle'); + + + // ┌───┐ + // │ x │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ y │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ a │ ◀┐ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ b │ │ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ c │ ─┘ + // └───┘ + test_cycles( + [ + '--x:var(--y, valid)', + '--y:var(--a, valid)', + '--a:var(--b, cycle)', + '--b:var(--c, cycle)', + '--c:var(--a, cycle)', + ], + ['--a', '--b', '--c'], + ['--x', '--y'], + 'Cycle that starts in the middle of a chain'); + + + // ┌───┐ + // │ x │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ a │ ◀┐ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ b │ │ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ c │ ─┘ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ y │ + // └───┘ + test_cycles( + [ + '--x:var(--a, valid)', + '--a:var(--b, cycle)', + '--b:var(--c, cycle)', + '--c:var(--a, cycle) var(--y)', + '--y:valid' + ], + ['--a', '--b', '--c'], + ['--x', '--y'], + 'Cycle with extra edge'); + + + // ┌───┐ + // │ x │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ a │ ◀┐ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ ┌───┐ │ + // │ y │ ◀── │ b │ │ + // └───┘ └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ c │ ─┘ + // └───┘ + test_cycles( + [ + '--x:var(--a, valid)', + '--a:var(--b, cycle)', + '--b:var(--c, cycle) var(--y)', + '--c:var(--a, cycle)', + '--y:valid' + ], + ['--a', '--b', '--c'], + ['--x', '--y'], + 'Cycle with extra edge (2)'); + + + // ┌───┐ + // │ x │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ a │ ◀┐ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ b │ │ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ c │ ─┘ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ y │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ z │ + // └───┘ + test_cycles( + [ + '--x:var(--a, valid)', + '--a:var(--b, cycle)', + '--b:var(--c, cycle)', + '--c:var(--a, cycle) var(--y)', + '--y:var(--z)', + '--z:valid' + ], + ['--a', '--b', '--c'], + ['--x', '--y', '--z'], + 'Cycle with extra edge (3)'); + + // ┌───┐ + // │ x │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ a │ ◀┐ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // ┌▶ │ b │ ─┘ + // │ └───┘ + // │ │ + // │ │ + // │ ▼ + // │ ┌───┐ + // │ │ c │ + // │ └───┘ + // │ │ + // │ │ + // │ ▼ + // │ ┌───┐ + // └─ │ d │ + // └───┘ + test_cycles( + [ + '--x:var(--a, valid)', + '--a:var(--b, cycle)', + '--b:var(--c, cycle) var(--a, cycle)', + '--c:var(--d, cycle)', + '--d:var(--b, cycle)', + ], + ['--a', '--b', '--c', '--d'], + ['--x'], + 'Cycle with secondary cycle'); + + + // ┌───┐ + // │ x │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ a │ ◀┐ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // ┌▶ │ b │ │ + // │ └───┘ │ + // │ │ │ + // │ │ │ + // │ ▼ │ + // │ ┌───┐ │ + // │ │ c │ ─┘ + // │ └───┘ + // │ │ + // │ │ + // │ ▼ + // │ ┌───┐ + // └─ │ d │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // │ y │ + // └───┘ + test_cycles( + [ + '--x:var(--a, valid)', + '--a:var(--b, cycle)', + '--b:var(--c, cycle)', + '--c:var(--d, cycle) var(--a, cycle)', + '--d:var(--b, cycle) var(--y)', + '--y:valid' + ], + ['--a', '--b', '--c', '--d'], + ['--x', '--y'], + 'Cycle with overlapping secondary cycle'); + + + // ┌──────────────┐ + // │ │ + // │ ┌───┐ │ + // │ │ x │ │ + // │ └───┘ │ + // │ │ │ + // │ │ │ + // │ ▼ ▼ + // ┌───┐ ┌────────┐ ┌───┐ + // │ b │ ◀── │ a │ ──▶ │ y │ + // └───┘ └────────┘ └───┘ + // │ ▲ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ c │ │ + // └───┘ │ + // │ │ + // │ │ + // ▼ │ + // ┌───┐ │ + // │ d │ ─┘ + // └───┘ + test_cycles( + [ + '--x:var(--a, valid)', + '--a:var(--b, cycle) var(--y, valid) var(--c, cycle)', + '--b:var(--a, cycle) ', + '--c:var(--d, cycle)', + '--d:var(--a, cycle)', + '--y:valid', + ], + ['--a', '--b', '--c', '--d'], + ['--x', '--y'], + 'Cycle with deeper secondary cycle'); + + + // ┌───┐ + // │ x │ + // └───┘ + // │ + // │ + // ▼ + // ┌───┐ + // ┌─────▶ │ a │ ─┐ + // │ └───┘ │ + // │ │ │ + // │ │ │ + // │ ▼ │ + // │ ┌───┐ │ + // │ ┌─ │ b │ │ + // │ │ └───┘ │ + // │ │ │ │ + // │ │ │ │ + // │ │ ▼ │ + // │ │ ┌───┐ │ + // └────┼─ │ c │ │ + // │ └───┘ │ + // │ │ │ + // │ │ │ + // │ ▼ │ + // │ ┌───┐ │ + // └▶ │ y │ ◀┘ + // └───┘ + test_cycles( + [ + '--x:var(--a, valid)', + '--a:var(--y, var(--b, cycle))', + '--b:var(--y, var(--c, cycle))', + '--c:var(--y, var(--a, cycle))', + '--y:valid' + ], + ['--a', '--b', '--c'], + ['--x', '--y'], + 'Cycle via fallback'); + +</script> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-01.html b/testing/web-platform/tests/css/css-variables/variable-declaration-01.html new file mode 100644 index 0000000000..8c3ff421cf --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-01.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable consisting of a single token preceded by white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-02.html b/testing/web-platform/tests/css/css-variables/variable-declaration-02.html new file mode 100644 index 0000000000..4ee52b5860 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-02.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable consisting of a single token with no preceding white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a:green; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-03.html b/testing/web-platform/tests/css/css-variables/variable-declaration-03.html new file mode 100644 index 0000000000..50aa2f3582 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-03.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that references another variable.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: var(--b); + --b: green; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-04.html b/testing/web-platform/tests/css/css-variables/variable-declaration-04.html new file mode 100644 index 0000000000..52d5d31489 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-04.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable consisting of a variable reference followed by white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: var(--b) ; + --b: green; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-05.html b/testing/web-platform/tests/css/css-variables/variable-declaration-05.html new file mode 100644 index 0000000000..0403bcaec1 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-05.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable consisting of a variable reference that includes white space around the variable name.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: var( --b ) ; + --b: green; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-06.html b/testing/web-platform/tests/css/css-variables/variable-declaration-06.html new file mode 100644 index 0000000000..bccb52da55 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-06.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test overriding an existing variable declaration.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: orange; + --a: green; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-07.html b/testing/web-platform/tests/css/css-variables/variable-declaration-07.html new file mode 100644 index 0000000000..0199c301d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-07.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with valid syntax due to a variable reference having no tokens in its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: crimson; + --b: green; + --a: var(--b,); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-08.html b/testing/web-platform/tests/css/css-variables/variable-declaration-08.html new file mode 100644 index 0000000000..e3cfd9c089 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-08.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a variable reference whose fallback is white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: orange; + --b: green; + --a: var(--b, ); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-09.html b/testing/web-platform/tests/css/css-variables/variable-declaration-09.html new file mode 100644 index 0000000000..c9d245888a --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-09.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with a variable reference having only a comment in its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: crimson; + --b: green; + --a: var(--b,/**/); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-10.html b/testing/web-platform/tests/css/css-variables/variable-declaration-10.html new file mode 100644 index 0000000000..cfcfd32eac --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-10.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a variable reference with a fallback that includes a comment and an identifier.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: orange; + --b: green; + --a: var(--b,/**/a); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-11.html b/testing/web-platform/tests/css/css-variables/variable-declaration-11.html new file mode 100644 index 0000000000..ed011ad15b --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-11.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having a '!' token at the top level of its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + --b: crimson; + --a: var(--b,!); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-12.html b/testing/web-platform/tests/css/css-variables/variable-declaration-12.html new file mode 100644 index 0000000000..3815754afd --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-12.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having a ';' token at the top level of its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + --b: crimson; + --a: var(--b,;); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-13.html b/testing/web-platform/tests/css/css-variables/variable-declaration-13.html new file mode 100644 index 0000000000..5c262b813f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-13.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having "!important" the top level of its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + --b: crimson; + --a: var(--b,!important); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-14.html b/testing/web-platform/tests/css/css-variables/variable-declaration-14.html new file mode 100644 index 0000000000..153cfb9948 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-14.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a variable reference and a following identifier with no intervening white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: green; +} +span { + color: red; + --a:var(--b)red; + --b:orange; + color: var(--a); +} +</style> +<p><span>This text must be green.</span></p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-15-ref.html b/testing/web-platform/tests/css/css-variables/variable-declaration-15-ref.html new file mode 100644 index 0000000000..6679d0de95 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-15-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<meta name="flags" content="ahem"> +<style> +p { + font-family: Ahem, sans-serif; +} +</style> +<p>This text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-15.html b/testing/web-platform/tests/css/css-variables/variable-declaration-15.html new file mode 100644 index 0000000000..9b0fcffc73 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-15.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="variable-declaration-15-ref.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<style> +body { + font-family: serif; +} +p { + font-family: monospace; + --a: Ahem, sans-serif; + font-family: var(--a); +} +</style> +<p>This text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-16-ref.html b/testing/web-platform/tests/css/css-variables/variable-declaration-16-ref.html new file mode 100644 index 0000000000..6679d0de95 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-16-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<meta name="flags" content="ahem"> +<style> +p { + font-family: Ahem, sans-serif; +} +</style> +<p>This text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-16.html b/testing/web-platform/tests/css/css-variables/variable-declaration-16.html new file mode 100644 index 0000000000..bb047bb53d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-16.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list with the first item being a variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="variable-declaration-16-ref.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<style> +body { + font-family: serif; +} +p { + font-family: monospace; + --a: var(--b), sans-serif; + --b: Ahem; + font-family: var(--a); +} +</style> +<p>This text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-17-ref.html b/testing/web-platform/tests/css/css-variables/variable-declaration-17-ref.html new file mode 100644 index 0000000000..b0075fc38f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-17-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<meta name="flags" content="ahem"> +<style> +p { + font-family: SomeUnknownFont, Ahem; +} +</style> +<p>This text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-17.html b/testing/web-platform/tests/css/css-variables/variable-declaration-17.html new file mode 100644 index 0000000000..f0e3c9c79b --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-17.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list with the last item being a variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="variable-declaration-17-ref.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<style> +body { + font-family: serif; +} +p { + font-family: monospace; + --a: SomeUnknownFont, var(--b); + --b: Ahem; + font-family: var(--a); +} +</style> +<p>This text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-18-ref.html b/testing/web-platform/tests/css/css-variables/variable-declaration-18-ref.html new file mode 100644 index 0000000000..6679d0de95 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-18-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<meta name="flags" content="ahem"> +<style> +p { + font-family: Ahem, sans-serif; +} +</style> +<p>This text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-18.html b/testing/web-platform/tests/css/css-variables/variable-declaration-18.html new file mode 100644 index 0000000000..7262e375e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-18.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list with the comma coming from a variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="variable-declaration-18-ref.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<style> +body { + font-family: serif; +} +p { + font-family: monospace; + --a: Ahem var(--b) sans-serif; + --b: ,; + font-family: var(--a); +} +</style> +<p>This text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-19.html b/testing/web-platform/tests/css/css-variables/variable-declaration-19.html new file mode 100644 index 0000000000..da0a825237 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-19.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a function where one of the arguments is a variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: rgb(0, var(--b), 0); + --b: 128; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-20.html b/testing/web-platform/tests/css/css-variables/variable-declaration-20.html new file mode 100644 index 0000000000..9bffae2d50 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-20.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with "!important".</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: var(--b) !important; + --b: green; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-21.html b/testing/web-platform/tests/css/css-variables/variable-declaration-21.html new file mode 100644 index 0000000000..0a91196df0 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-21.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a function where all of the arguments and commas are made up of variable references.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: rgb(var(--b)var(--c)var(--d)); + --b: 0,; + --c: 128,; + --d: 0; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-22.html b/testing/web-platform/tests/css/css-variables/variable-declaration-22.html new file mode 100644 index 0000000000..a96d9cf189 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-22.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a variable reference with a number of levels of variable reference fallbacks.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: var(--b, var(--c, var(--d, green))); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-23.html b/testing/web-platform/tests/css/css-variables/variable-declaration-23.html new file mode 100644 index 0000000000..b3b1d18234 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-23.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with invalid syntax due to having two "!important" priorities.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: green; + --b: crimson; + --a: var(--b) !important !important; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-24.html b/testing/web-platform/tests/css/css-variables/variable-declaration-24.html new file mode 100644 index 0000000000..14fe47a1e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-24.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that contains a CDO token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: green; +} +p { + color: red; +} +p { + color: orange; + --a: red; + --b: crimson; + --a: var(--b) <!--; /* valid at parse */ + color: var(--a); /* but IACVT at substitution */ +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-25.html b/testing/web-platform/tests/css/css-variables/variable-declaration-25.html new file mode 100644 index 0000000000..ad79f4ced1 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-25.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that contains a CDC token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: green; +} +p { + color: red; +} +p { + color: orange; + --a: red; + --b: crimson; + --a: --> var(--b); /* valid at parse */ + color: var(--a); /* but IACVT at substitution */ +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-26.html b/testing/web-platform/tests/css/css-variables/variable-declaration-26.html new file mode 100644 index 0000000000..79ff10d2b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-26.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that contains only a white space token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: ; + color: var(--a) green; +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-29.html b/testing/web-platform/tests/css/css-variables/variable-declaration-29.html new file mode 100644 index 0000000000..2dbe0183fe --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-29.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with an invalid custom property name "--".</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: green; + --: red; + color: var(--,crimson); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-30.html b/testing/web-platform/tests/css/css-variables/variable-declaration-30.html new file mode 100644 index 0000000000..e354abb2d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-30.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that contains a variable reference to itself.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: crimson; + --a: var(--a); + color: var(--a,green); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-31.html b/testing/web-platform/tests/css/css-variables/variable-declaration-31.html new file mode 100644 index 0000000000..4a24bf2bd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-31.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable where the variable name begins with a digit.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --0: green; + color: var(--\30); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-32.html b/testing/web-platform/tests/css/css-variables/variable-declaration-32.html new file mode 100644 index 0000000000..d11478e8f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-32.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable where the variable name begins with an escaped digit.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --\30: green; + color: var(--\30); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-33.html b/testing/web-platform/tests/css/css-variables/variable-declaration-33.html new file mode 100644 index 0000000000..521db857f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-33.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable where the variable name begins with an escaped letter.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --\61: green; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-34.html b/testing/web-platform/tests/css/css-variables/variable-declaration-34.html new file mode 100644 index 0000000000..c6b4d42d34 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-34.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable where the variable name begins with a lone surrogate.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --\d800: green; + color: var(--\fffd); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-35.html b/testing/web-platform/tests/css/css-variables/variable-declaration-35.html new file mode 100644 index 0000000000..f1289069f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-35.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable where the variable name begins with U+FFFD.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --\fffd: green; + color: var(--\fffd); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-36.html b/testing/web-platform/tests/css/css-variables/variable-declaration-36.html new file mode 100644 index 0000000000..1f984fe7a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-36.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable where the variable name begins with an out-of-range Unicode character escape.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --\ffffff: green; + color: var(--\fffd); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-37.html b/testing/web-platform/tests/css/css-variables/variable-declaration-37.html new file mode 100644 index 0000000000..bd4b1c0f4b --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-37.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable consisting of a variable reference where white space surrounds the comma separating the variable name and fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: var(--b , ); + color: var(--a) green; +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-38.html b/testing/web-platform/tests/css/css-variables/variable-declaration-38.html new file mode 100644 index 0000000000..ece8cf8ffa --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-38.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring two variables in the same declaration block that differ only in case, with lowercase first.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: green; + --A: crimson; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-39.html b/testing/web-platform/tests/css/css-variables/variable-declaration-39.html new file mode 100644 index 0000000000..d1caabbd6d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-39.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring two variables in the same declaration block that differ only in case, with uppercase first.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --A: green; + --a: crimson; + color: var(--A); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-40.html b/testing/web-platform/tests/css/css-variables/variable-declaration-40.html new file mode 100644 index 0000000000..62a4e21700 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-40.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with an invalid custom property name due to it beginning with "VAR-".</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: green; + VAR-a: crimson; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-41.html b/testing/web-platform/tests/css/css-variables/variable-declaration-41.html new file mode 100644 index 0000000000..c1c585b0f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-41.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable where the second '-' in the "--" prefix of the custom property name is escaped.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + -\2d a: green; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-42.html b/testing/web-platform/tests/css/css-variables/variable-declaration-42.html new file mode 100644 index 0000000000..1a60ba2393 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-42.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable where the custom property name includes an unescaped Chinese character and an escape that is terminated by a space character.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<meta charset=utf-8> +<style> +p { + color: red; +} +p { + color: orange; + --a-长-name-that-might-be-longer-than-you\27 d-normally-use: green; + color: var(--a-长-name-that-might-be-longer-than-you\27 d-normally-use); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-43.html b/testing/web-platform/tests/css/css-variables/variable-declaration-43.html new file mode 100644 index 0000000000..73aaef2b89 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-43.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable whose value is "initial".</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: initial; + color: var(--a,green); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-44.html b/testing/web-platform/tests/css/css-variables/variable-declaration-44.html new file mode 100644 index 0000000000..f2a968d250 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-44.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable whose value is "inherit" where there is no variable to inherit from.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: inherit; + color: var(--a,green); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-45.html b/testing/web-platform/tests/css/css-variables/variable-declaration-45.html new file mode 100644 index 0000000000..a5003d9a69 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-45.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable whose value is "inherit" where there is a variable to inherit from.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: green; + color: crimson; +} +p { + color: red; +} +p { + color: orange; + --a: inherit; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-46.html b/testing/web-platform/tests/css/css-variables/variable-declaration-46.html new file mode 100644 index 0000000000..c846b1cf97 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-46.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable whose value is "initial" where there is a variable to inherit from.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: crimson; +} +p { + color: red; +} +p { + color: orange; + --a: initial; + color: var(--a,green); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-47.html b/testing/web-platform/tests/css/css-variables/variable-declaration-47.html new file mode 100644 index 0000000000..2f06d093f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-47.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable whose value consists of a reference to a variable whose value is "inherit".</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --b: green; + color: crimson; +} +p { + color: red; +} +p { + color: orange; + --a: var(--b); + --b: inherit; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-48.html b/testing/web-platform/tests/css/css-variables/variable-declaration-48.html new file mode 100644 index 0000000000..9abf328977 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-48.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a number of variables in a cycle.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: green; +} +p { + color: crimson; + --a: red var(--b); + --b: var(--c); + --c: var(--d); + --d: var(--e); + --e: var(--a); + --f: var(--e); + color: var(--f); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-49.html b/testing/web-platform/tests/css/css-variables/variable-declaration-49.html new file mode 100644 index 0000000000..9a4b984b80 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-49.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that is a dependent of a variable involved in a cycle but which itself is not involved in a cycle.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: orange; +} +p { + color: crimson; + --a: red var(--b) var(--g); + --b: var(--c); + --c: var(--d); + --d: var(--e); + --e: var(--a); + --f: var(--e); + --g: green; + color: var(--g); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-50.html b/testing/web-platform/tests/css/css-variables/variable-declaration-50.html new file mode 100644 index 0000000000..0545b003d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-50.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a number of variables in a chain, where the final element of the chain uses its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: green; +} +p { + color: crimson; + --a: var(--b,red); + --b: var(--c); + --c: var(--d); + --d: var(--e); + --e: var(--a); + --f: var(--e); + color: var(--f); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-51.html b/testing/web-platform/tests/css/css-variables/variable-declaration-51.html new file mode 100644 index 0000000000..eac02079bf --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-51.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a reference to an invalid inherited variable.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#invalid-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: orange; + --c: var(--a); +} +p { + --a: var(--b); +} +p { + color: red; + --b: var(--c,green); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-52.html b/testing/web-platform/tests/css/css-variables/variable-declaration-52.html new file mode 100644 index 0000000000..e913e2dcd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-52.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of a reference to an inherited variable whose value was a variable reference that used its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: orange; + --c: var(--a,green); +} +p { + --a: var(--b); +} +p { + color: red; + --b: var(--c,crimson); + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-53.html b/testing/web-platform/tests/css/css-variables/variable-declaration-53.html new file mode 100644 index 0000000000..b8b6a8cf5c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-53.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of two variable references without fallback and with no intervening white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: green; +} +span { + color: red; + --a:var(--b)var(--c); + --b:orange; + --c:red; + color: var(--a); +} +</style> +<p><span>This text must be green.</span></p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-54.html b/testing/web-platform/tests/css/css-variables/variable-declaration-54.html new file mode 100644 index 0000000000..8e0b39c4c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-54.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of two variable references with the first variable reference using fallback and with no intervening white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: green; +} +span { + color: red; + --a:var(--b,orange)var(--c); + --c:red; + color: var(--a); +} +</style> +<p><span>This text must be green.</span></p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-55.html b/testing/web-platform/tests/css/css-variables/variable-declaration-55.html new file mode 100644 index 0000000000..2fb68d516d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-55.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that consists of two variable references with the second variable reference using fallback and with no intervening white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: green; +} +span { + color: red; + --a:var(--b)var(--c,red); + --b:orange; + color: var(--a); +} +</style> +<p><span>This text must be green.</span></p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-56.html b/testing/web-platform/tests/css/css-variables/variable-declaration-56.html new file mode 100644 index 0000000000..21378f892d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-56.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable whose value is "unset" where there is no variable to inherit from.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; +} +p { + color: orange; + --a: unset; + color: var(--a,green); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-57.html b/testing/web-platform/tests/css/css-variables/variable-declaration-57.html new file mode 100644 index 0000000000..aa8d84c6ac --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-57.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable whose value is "unset" where there is a variable to inherit from.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: green; + color: crimson; +} +p { + color: red; +} +p { + color: orange; + --a: unset; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-58.html b/testing/web-platform/tests/css/css-variables/variable-declaration-58.html new file mode 100644 index 0000000000..b05f967831 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-58.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable whose value consists of a reference to a variable whose value is "unset".</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --b: green; + color: crimson; +} +p { + color: red; +} +p { + color: orange; + --a: var(--b); + --b: unset; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-59.html b/testing/web-platform/tests/css/css-variables/variable-declaration-59.html new file mode 100644 index 0000000000..2032a342d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-59.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable with a trailing invalid token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: var(--a); + --a: green; + --a: red); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-declaration-60.html b/testing/web-platform/tests/css/css-variables/variable-declaration-60.html new file mode 100644 index 0000000000..3304eb4a38 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-declaration-60.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=utf-8> +<title>CSS Test: Test declaring a variable with a value whose name is "initial" but using Turkish dotted/dotless 'i's.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +div { + color: orange; + --a: green; + color: var(--a); +} +p { + --b: İnitial; + --c: ınitial; + color: var(--b,var(--c,red)); +} +</style> +<div><p>This text must be green.</p></div> diff --git a/testing/web-platform/tests/css/css-variables/variable-definition-border-shorthand-serialize.html b/testing/web-platform/tests/css/css-variables/variable-definition-border-shorthand-serialize.html new file mode 100644 index 0000000000..c3f8e58fa5 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-definition-border-shorthand-serialize.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> + diff --git a/testing/web-platform/tests/css/css-variables/variable-definition-cascading.html b/testing/web-platform/tests/css/css-variables/variable-definition-cascading.html new file mode 100644 index 0000000000..97c7e26d4f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-definition-cascading.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-variables/variable-definition-keywords.html b/testing/web-platform/tests/css/css-variables/variable-definition-keywords.html new file mode 100644 index 0000000000..7e8876102a --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-definition-keywords.html @@ -0,0 +1,74 @@ +<!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> + + <div id="revertParent" style="--var: 20px;"> + <div id="revertTest" style="--var: revert;"></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" }, + { elementId: "revertTest", property: "--var", expectedValue: "20px", testName: "computed style revert" } + ]; + + 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" }, + { elementId: "revertTest", property: "--var", expectedValue: "revert", testName: "specified style revert" } + ]; + + 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> diff --git a/testing/web-platform/tests/css/css-variables/variable-definition.html b/testing/web-platform/tests/css/css-variables/variable-definition.html new file mode 100644 index 0000000000..d38b64c72e --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-definition.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:"", 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:"", style:"--var:value;--var:;", testName:"can 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> diff --git a/testing/web-platform/tests/css/css-variables/variable-empty-name-reserved.html b/testing/web-platform/tests/css/css-variables/variable-empty-name-reserved.html new file mode 100644 index 0000000000..ed5d7d554d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-empty-name-reserved.html @@ -0,0 +1,13 @@ +<!doctype html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2692"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1467309"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<title>-- is a reserved property name</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +test(function() { + assert_false(CSS.supports("--", "initial"), "-- is a reserved property name"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-variables/variable-exponential-blowup.html b/testing/web-platform/tests/css/css-variables/variable-exponential-blowup.html new file mode 100644 index 0000000000..36a67d3438 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-exponential-blowup.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>CSS Variables Test: Exponential blowup doesn't crash</title> +<meta charset="UTF-8"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-variables/"> +<script> + let css = ` + --v0: "Something really really really long"; + `; + for (let i = 0; i < 31; ++i) + css += `--v${i + 1}: var(--v${i}) var(--v${i});`; + let s = document.createElement("style"); + s.innerHTML = ` + :root { ${css}; } + :root::before { content: var(--v31); } + `; + document.head.appendChild(s); +</script> +PASS if doesn't crash +<script> + test(function() { + getComputedStyle(document.documentElement, "::before").content; + assert_true(true, "Didn't crash"); + }); +</script> diff --git a/testing/web-platform/tests/css/css-variables/variable-external-declaration-01.html b/testing/web-platform/tests/css/css-variables/variable-external-declaration-01.html new file mode 100644 index 0000000000..bae5abf700 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-external-declaration-01.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable in an external CSS file.</title> +<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<link rel="stylesheet" type="text/css" href="support/external-variable-declaration.css"> + +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-external-font-face-01-ref.html b/testing/web-platform/tests/css/css-variables/variable-external-font-face-01-ref.html new file mode 100644 index 0000000000..3e7fd9a263 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-external-font-face-01-ref.html @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<meta name="flags" content="ahem"> +<p style="font-family: serif">This text must not be in Ahem.</p> +<p style="font-family: Ahem">But this text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-external-font-face-01.html b/testing/web-platform/tests/css/css-variables/variable-external-font-face-01.html new file mode 100644 index 0000000000..74132d59c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-external-font-face-01.html @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test the invalid declaration and use of a variable in an @font-face rule within an external CSS.</title> +<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="variable-external-font-face-01-ref.html"> +<link rel="stylesheet" type="text/css" href="support/external-variable-font-face.css"> +<meta name="flags" content="ahem"> +<p id=a>This text must not be in Ahem.</p> +<p id=b>But this text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-external-reference-01.html b/testing/web-platform/tests/css/css-variables/variable-external-reference-01.html new file mode 100644 index 0000000000..ee40db762c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-external-reference-01.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test the use of a variable in a non-custom property where the variable value is inherited within an external CSS.</title> +<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="stylesheet" type="text/css" href="support/external-variable-reference.css"> +<link rel="match" href="support/color-green-ref.html"> + +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-external-supports-01.html b/testing/web-platform/tests/css/css-variables/variable-external-supports-01.html new file mode 100644 index 0000000000..dd3ad17281 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-external-supports-01.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference within an external stylesheet file.</title> +<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="stylesheet" type="text/css" href="support/external-variable-supports.css"> +<link rel="match" href="support/color-green-ref.html"> + +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-first-letter.html b/testing/web-platform/tests/css/css-variables/variable-first-letter.html new file mode 100644 index 0000000000..da6daba42f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-first-letter.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> + diff --git a/testing/web-platform/tests/css/css-variables/variable-first-line.html b/testing/web-platform/tests/css/css-variables/variable-first-line.html new file mode 100644 index 0000000000..d439a51bf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-first-line.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> + diff --git a/testing/web-platform/tests/css/css-variables/variable-font-face-01-ref.html b/testing/web-platform/tests/css/css-variables/variable-font-face-01-ref.html new file mode 100644 index 0000000000..3e7fd9a263 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-font-face-01-ref.html @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<meta name="flags" content="ahem"> +<p style="font-family: serif">This text must not be in Ahem.</p> +<p style="font-family: Ahem">But this text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-font-face-01.html b/testing/web-platform/tests/css/css-variables/variable-font-face-01.html new file mode 100644 index 0000000000..168d970075 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-font-face-01.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test the invalid declaration and use of a variable in an @font-face rule.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="variable-font-face-01-ref.html"> +<meta name="flags" content="ahem"> +<style> +@font-face { + --a: MyTestFontName; + font-family: var(--a); + src: url(/fonts/Ahem.ttf); +} +@font-face { + font-family: MyTestFontName2; + src: url(/fonts/Ahem.ttf); +} +#a { + font-family: MyTestFontName, serif; +} +#b { + font-family: MyTestFontName2, serif; +} +</style> +<p id=a>This text must not be in Ahem.</p> +<p id=b>But this text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-font-face-02-ref.html b/testing/web-platform/tests/css/css-variables/variable-font-face-02-ref.html new file mode 100644 index 0000000000..3e7fd9a263 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-font-face-02-ref.html @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"> +<meta name="flags" content="ahem"> +<p style="font-family: serif">This text must not be in Ahem.</p> +<p style="font-family: Ahem">But this text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-font-face-02.html b/testing/web-platform/tests/css/css-variables/variable-font-face-02.html new file mode 100644 index 0000000000..8b29d8d63a --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-font-face-02.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test the invalid use of a variable in an @font-face rule where the variable is defined on the root element.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="variable-font-face-02-ref.html"> +<meta name="flags" content="ahem"> +<style> +:root { + --a: MyTestFontName; +} +@font-face { + font-family: var(--a); + src: url(/fonts/Ahem.ttf); +} +@font-face { + font-family: MyTestFontName2; + src: url(/fonts/Ahem.ttf); +} +#a { + font-family: MyTestFontName, serif; +} +#b { + font-family: MyTestFontName2, serif; +} +</style> +<p id=a>This text must not be in Ahem.</p> +<p id=b>But this text must be in Ahem.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-generated-content-dynamic-001-ref.html b/testing/web-platform/tests/css/css-variables/variable-generated-content-dynamic-001-ref.html new file mode 100644 index 0000000000..893611a157 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-generated-content-dynamic-001-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<div>PASS</div> diff --git a/testing/web-platform/tests/css/css-variables/variable-generated-content-dynamic-001.html b/testing/web-platform/tests/css/css-variables/variable-generated-content-dynamic-001.html new file mode 100644 index 0000000000..792c51d31c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-generated-content-dynamic-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-variables/variable-invalidation.html b/testing/web-platform/tests/css/css-variables/variable-invalidation.html new file mode 100644 index 0000000000..677f217c88 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-invalidation.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-variables/variable-presentation-attribute.html b/testing/web-platform/tests/css/css-variables/variable-presentation-attribute.html new file mode 100644 index 0000000000..6e35c444b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-presentation-attribute.html @@ -0,0 +1,126 @@ +<!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:["baseline", "before-edge", "text-before-edge", "middle", "central", "after-edge", "text-after-edge", "ideographic", "alphabetic", "hanging", "mathematical"], default: "baseline" }, + { 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", "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:["100%", "50%", "62.5%", "75%", "87.5%", "112.5%", "125%", "150%", "200%"], default: "100%" }, + { 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-line", valuesToTest:["none", "underline", "overline", "line-through"], default: "none" }, + { property: "text-decoration-style", valuesToTest:["solid", "double", "dotted", "dashed", "wavy"], default: "solid" }, + { 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> + diff --git a/testing/web-platform/tests/css/css-variables/variable-pseudo-element.html b/testing/web-platform/tests/css/css-variables/variable-pseudo-element.html new file mode 100644 index 0000000000..ee61cbf394 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-pseudo-element.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>Variables work in ::before/::after pseudos</title> + + <meta rel="author" title="Kevin Babbitt"> + <meta rel="author" title="Greg Whitworth"> + <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> + <link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/"> + <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> + + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + + <style> + :root { + --color: green; + --color2: red; + } + div::before { + content: '[before]'; + } + div::after { + content: '[after]'; + } + + #div1 { + color: red; + } + #div1::before, #div1::after { + color: var(--color2); + --color2: green; + } + + #div2 { + color: var(--color2); + } + #div2::before, #div2::after { + color: var(--color); + } + + #div3 { + color: var(--color); + } + #div3::before, #div3::after { + --color: red; + } + </style> + + <div id="div1">div1</div> + <div id="div2">div2</div> + <div id="div3">div3</div> + <span id="control" style="color: green;"></span> + +<script> + "use strict"; + + [...document.querySelectorAll("div")].forEach(function (div) { + test( function () { + const expectedColor = getComputedStyle(document.querySelector("#control")).color; + var actualBeforeColor = window.getComputedStyle(div, ':before').getPropertyValue('color'); + var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('color'); + assert_equals(actualBeforeColor, expectedColor); + assert_equals(actualAfterColor, expectedColor); + }, div.getAttribute("id")); + }); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-variables/variable-recalc-with-initial.html b/testing/web-platform/tests/css/css-variables/variable-recalc-with-initial.html new file mode 100644 index 0000000000..0d880f41f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-recalc-with-initial.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<head> + <title>Style recalculation picks up “initial” variable declaration</title> + <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> + <link rel="help" href="https://crbug.com/1508841"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + .a { + --color: red; + } + .b { + --color: initial; + } + .c { + color: var(--color, green); + } + </style> +</head> +<body> + <div class="a"> + <div class="b"> + <div class="c" id="target">Test passes if this text is green.</div> + </div> + </div> + <script> + test(() => { + let target = document.getElementById('target'); + target.offsetTop; + document.body.style.pointerEvents = 'none'; + assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); + }); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-01.html b/testing/web-platform/tests/css/css-variables/variable-reference-01.html new file mode 100644 index 0000000000..1737b2e655 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-01.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test the use of a variable in a non-custom property where the variable value is inherited.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +:root { + --a: green; +} +p { + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-02.html b/testing/web-platform/tests/css/css-variables/variable-reference-02.html new file mode 100644 index 0000000000..92e4aedca6 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-02.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#invalid-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +:root { + --a: crimson; + color: red; +} +body { + color: green; +} +p { + color: orange; + color: var(--a) var(--b); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-03.html b/testing/web-platform/tests/css/css-variables/variable-reference-03.html new file mode 100644 index 0000000000..bd50b9ab85 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-03.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +:root { + --a: green; + --b: ; + color: red; +} +p { + color: crimson; + color: var(--a) var(--b); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-04.html b/testing/web-platform/tests/css/css-variables/variable-reference-04.html new file mode 100644 index 0000000000..060e55c953 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-04.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +:root { + --a: green; + color: red; +} +p { + color: crimson; + color: var(--a) var(--b, ); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-05.html b/testing/web-platform/tests/css/css-variables/variable-reference-05.html new file mode 100644 index 0000000000..129e19f1d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-05.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test the use of a variable in a non-custom property where the values contains no tokens other than the variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: green; + color: red; +} +p { + color: crimson; + color:var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-06.html b/testing/web-platform/tests/css/css-variables/variable-reference-06.html new file mode 100644 index 0000000000..8b5771d934 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-06.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains no tokens.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: green; + color: red; +} +p { + color: crimson; + color: var(--a,); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-07.html b/testing/web-platform/tests/css/css-variables/variable-reference-07.html new file mode 100644 index 0000000000..d557161edc --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-07.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains a top level ';' token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: crimson; + color: red; +} +p { + color: green; + color: var(--a,;); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-08.html b/testing/web-platform/tests/css/css-variables/variable-reference-08.html new file mode 100644 index 0000000000..d7aa58df6f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-08.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains a top level '!' token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: crimson; + color: red; +} +p { + color: green; + color: var(--a,!); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-09.html b/testing/web-platform/tests/css/css-variables/variable-reference-09.html new file mode 100644 index 0000000000..f2128cf2cb --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-09.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with a variable reference that has a non-top level ';' token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: green; + color: crimson; +} +p { + color: red; + color: var(--a,(;)); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-10.html b/testing/web-platform/tests/css/css-variables/variable-reference-10.html new file mode 100644 index 0000000000..73251154c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-10.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with a variable reference that has a non-top level '!' token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: green; + color: crimson; +} +p { + color: red; + color: var(--a,(!)); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-11.html b/testing/web-platform/tests/css/css-variables/variable-reference-11.html new file mode 100644 index 0000000000..165e77f900 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-11.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains nothing but a comment.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + --a: green; + color: red; +} +p { + color: crimson; + color: var(--a,/**/); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-12-ref.html b/testing/web-platform/tests/css/css-variables/variable-reference-12-ref.html new file mode 100644 index 0000000000..8fcd177cb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-12-ref.html @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<p>The words "hello there" must appear below:</p> +<p>hello there</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-12.html b/testing/web-platform/tests/css/css-variables/variable-reference-12.html new file mode 100644 index 0000000000..968b71ebb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-12.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test the use of variable references in the 'content' property.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="variable-reference-12-ref.html"> +<style> +:root { + --a: "hello"; + --b: "there"; +} +#a:before { + content: var(--a) " " var(--b); +} +</style> +<p>The words "hello there" must appear below:</p> +<p id=a></p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-13.html b/testing/web-platform/tests/css/css-variables/variable-reference-13.html new file mode 100644 index 0000000000..b7249981f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-13.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test that important variable declarations are not overwritten by subsequent non-important variable declarations in the one declaration block.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green !important; + --a: crimson; + color: var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-14.html b/testing/web-platform/tests/css/css-variables/variable-reference-14.html new file mode 100644 index 0000000000..7196f5879d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-14.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test that important variable declarations cascade correctly.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +#a { + --a: green !important; +} +p { + color: red; + --a: crimson; + color: var(--a); +} +</style> +<p id=a>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-15.html b/testing/web-platform/tests/css/css-variables/variable-reference-15.html new file mode 100644 index 0000000000..01cd29b2b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-15.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with two variable references with no intervening white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: green; +} +p { + color: crimson; + --a: orange; + --b: red; + color: var(--a)var(--b); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-16.html b/testing/web-platform/tests/css/css-variables/variable-reference-16.html new file mode 100644 index 0000000000..f27108ce92 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-16.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property that consists of a variable reference with a number of levels of variable reference fallbacks.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: red; +} +p { + color: crimson; + color: var(--a, var(--b, var(--c, green))); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-17.html b/testing/web-platform/tests/css/css-variables/variable-reference-17.html new file mode 100644 index 0000000000..2f677a6a1c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-17.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property that consists of a variable reference whose fallback contains a CDO token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: red; +} +p { + color: crimson; + --a: green; + color: var(--a, <!--); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-18.html b/testing/web-platform/tests/css/css-variables/variable-reference-18.html new file mode 100644 index 0000000000..a858b2b6bc --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-18.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property that contains a variable reference and balanced braces and square brackets.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: green; +} +p { + color: red; + color: { [ var(--a) ] }; +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-19.html b/testing/web-platform/tests/css/css-variables/variable-reference-19.html new file mode 100644 index 0000000000..c3b0413e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-19.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property that contains a variable reference and a non-top level ';' token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: green; +} +p { + color: red; + color: [;] var(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-20.html b/testing/web-platform/tests/css/css-variables/variable-reference-20.html new file mode 100644 index 0000000000..868a576949 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-20.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property that contains a variable reference whose function token is in uppercase.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + color: VAR(--a); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-21.html b/testing/web-platform/tests/css/css-variables/variable-reference-21.html new file mode 100644 index 0000000000..f1ad08bda2 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-21.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property that contains a reference to a variable whose name must be escaped.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --0: green; + color: var(--\30); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-22.html b/testing/web-platform/tests/css/css-variables/variable-reference-22.html new file mode 100644 index 0000000000..a02f49ac07 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-22.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --\d800: green; + color: var(--\d800); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-23.html b/testing/web-platform/tests/css/css-variables/variable-reference-23.html new file mode 100644 index 0000000000..44afd5a6ba --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-23.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --\d800: green; + color: var(--\fffd); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-24.html b/testing/web-platform/tests/css/css-variables/variable-reference-24.html new file mode 100644 index 0000000000..25c9c6743a --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-24.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --\ffffff: green; + color: var(--\fffd); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-25.html b/testing/web-platform/tests/css/css-variables/variable-reference-25.html new file mode 100644 index 0000000000..4ed514c9b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-25.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property that contains a variable reference with no fallback and which is implicitly closed due to EOF.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + color: var(--a</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-26.html b/testing/web-platform/tests/css/css-variables/variable-reference-26.html new file mode 100644 index 0000000000..ca3b01b26d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-26.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + color: var(--a , </style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-27.html b/testing/web-platform/tests/css/css-variables/variable-reference-27.html new file mode 100644 index 0000000000..efd8418c84 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-27.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + color: var(--a, </style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-28.html b/testing/web-platform/tests/css/css-variables/variable-reference-28.html new file mode 100644 index 0000000000..7796f1b880 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-28.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + color: var(--a, var(--b</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-29.html b/testing/web-platform/tests/css/css-variables/variable-reference-29.html new file mode 100644 index 0000000000..b01873fc36 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-29.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: green; + color: var(--a /* unclosed comment</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-30.html b/testing/web-platform/tests/css/css-variables/variable-reference-30.html new file mode 100644 index 0000000000..9082c3058e --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-30.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with invalid syntax due to containing two "!important" priorities.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: green; + --a: red; + color: var(--a) !important !important; +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-31.html b/testing/web-platform/tests/css/css-variables/variable-reference-31.html new file mode 100644 index 0000000000..bfe4677bd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-31.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with a variable reference that has a digit after the "--" prefix.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: orange; +} +p { + color: red; + --0: green; + color: var(--0); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-32.html b/testing/web-platform/tests/css/css-variables/variable-reference-32.html new file mode 100644 index 0000000000..e1f5789c3a --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-32.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with invalid syntax due to containing a variable reference with fallback that contains a bad string.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: orange; +} +p { + color: green; + --a: red; + color: var(--a, " +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-33.html b/testing/web-platform/tests/css/css-variables/variable-reference-33.html new file mode 100644 index 0000000000..c527bcdd42 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-33.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property containing a variable reference with fallback is an implicitly closed string due to EOF.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: orange; +} +p { + color: red; + --a: green; + color: var(--a, "</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-34.html b/testing/web-platform/tests/css/css-variables/variable-reference-34.html new file mode 100644 index 0000000000..8cb14db28b --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-34.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property with invalid syntax due to containing a variable reference with fallback that contains a bad URL.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: orange; +} +p { + color: green; + --a: red; + color: var(--a, url(" +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-35.html b/testing/web-platform/tests/css/css-variables/variable-reference-35.html new file mode 100644 index 0000000000..cddc46691f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-35.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom property containing a variable reference with fallback is an implicitly closed URL due to EOF.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { + color: orange; +} +p { + color: red; + --a: green; + color: var(--a, url("</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-36-ref.html b/testing/web-platform/tests/css/css-variables/variable-reference-36-ref.html new file mode 100644 index 0000000000..3af79f7948 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-36-ref.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<style> +p { + background-color: green; + color: white; +} +</style> +<p>This text must have a green background color.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-36.html b/testing/web-platform/tests/css/css-variables/variable-reference-36.html new file mode 100644 index 0000000000..e4f4d50260 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-36.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a non-custom shorthand property containing a variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands"> +<link rel="match" href="variable-reference-36-ref.html"> +<style> +p { + background-color: red; + --a: url(nothing) green; + background: var(--a); + color: white; +} +</style> +<p>This text must have a green background color.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-37-ref.html b/testing/web-platform/tests/css/css-variables/variable-reference-37-ref.html new file mode 100644 index 0000000000..3af79f7948 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-37-ref.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<style> +p { + background-color: green; + color: white; +} +</style> +<p>This text must have a green background color.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-37.html b/testing/web-platform/tests/css/css-variables/variable-reference-37.html new file mode 100644 index 0000000000..391c5532c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-37.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands"> +<link rel="match" href="variable-reference-37-ref.html"> +<style> +p { + --a: url(nothing) red; + background: var(--a); + background-color: green; + color: white; +} +</style> +<p>This text must have a green background color.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-38-ref.html b/testing/web-platform/tests/css/css-variables/variable-reference-38-ref.html new file mode 100644 index 0000000000..8b4e262c78 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-38-ref.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<style> +p { padding-left: 1em; } +#a { border-left: black dotted; } +#b { border-left: black solid; } +</style> +<p id=a>The left border must be dotted.</p> +<p id=b>The left border must be solid.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-38.html b/testing/web-platform/tests/css/css-variables/variable-reference-38.html new file mode 100644 index 0000000000..8c37c10301 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-38.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test using variables in overlapping shorthands.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands"> +<link rel="match" href="variable-reference-38-ref.html"> +<style> +p { padding-left: 1em; } +#a { --style: solid; --left: black dotted; border-style: var(--style); border-left: var(--left); border-top: none; border-right: none; border-bottom: none; } +#b { --style: solid; --left: black dotted; border-left: var(--left); border-style: var(--style); border-top: none; border-right: none; border-bottom: none; } +</style> +<p id=a>The left border must be dotted.</p> +<p id=b>The left border must be solid.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-39.html b/testing/web-platform/tests/css/css-variables/variable-reference-39.html new file mode 100644 index 0000000000..21b7fd820f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-39.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test declaring a variable that references itself but uses fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles"> +<link rel="match" href="support/color-green-ref.html"> +<style> +p { + color: red; + --a: var(--a, red); + color: var(--a, green); +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-40-ref.html b/testing/web-platform/tests/css/css-variables/variable-reference-40-ref.html new file mode 100644 index 0000000000..a612d33f09 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-40-ref.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<style> +p { + border: 2px solid transparent; + border-image: linear-gradient(to right, orange, blue) 1 1; +} +</style> +<p>This paragraph must have an orange/blue gradient border.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-40.html b/testing/web-platform/tests/css/css-variables/variable-reference-40.html new file mode 100644 index 0000000000..07697c77b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-40.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test that a variable reference within a gradient value in a border-image shorthand parses correctly.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="variable-reference-40-ref.html"> +<style> +p { + --orange: orange; + border: 2px solid transparent; + border-image: linear-gradient(to right, var(--orange), blue) 1 1; +} +</style> +<p>This paragraph must have an orange/blue gradient border.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-cssom.html b/testing/web-platform/tests/css/css-variables/variable-reference-cssom.html new file mode 100644 index 0000000000..00354beaf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-cssom.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-refresh.html b/testing/web-platform/tests/css/css-variables/variable-reference-refresh.html new file mode 100644 index 0000000000..f2b7f0ca2c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-refresh.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-shorthands-cssom.html b/testing/web-platform/tests/css/css-variables/variable-reference-shorthands-cssom.html new file mode 100644 index 0000000000..a0185c4f2a --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-shorthands-cssom.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-shorthands.html b/testing/web-platform/tests/css/css-variables/variable-reference-shorthands.html new file mode 100644 index 0000000000..8da0e798c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-shorthands.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-variable.html b/testing/web-platform/tests/css/css-variables/variable-reference-variable.html new file mode 100644 index 0000000000..866d6e649d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-variable.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-visited-ref.html b/testing/web-platform/tests/css/css-variables/variable-reference-visited-ref.html new file mode 100644 index 0000000000..8647be19a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-visited-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>Verify that colors with var() references apply in visited link context</title> +<link rel="help" href="https://drafts.csswg.org/css-variables/#using-variables"> +<style> + div { + min-height: 10px; + margin-bottom: 10px; + } + + .color { color: green; } + .background_color { background-color: green; } + .border { border: medium solid green; } + .outline { outline: medium solid green; } + .text_decoration { text-decoration: solid underline green; } + .column_rule { columns: 2; column-rule: medium solid green; } + .stroke { stroke: green; fill: white; } + .fill { fill: green; } +</style> +<a href=""> + <div class="color">Text should be green</div> + <div class="background_color"></div> + <div class="border"></div> + <div class="border"></div> + <div class="border"></div> + <div class="border"></div> + <div class="outline"></div> + <div class="outline"></div> + <div class="text_decoration">Underline should be green</div> + <div class="text_decoration">Underline should be green</div> + <div class="column_rule"><div style="height: 20px"></div></div> + <div class="column_rule"><div style="height: 20px"></div></div> + <svg width="20" height="50"> + <rect class="stroke" x="5" y="5" width="10" height="10" /> + <rect class="fill" x="5" y="20" width="10" height="10" /> + </svg> +</a> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-visited.html b/testing/web-platform/tests/css/css-variables/variable-reference-visited.html new file mode 100644 index 0000000000..eb414679b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-visited.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<title>Verify that colors with var() references apply in visited link context</title> +<link rel="help" href="https://drafts.csswg.org/css-variables/#using-variables"> +<link rel="match" href="variable-reference-visited-ref.html"> +<style> + :root { --color: green; } + + div { + min-height: 10px; + margin-bottom: 10px; + } + + .color { + color: var(--color); + } + .background_color { + background-color: var(--color); + } + .border_color_longhand{ + border-style: solid; + border-width: medium; + border-left-color: var(--color); + border-top-color: var(--color); + border-right-color: var(--color); + border-bottom-color: var(--color); + } + .border_shorthand { + border: medium solid var(--color); + } + .border_color_longhand_logical { + border-style: solid; + border-width: medium; + border-inline-start-color: var(--color); + border-inline-end-color: var(--color); + border-block-start-color: var(--color); + border-block-end-color: var(--color); + } + .border_shorthand_logical { + border-inline: medium solid var(--color); + border-block: medium solid var(--color); + } + .outline_color_longhand { + outline-color: var(--color); + outline-style: solid; + outline-width: medium; + } + .outline_shorthand { + outline: medium solid var(--color); + } + .text_decoration_color_longhand { + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-color: var(--color); + } + .text_decoration_shorthand { + text-decoration: solid underline var(--color); + } + .column_rule_color_longhand { + columns: 2; + column-rule-width: medium; + column-rule-style: solid; + column-rule-color: var(--color); + } + .column_rule_shorthand { + columns: 2; + column-rule: medium solid var(--color); + } + .stroke { + stroke: var(--color); + fill: white; + } + .fill { + fill: var(--color); + } +</style> +<a href=""> + <div class="color">Text should be green</div> + <div class="background_color"></div> + <div class="border_color_longhand"></div> + <div class="border_shorthand"></div> + <div class="border_color_longhand_logical"></div> + <div class="border_shorthand_logical"></div> + <div class="outline_color_longhand"></div> + <div class="outline_shorthand"></div> + <div class="text_decoration_color_longhand">Underline should be green</div> + <div class="text_decoration_shorthand">Underline should be green</div> + <div class="column_rule_color_longhand"><div style="height: 20px"></div></div> + <div class="column_rule_shorthand"><div style="height: 20px"></div></div> + <svg width="20" height="50"> + <rect class="stroke" x="5" y="5" width="10" height="10" /> + <rect class="fill" x="5" y="20" width="10" height="10" /> + </svg> +</a> diff --git a/testing/web-platform/tests/css/css-variables/variable-reference-without-whitespace.html b/testing/web-platform/tests/css/css-variables/variable-reference-without-whitespace.html new file mode 100644 index 0000000000..35d558892e --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference-without-whitespace.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 diff --git a/testing/web-platform/tests/css/css-variables/variable-reference.html b/testing/web-platform/tests/css/css-variables/variable-reference.html new file mode 100644 index 0000000000..fb3ae56ebc --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-reference.html @@ -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(--prop,);", expectedPropertyValue: "var(--prop,)" }, + + { cssText: "width: var();", 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> diff --git a/testing/web-platform/tests/css/css-variables/variable-substitution-background-properties.html b/testing/web-platform/tests/css/css-variables/variable-substitution-background-properties.html new file mode 100644 index 0000000000..8810886620 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-substitution-background-properties.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, rgb(0, 0, 0) 10%, rgb(0, 128, 0) 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> diff --git a/testing/web-platform/tests/css/css-variables/variable-substitution-basic.html b/testing/web-platform/tests/css/css-variables/variable-substitution-basic.html new file mode 100644 index 0000000000..e1c0a11aad --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-substitution-basic.html @@ -0,0 +1,124 @@ +<!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:"You can't build up a single token where part of it is provided by a variable (percentages)", + propertyName:"text-indent", + expectedValue:"0px", + style:"--v: 20;text-indent: var(--v)%;" + }, + { + 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> diff --git a/testing/web-platform/tests/css/css-variables/variable-substitution-filters.html b/testing/web-platform/tests/css/css-variables/variable-substitution-filters.html new file mode 100644 index 0000000000..5e48073158 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-substitution-filters.html @@ -0,0 +1,76 @@ +<!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" /> + <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> diff --git a/testing/web-platform/tests/css/css-variables/variable-substitution-replaced-size.html b/testing/web-platform/tests/css/css-variables/variable-substitution-replaced-size.html new file mode 100644 index 0000000000..29bae38e3e --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-substitution-replaced-size.html @@ -0,0 +1,47 @@ +<!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" /> + <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> + diff --git a/testing/web-platform/tests/css/css-variables/variable-substitution-shadow-properties.html b/testing/web-platform/tests/css/css-variables/variable-substitution-shadow-properties.html new file mode 100644 index 0000000000..f57afa2207 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-substitution-shadow-properties.html @@ -0,0 +1,57 @@ +<!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" /> + <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="box-shadow-with-comment" style="--foo: 1px /* hello */ rgb(0, 128, 0); box-shadow: 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", + property:"box-shadow", + expectedValue:"rgb(0, 128, 0) 1px 1px 1px 1px", + }, + { + testName:"box-shadow-with-comment", + property:"box-shadow", + expectedValue:"rgb(0, 128, 0) 1px 1px 1px 1px", + }, + { + testName:"text-shadow", + property:"text-shadow", + expectedValue:"rgb(0, 128, 0) 1px 1px 1px", + }, + ]; + + templates.forEach(function (template) { + test( function () { + let target = document.getElementById(template.testName); + let computedStyle = window.getComputedStyle(target); + let value = computedStyle.getPropertyValue(template.property); + assert_equals(value, template.expectedValue, "Expected Value should match actual value"); + }, template.testName); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-variables/variable-substitution-shorthands.html b/testing/web-platform/tests/css/css-variables/variable-substitution-shorthands.html new file mode 100644 index 0000000000..c501d56abd --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-substitution-shorthands.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-substitution-variable-declaration.html b/testing/web-platform/tests/css/css-variables/variable-substitution-variable-declaration.html new file mode 100644 index 0000000000..5239a05c30 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-substitution-variable-declaration.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-01.html b/testing/web-platform/tests/css/css-variables/variable-supports-01.html new file mode 100644 index 0000000000..1b7872619c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-01.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference and no white space tokens.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color:var(--a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-02.html b/testing/web-platform/tests/css/css-variables/variable-supports-02.html new file mode 100644 index 0000000000..2b74a468fc --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-02.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-03.html b/testing/web-platform/tests/css/css-variables/variable-supports-03.html new file mode 100644 index 0000000000..8d19666d91 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-03.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference surrounded by white space tokens.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a) ) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-04.html b/testing/web-platform/tests/css/css-variables/variable-supports-04.html new file mode 100644 index 0000000000..f8b0458eff --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-04.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var( --a ) ) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-05.html b/testing/web-platform/tests/css/css-variables/variable-supports-05.html new file mode 100644 index 0000000000..858395bb1c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-05.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a non-custom property declaration in an @supports rule where the property value contains a variable reference having no fallback tokens.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)) and (color: var(--a,)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-06.html b/testing/web-platform/tests/css/css-variables/variable-supports-06.html new file mode 100644 index 0000000000..d83f60055c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-06.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a, )) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-07.html b/testing/web-platform/tests/css/css-variables/variable-supports-07.html new file mode 100644 index 0000000000..895b20d0d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-07.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a non-custom property declaration in an @supports rule where the property value contains a variable reference having no fallback tokens, just a comment.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)) and (color: var(--a,/**/)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-08.html b/testing/web-platform/tests/css/css-variables/variable-supports-08.html new file mode 100644 index 0000000000..637bfb8de7 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-08.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a comment and an identifier.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a,/**/a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-09.html b/testing/web-platform/tests/css/css-variables/variable-supports-09.html new file mode 100644 index 0000000000..f82e860296 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-09.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having a '!' token at the top level of its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)) and (not (color: var(--a,!))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-10.html b/testing/web-platform/tests/css/css-variables/variable-supports-10.html new file mode 100644 index 0000000000..c8d77476b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-10.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having "!important" at the top level of its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)) and (not (color: var(--a,!important))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-11.html b/testing/web-platform/tests/css/css-variables/variable-supports-11.html new file mode 100644 index 0000000000..835d06b52d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-11.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing 'color' property declaration in an @supports rule with a variable reference that comes after a non-color value.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: 1px var(--a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-12.html b/testing/web-platform/tests/css/css-variables/variable-supports-12.html new file mode 100644 index 0000000000..594e78e21d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-12.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing 'color' property declaration in an @supports rule with a variable reference that comes before a non-color value.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a) 1px) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-13.html b/testing/web-platform/tests/css/css-variables/variable-supports-13.html new file mode 100644 index 0000000000..d6e8a68005 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-13.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: something 3px url(whereever) calc(var(--a) + 1px)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-14.html b/testing/web-platform/tests/css/css-variables/variable-supports-14.html new file mode 100644 index 0000000000..831ee1b057 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-14.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule with a variable reference and an "!important" priority.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a) !important) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-15.html b/testing/web-platform/tests/css/css-variables/variable-supports-15.html new file mode 100644 index 0000000000..205c86d97b --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-15.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule with two adjacent variable references with no intervening white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)var(--b)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-16.html b/testing/web-platform/tests/css/css-variables/variable-supports-16.html new file mode 100644 index 0000000000..102d2c1cdf --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-16.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a, var(--b, var(--c, black)))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-17.html b/testing/web-platform/tests/css/css-variables/variable-supports-17.html new file mode 100644 index 0000000000..88f7d4c408 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-17.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing non-custom property declaration in an @supports rule with two "!important" priorities.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)) and (not (color: var(--a) !important !important)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-18.html b/testing/web-platform/tests/css/css-variables/variable-supports-18.html new file mode 100644 index 0000000000..81423b4d1a --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-18.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a CDO token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a) <!--) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-19.html b/testing/web-platform/tests/css/css-variables/variable-supports-19.html new file mode 100644 index 0000000000..df90399566 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-19.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a CDC token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: --> var(--a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-20.html b/testing/web-platform/tests/css/css-variables/variable-supports-20.html new file mode 100644 index 0000000000..2673b38025 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-20.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and balanced braces and square brackets.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: { [ var(--a) ] }) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-21.html b/testing/web-platform/tests/css/css-variables/variable-supports-21.html new file mode 100644 index 0000000000..67010c2edb --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-21.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having a ';' token at the top level of its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)) and (not (color: var(--a,;))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-22.html b/testing/web-platform/tests/css/css-variables/variable-supports-22.html new file mode 100644 index 0000000000..38d1edc558 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-22.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a non-top level ';' token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: [;] var(--a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-23.html b/testing/web-platform/tests/css/css-variables/variable-supports-23.html new file mode 100644 index 0000000000..6ab942132a --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-23.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing non-custom property declaration in an @supports rule whose value contains a variable reference with a top level ';' token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)) and (not (color: var(--a);)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-24.html b/testing/web-platform/tests/css/css-variables/variable-supports-24.html new file mode 100644 index 0000000000..18488cdab0 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-24.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a,(;))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-25.html b/testing/web-platform/tests/css/css-variables/variable-supports-25.html new file mode 100644 index 0000000000..7ba0aafb71 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-25.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference whose function token is in uppercase.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: VAR(--a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-26.html b/testing/web-platform/tests/css/css-variables/variable-supports-26.html new file mode 100644 index 0000000000..b49df51964 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-26.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a digit after the "--" variable name prefix.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--0)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-27.html b/testing/web-platform/tests/css/css-variables/variable-supports-27.html new file mode 100644 index 0000000000..be67b4d06e --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-27.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--\30)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-28.html b/testing/web-platform/tests/css/css-variables/variable-supports-28.html new file mode 100644 index 0000000000..2ccd2b3573 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-28.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--\d800)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-29.html b/testing/web-platform/tests/css/css-variables/variable-supports-29.html new file mode 100644 index 0000000000..193cb55c73 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-29.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--\ffffff)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-30.html b/testing/web-platform/tests/css/css-variables/variable-supports-30.html new file mode 100644 index 0000000000..937b7613e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-30.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: 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.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a)) and (not (color: var(1px))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-31.html b/testing/web-platform/tests/css/css-variables/variable-supports-31.html new file mode 100644 index 0000000000..d6dec7b843 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-31.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with white space surrounding the fallback comma.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (color: var(--a , )) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-32.html b/testing/web-platform/tests/css/css-variables/variable-supports-32.html new file mode 100644 index 0000000000..1cc391d14e --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-32.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing non-custom shorthand property declaration in an @supports rule whose value contains a variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (background: var(--a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-33.html b/testing/web-platform/tests/css/css-variables/variable-supports-33.html new file mode 100644 index 0000000000..f26eec2356 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-33.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a:var(--b)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-34.html b/testing/web-platform/tests/css/css-variables/variable-supports-34.html new file mode 100644 index 0000000000..aac50bf8be --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-34.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains white space and a variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-35.html b/testing/web-platform/tests/css/css-variables/variable-supports-35.html new file mode 100644 index 0000000000..5966803871 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-35.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference surrounded by white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b) ) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-36.html b/testing/web-platform/tests/css/css-variables/variable-supports-36.html new file mode 100644 index 0000000000..14d5bc9e88 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-36.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference surrounded by white space with the variable name also surrounded by white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var( --b ) ) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-37.html b/testing/web-platform/tests/css/css-variables/variable-supports-37.html new file mode 100644 index 0000000000..6cfb626e09 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-37.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (--a: var(--b,)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-38.html b/testing/web-platform/tests/css/css-variables/variable-supports-38.html new file mode 100644 index 0000000000..97e019ea83 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-38.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference with fallback consisting only of white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b, )) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-39.html b/testing/web-platform/tests/css/css-variables/variable-supports-39.html new file mode 100644 index 0000000000..ba02455d30 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-39.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (--a: var(--b,/**/)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-40.html b/testing/web-platform/tests/css/css-variables/variable-supports-40.html new file mode 100644 index 0000000000..91fd83c078 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-40.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference with fallback consisting of a comment and an identifier.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b,/**/a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-41.html b/testing/web-platform/tests/css/css-variables/variable-supports-41.html new file mode 100644 index 0000000000..aff08cd2bf --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-41.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with fallback containing a top level '!' token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (not (--a: var(--b,!))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-42.html b/testing/web-platform/tests/css/css-variables/variable-supports-42.html new file mode 100644 index 0000000000..ae90e57d7c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-42.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with fallback containing a top level "!important".</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (not (--a: var(--b,!important))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-43.html b/testing/web-platform/tests/css/css-variables/variable-supports-43.html new file mode 100644 index 0000000000..b5f176d064 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-43.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a dimension followed by a variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: 1px var(--b)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-44.html b/testing/web-platform/tests/css/css-variables/variable-supports-44.html new file mode 100644 index 0000000000..4c18960f30 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-44.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference followed bya dimension.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b) 1px) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-45.html b/testing/web-platform/tests/css/css-variables/variable-supports-45.html new file mode 100644 index 0000000000..24b1eecf82 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-45.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a selection of tokens and a non-top level variable reference.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: something 3px url(whereever) calc(var(--b) + 1px)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-46.html b/testing/web-platform/tests/css/css-variables/variable-supports-46.html new file mode 100644 index 0000000000..c9d3f5b2ad --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-46.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and an "!important" priority.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b) !important) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-47.html b/testing/web-platform/tests/css/css-variables/variable-supports-47.html new file mode 100644 index 0000000000..946963fe4e --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-47.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains two adjacent variable references with no intervening white space.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b)var(--b)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-48.html b/testing/web-platform/tests/css/css-variables/variable-supports-48.html new file mode 100644 index 0000000000..7ab0c84556 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-48.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference with a number of levels of variable reference fallbacks.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b, var(--c, var(--d, black)))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-49.html b/testing/web-platform/tests/css/css-variables/variable-supports-49.html new file mode 100644 index 0000000000..aa500b9082 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-49.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains two "!important" priorities.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (not (--a: var(--b) !important !important)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-50.html b/testing/web-platform/tests/css/css-variables/variable-supports-50.html new file mode 100644 index 0000000000..c2185c9571 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-50.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and a CDO token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b) <!--) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-51.html b/testing/web-platform/tests/css/css-variables/variable-supports-51.html new file mode 100644 index 0000000000..0aa6d4397f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-51.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and a CDC token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: --> var(--b)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-52.html b/testing/web-platform/tests/css/css-variables/variable-supports-52.html new file mode 100644 index 0000000000..9cc7d21489 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-52.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and balanced braces and square brackets.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: { [ var(--b) ] }) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-53.html b/testing/web-platform/tests/css/css-variables/variable-supports-53.html new file mode 100644 index 0000000000..a40c2ffa63 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-53.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with a top level ';' token in its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (not (--a: var(--b,;))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-54.html b/testing/web-platform/tests/css/css-variables/variable-supports-54.html new file mode 100644 index 0000000000..b6009e1f76 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-54.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and a non-top level ';' token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: [;] var(--b)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-55.html b/testing/web-platform/tests/css/css-variables/variable-supports-55.html new file mode 100644 index 0000000000..f4b92a2f67 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-55.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference and a top level ';' token in its fallback.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (not (--a: var(--b);)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-56.html b/testing/web-platform/tests/css/css-variables/variable-supports-56.html new file mode 100644 index 0000000000..07b188f76f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-56.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains only a white space token.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: ) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-57.html b/testing/web-platform/tests/css/css-variables/variable-supports-57.html new file mode 100644 index 0000000000..88b448a6b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-57.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains no tokens.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (--a:) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-58.html b/testing/web-platform/tests/css/css-variables/variable-supports-58.html new file mode 100644 index 0000000000..97a79a6f47 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-58.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a property declaration in an @supports rule with property name "--".</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: green; } +@supports (--: a) { + p { color: red; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-59.html b/testing/web-platform/tests/css/css-variables/variable-supports-59.html new file mode 100644 index 0000000000..16669e66c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-59.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference to itself.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a:var(--a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-60.html b/testing/web-platform/tests/css/css-variables/variable-supports-60.html new file mode 100644 index 0000000000..438d23f84c --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-60.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is a digit.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--0: a) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-61.html b/testing/web-platform/tests/css/css-variables/variable-supports-61.html new file mode 100644 index 0000000000..62f9683d4a --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-61.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is a digit which is specified with an escape.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--\61: a) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-62.html b/testing/web-platform/tests/css/css-variables/variable-supports-62.html new file mode 100644 index 0000000000..39c55b2169 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-62.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is U+FFFD which is specified with an escaped lone surrogate.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--\d800: a) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-63.html b/testing/web-platform/tests/css/css-variables/variable-supports-63.html new file mode 100644 index 0000000000..74235832c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-63.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is U+FFFD which is specified with an out-of-range Unicode character escape.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--\ffffff: a) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-64.html b/testing/web-platform/tests/css/css-variables/variable-supports-64.html new file mode 100644 index 0000000000..2b3eadf24f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-64.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value is a variable reference with a dimension token as the variable name.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (not (--a: var(1px))) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-65.html b/testing/web-platform/tests/css/css-variables/variable-supports-65.html new file mode 100644 index 0000000000..4bc9c4e4d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-65.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value is a variable reference with white space surrounding the fallback comma.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: var(--b , )) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-66.html b/testing/web-platform/tests/css/css-variables/variable-supports-66.html new file mode 100644 index 0000000000..a38b044ad1 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-66.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a failing custom property declaration in an @supports rule where the property name begins with "VAR-".</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: a) and (not (VAR-a: a)) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-supports-67.html b/testing/web-platform/tests/css/css-variables/variable-supports-67.html new file mode 100644 index 0000000000..9425e2179f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-supports-67.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<title>CSS Test: Test a declaration for a custom property has an invalid value does not cause the @supports rule to fail to parse.</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> +<link rel="match" href="support/color-green-ref.html"> +<style> +body { color: red; } +@supports (--a: !) or (--a: a) { + p { color: green; } +} +</style> +<p>This text must be green.</p> diff --git a/testing/web-platform/tests/css/css-variables/variable-transitions-transition-property-all-before-value.html b/testing/web-platform/tests/css/css-variables/variable-transitions-transition-property-all-before-value.html new file mode 100644 index 0000000000..5e54cd930f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-transitions-transition-property-all-before-value.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> diff --git a/testing/web-platform/tests/css/css-variables/variable-transitions-value-before-transition-property-all.html b/testing/web-platform/tests/css/css-variables/variable-transitions-value-before-transition-property-all.html new file mode 100644 index 0000000000..49642e0fa7 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-transitions-value-before-transition-property-all.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> diff --git a/testing/web-platform/tests/css/css-variables/variables-animation-math-functions-tentative.html b/testing/web-platform/tests/css/css-variables/variables-animation-math-functions-tentative.html new file mode 100644 index 0000000000..7c33d6cfa3 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variables-animation-math-functions-tentative.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>angle custom properties interpolation with progress-*() functions</title> + <link rel="author" title="Daniil Sakhapov" href="mailto:sakhapov@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-values-5/#progress"> + <meta name="assert" content="angle custom properties support interpolation with progress-*() functions."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <style> + :root { + font-size: 10px; + } + @property --my-angle { + syntax: "<angle>"; + initial-value: 0deg; + inherits: false; + } + </style> + <body> + <script> + test_interpolation({ + property: '--my-angle', + from: '100deg', + to: 'calc(sign(20rem - 20px) * 180deg)', + }, [ + {at: -1, expect: '20deg'}, + {at: 0, expect: '100deg'}, + {at: 0.125, expect: '110deg'}, + {at: 0.875, expect: '170deg'}, + {at: 1, expect: '180deg'}, + {at: 2, expect: '260deg'} + ]); + + test_interpolation({ + property: '--my-angle', + from: 'calc(sign(20rem - 20px) * 100deg)', + to: 'calc(progress(10rem from 20px to 100px) * 180deg)', + }, [ + {at: -1, expect: '20deg'}, + {at: 0, expect: '100deg'}, + {at: 0.125, expect: '110deg'}, + {at: 0.875, expect: '170deg'}, + {at: 1, expect: '180deg'}, + {at: 2, expect: '260deg'} + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-variables/variables-substitute-guaranteed-invalid.html b/testing/web-platform/tests/css/css-variables/variables-substitute-guaranteed-invalid.html new file mode 100644 index 0000000000..4abfe28d1f --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variables-substitute-guaranteed-invalid.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title>Testing substitution of guaranteed-invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-variables/#guaranteed-invalid"> +<link rel="help" href="https://drafts.csswg.org/css-variables/#cycles"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #target1 { + /* Cycle */ + --var1: var(--var2); + --var2: var(--var1); + + /* Reference to cycle */ + --var3: var(--var1); + + /* Reference to non-existent property */ + --var4: var(--noexist); + } + + #target1parent { + --var3: inherited; + --var4: inherited; + } +</style> +<div id="target1parent"> + <div id="target1"></div> +</div> +<script> + test( function () { + let cs = getComputedStyle(target1); + assert_equals(cs.getPropertyValue('--var1'), ''); + assert_equals(cs.getPropertyValue('--var2'), ''); + }, 'Custom properties in a cycle become guaranteed-invalid'); + + test( function () { + let cs = getComputedStyle(target1); + assert_equals(cs.getPropertyValue('--var3'), ''); + }, 'A custom property referencing a cycle becomes guaranteed-invalid'); + + test( function () { + let cs = getComputedStyle(target1); + assert_equals(cs.getPropertyValue('--var4'), ''); + }, 'A custom property referencing a non-existent variable becomes guaranteed-invalid'); +</script> diff --git a/testing/web-platform/tests/css/css-variables/vars-background-shorthand-001.html b/testing/web-platform/tests/css/css-variables/vars-background-shorthand-001.html new file mode 100644 index 0000000000..6f41923da2 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/vars-background-shorthand-001.html @@ -0,0 +1,44 @@ +<!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"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-20000"> +<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> + + + diff --git a/testing/web-platform/tests/css/css-variables/vars-border-shorthand-serialize.html b/testing/web-platform/tests/css/css-variables/vars-border-shorthand-serialize.html new file mode 100644 index 0000000000..07b78e5850 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/vars-border-shorthand-serialize.html @@ -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> + diff --git a/testing/web-platform/tests/css/css-variables/vars-font-shorthand-001.html b/testing/web-platform/tests/css/css-variables/vars-font-shorthand-001.html new file mode 100644 index 0000000000..69f091bcca --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/vars-font-shorthand-001.html @@ -0,0 +1,64 @@ +<!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"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<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> + + diff --git a/testing/web-platform/tests/css/css-variables/whitespace-in-fallback-crash.html b/testing/web-platform/tests/css/css-variables/whitespace-in-fallback-crash.html new file mode 100644 index 0000000000..7e150e8453 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/whitespace-in-fallback-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>Fallback to a whitespace-only string should not crash</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<link rel="help" href="https://crbug.com/1476811"> +<style> + #t1 {--a:var(--b,var(--c,) );} +</style> +<div id="t1">Test passes if it does not crash.</div> diff --git a/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-001-ref.html b/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-001-ref.html new file mode 100644 index 0000000000..1b4e3b3b6d --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-001-ref.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + #outer { + border: 10px solid transparent; + } + + #inner { + border: 10px solid; + } +</style> +<div id="outer"><div id="inner"></div></div> diff --git a/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-001.html b/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-001.html new file mode 100644 index 0000000000..947c253837 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-001.html @@ -0,0 +1,21 @@ +<!doctype html> +<title>CSS Test: Wide keyword can be used as a fallback variable value</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1544886"> +<link rel="match" href="wide-keyword-fallback-001-ref.html"> +<style> + /* Should see a 10px border of the initial color */ + #outer { + color: transparent; + border: 10px solid; + } + + #inner { + color: var(--unknown, initial); + border-width: 10px; + border-style: var(--unknown, inherit); + } +</style> +<div id="outer"><div id="inner"></div></div> diff --git a/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-002-ref.html b/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-002-ref.html new file mode 100644 index 0000000000..404a3da9d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-002-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<div style="color: green"> + Should be green +</div> diff --git a/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-002.html b/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-002.html new file mode 100644 index 0000000000..315468a75e --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/wide-keyword-fallback-002.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS Test: Wide keyword can be used as a fallback variable value for custom properties themselves</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1544886"> +<link rel="match" href="wide-keyword-fallback-002-ref.html"> +<style> + .outer1 { + --color: green; + } + .outer2 { + --color: var(--foo, unset); + } + .inner { + color: var(--color); + } +</style> +<div class="outer1"> + <div class="outer2"> + <div class="inner"> + Should be green + </div> + </div> +</div> |