diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-env')
9 files changed, 239 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-env/META.yml b/testing/web-platform/tests/css/css-env/META.yml new file mode 100644 index 0000000000..9d264a6228 --- /dev/null +++ b/testing/web-platform/tests/css/css-env/META.yml @@ -0,0 +1,4 @@ +spec: https://drafts.csswg.org/css-env/ +suggested_reviewers: + - rebeccahughes + - lilles diff --git a/testing/web-platform/tests/css/css-env/at-supports.tentative.html b/testing/web-platform/tests/css/css-env/at-supports.tentative.html new file mode 100644 index 0000000000..c893f2dc54 --- /dev/null +++ b/testing/web-platform/tests/css/css-env/at-supports.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-env-1/"> + <title>Test that CSS env vars work with @support</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + @supports (background-color: env(test)) { + body { background-color: rgb(0, 128, 0); } + } + </style> + </head> + <body> + <script> + test(() => { + const style = window.getComputedStyle(document.body); + assert_equals(style.getPropertyValue("background-color"), "rgb(0, 128, 0)"); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-env/env-in-custom-properties.tentative.html b/testing/web-platform/tests/css/css-env/env-in-custom-properties.tentative.html new file mode 100644 index 0000000000..24afe2963b --- /dev/null +++ b/testing/web-platform/tests/css/css-env/env-in-custom-properties.tentative.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-env-1/"> + <title>Test env() will work in custom properties</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + #parent { + --var1: inherited; + } + #child { + --my-width: env(test, 100px); + width: var(--my-width); + --var1: env(nonexistent); + } + </style> + </head> + <body> + <div id="parent"> + <div id="child"></div> + </div> + <script> + test(() => { + const style = window.getComputedStyle(child); + assert_equals(style.getPropertyValue("width"), "100px"); + }, 'env() is substituted into a custom property'); + + test(() => { + const style = window.getComputedStyle(child); + assert_equals(style.getPropertyValue("--var1"), ""); + }, 'Substitution of unrecognized env() causes guaranteed-invalid'); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-env/fallback-nested-var.tentative.html b/testing/web-platform/tests/css/css-env/fallback-nested-var.tentative.html new file mode 100644 index 0000000000..6bde1ca969 --- /dev/null +++ b/testing/web-platform/tests/css/css-env/fallback-nested-var.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-env-1/"> + <title>Test that nested var() fallback values work with CSS env vars</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + body { + --main-bg-color: rgb(0, 128, 0); + background-color: env(test, var(--main-bg-color)); + } + </style> + </head> + <body> + <script> + test(() => { + const style = window.getComputedStyle(document.body); + assert_equals(style.getPropertyValue("background-color"), "rgb(0, 128, 0)"); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-env/indexed-env.tentative.html b/testing/web-platform/tests/css/css-env/indexed-env.tentative.html new file mode 100644 index 0000000000..6757cd35c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-env/indexed-env.tentative.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-env-1/"> + <title>Test CSS env vars index parsing support</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <script> + let invalidValues = [ + "env(test1 test2, green)", + "env(test1 10 20 test2, green)", + "env(test 0.1, green)", + "env(test -1, green)", + ]; + invalidValues.forEach(val => { + test(() => { + document.body.style.top = val; + assert_equals(document.body.style.top, ""); + }, `CSS Environment variable value "${val}" must not successfully parse`); + }); + + let validValues = [ + "env(test 0, green)", + "env(test 0,)", + "env(test 0)", + "env(test 0 1 2 3 4, green)", + ]; + validValues.forEach(val => { + test(() => { + document.body.style.top = val; + assert_equals(document.body.style.top, val); + }, `CSS Environment variable value "${val}" must successfully parse and roundtrip`); + }); + + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-env/seralization-round-tripping.tentative.html b/testing/web-platform/tests/css/css-env/seralization-round-tripping.tentative.html new file mode 100644 index 0000000000..26a9afee01 --- /dev/null +++ b/testing/web-platform/tests/css/css-env/seralization-round-tripping.tentative.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-env-1/"> + <title>Test style seralization round tripping with CSS env vars</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <script> + test(() => { + document.body.style.top = "env(test)"; + assert_equals(document.body.style.getPropertyValue("top"), "env(test)"); + document.body.style.setProperty("top", "env()"); + assert_equals(document.body.style.getPropertyValue("top"), "env(test)"); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-env/supports-script.tentative.html b/testing/web-platform/tests/css/css-env/supports-script.tentative.html new file mode 100644 index 0000000000..5ea463571d --- /dev/null +++ b/testing/web-platform/tests/css/css-env/supports-script.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-env-1/"> + <title>Test that CSS env vars work with CSS.supports</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <script> + test(() => { + assert_true(CSS.supports("background: env(test)")); + assert_true(CSS.supports("background", "env(test)")); + assert_true(CSS.supports("background", "env(test, 10px)")); + assert_true(CSS.supports("background", "foobar(env(test))")); + assert_false(CSS.supports("background", "env()")); + assert_true(CSS.supports("background", "env(test, )")); + assert_true(CSS.supports("background", "env(test,)")); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-env/syntax.tentative.html b/testing/web-platform/tests/css/css-env/syntax.tentative.html new file mode 100644 index 0000000000..8b26578561 --- /dev/null +++ b/testing/web-platform/tests/css/css-env/syntax.tentative.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-env-1/"> + <title>Test env() syntax</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + div { background-color: rgb(0, 128, 0); } + </style> + </head> + <body> + <script> + // This value is expected if the syntax is valid. + const envWorkingValue = "rgba(0, 0, 0, 0)"; + + // This value is expected if the syntax is invalid. + const pageDefaultValue = "rgb(0, 128, 0)"; + + // This value is used to test fallback values. + const blueValue = "rgb(0, 0, 255)"; + + const testCases = [ + { style: "", expectedPropertyValue: pageDefaultValue }, + { style: "background-color: env(test)", expectedPropertyValue: envWorkingValue }, + { style: "background-color: ENV(test)", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env(test) !important", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env(test, 10px)", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env(test, blue)", expectedPropertyValue: blueValue }, + { style: "background-color: env(test, env(another))", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env(test, env(another, blue))", expectedPropertyValue: blueValue }, + { style: "background-color: env(-test)", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env(--test)", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env(10px)", expectedPropertyValue: pageDefaultValue }, + { style: "background-color: env(env(test))", expectedPropertyValue: pageDefaultValue }, + { style: "background-color: env( test)", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env(test )", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env( test )", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env(test /**/, blue)", expectedPropertyValue: blueValue }, + { style: "background-color: env(test, {})", expectedPropertyValue: envWorkingValue }, + { style: "background-color: env(test, {)", expectedPropertyValue: pageDefaultValue }, + ]; + + testCases.forEach((testcase) => { + test(() => { + const elem = document.createElement("div"); + const style = window.getComputedStyle(elem); + + document.body.appendChild(elem); + elem.style.cssText = testcase.style; + + assert_equals(style.getPropertyValue("background-color"), testcase.expectedPropertyValue); + }, testcase.style + " " + testcase.expectedPropertyValue); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-env/unknown-env-names-override-previous.tentative.html b/testing/web-platform/tests/css/css-env/unknown-env-names-override-previous.tentative.html new file mode 100644 index 0000000000..388aa22522 --- /dev/null +++ b/testing/web-platform/tests/css/css-env/unknown-env-names-override-previous.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-env-1/"> + <title>Test unknown env() names will override previous values</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body style="background-color: green; background-color: env(unknown);"> + <script> + test(() => { + const style = window.getComputedStyle(document.body); + assert_equals(style.getPropertyValue("background-color"), "rgba(0, 0, 0, 0)"); + }); + </script> + </body> +</html> |