diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-backgrounds/parsing | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-backgrounds/parsing')
74 files changed, 2421 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-computed.html new file mode 100644 index 0000000000..702d5fc8ac --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-computed.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundAttachment</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-attachment"> +<meta name="assert" content="background-attachment computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-attachment", "fixed"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-attachment", "scroll, fixed, local", "scroll"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-invalid.html new file mode 100644 index 0000000000..30757f3a4d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-attachment with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-attachment"> +<meta name="assert" content="background-attachment supports only the grammar '<attachment>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-attachment", "auto"); +test_invalid_value("background-attachment", "local, none"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-valid.html new file mode 100644 index 0000000000..14d72c606b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-attachment with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-attachment"> +<meta name="assert" content="background-attachment supports the full grammar '<attachment>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-attachment", "fixed"); +test_valid_value("background-attachment", "scroll, fixed, local, fixed, scroll"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-computed.html new file mode 100644 index 0000000000..91ca19f5b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundClip</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-clip"> +<meta name="assert" content="background-clip computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-clip", "border-box"); +test_computed_value("background-clip", "padding-box"); +test_computed_value("background-clip", "content-box"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-clip", "border-box, padding-box, content-box", "border-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-invalid.html new file mode 100644 index 0000000000..96831e06fc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-clip with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-clip"> +<meta name="assert" content="background-clip supports only the grammar '<box>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-clip", "fill-box"); +test_invalid_value("background-clip", "margin-box"); +test_invalid_value("background-clip", "stroke-box"); +test_invalid_value("background-clip", "view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-valid.html new file mode 100644 index 0000000000..e262a788bd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-clip with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-clip"> +<meta name="assert" content="background-clip supports the full grammar '<box>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-clip", "border-box"); +test_valid_value("background-clip", "padding-box"); +test_valid_value("background-clip", "content-box"); + +test_valid_value("background-clip", "border-box, padding-box, content-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-computed.html new file mode 100644 index 0000000000..561463803b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundColor</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-color"> +<meta name="assert" content="background-color computed value is a computed color."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: lime; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-color", "currentcolor", "rgb(0, 255, 0)"); + +test_computed_value("background-color", "red", "rgb(255, 0, 0)"); +test_computed_value("background-color", "#00FF00", "rgb(0, 255, 0)"); +test_computed_value("background-color", "rgb(0, 0, 255)"); +test_computed_value("background-color", "rgb(100%, 100%, 0%)", "rgb(255, 255, 0)"); +test_computed_value("background-color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)"); +test_computed_value("background-color", "transparent", "rgba(0, 0, 0, 0)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-invalid.html new file mode 100644 index 0000000000..bf315fdb4e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-color with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-color"> +<meta name="assert" content="background-color supports only the grammar '<color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-color", "none"); +test_invalid_value("background-color", "black white"); +test_invalid_value("background-color", "black, white"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-valid.html new file mode 100644 index 0000000000..3859b932c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-color-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-color with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-color"> +<meta name="assert" content="background-color supports the full grammar '<color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-color", "currentcolor", "currentcolor"); +test_valid_value("background-color", "currentColor", "currentcolor"); + +test_valid_value("background-color", "red"); +test_valid_value("background-color", "#00FF00", "rgb(0, 255, 0)"); +test_valid_value("background-color", "rgb(0, 0, 255)"); +test_valid_value("background-color", "rgb(100%, 100%, 0%)", "rgb(255, 255, 0)"); +test_valid_value("background-color", "hsl(120, 100%, 50%)", ["rgb(0, 255, 0)", "hsl(120, 100%, 50%)"]); // Edge serializes as hsl +test_valid_value("background-color", "teal"); + +test_valid_value("background-color", "transparent"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-computed.html new file mode 100644 index 0000000000..8a07df4903 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-computed.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().background with multiple layers</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> +<meta name="assert" content="The number of layers is determined by the number of comma-separated values in the background-image property. ."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + background-image: none, none, none; + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-attachment", "local", "local, local, local"); +test_computed_value("background-attachment", "scroll, fixed", "scroll, fixed, scroll"); +test_computed_value("background-attachment", "local, fixed, scroll"); +test_computed_value("background-attachment", "local, fixed, scroll, fixed", "local, fixed, scroll"); + +test_computed_value("background-clip", "border-box", "border-box, border-box, border-box"); +test_computed_value("background-clip", "content-box, border-box", "content-box, border-box, content-box"); +test_computed_value("background-clip", "border-box, padding-box, content-box"); +test_computed_value("background-clip", "content-box, border-box, padding-box, content-box", "content-box, border-box, padding-box"); + +// background-color always computes as a single color. +test_computed_value("background-color", "rgb(255, 0, 0)"); + +test_computed_value("background-origin", "border-box", "border-box, border-box, border-box"); +test_computed_value("background-origin", "content-box, border-box", "content-box, border-box, content-box"); +test_computed_value("background-origin", "border-box, padding-box, content-box"); +test_computed_value("background-origin", "content-box, border-box, padding-box, content-box", "content-box, border-box, padding-box"); + +test_computed_value("background-position", "50% 6px", "50% 6px, 50% 6px, 50% 6px"); +test_computed_value("background-position", "12px 13px, 50% 6px", "12px 13px, 50% 6px, 12px 13px"); +test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px"); +test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px, -7px 8px", "12px 13px, 50% 6px, 30px -10px"); + +test_computed_value("background-position-x", "0.5em", "20px, 20px, 20px"); +test_computed_value("background-position-x", "-20%, 10px", "-20%, 10px, -20%"); + +test_computed_value("background-position-x", "center, left, right", "50%, 0%, 100%"); +test_computed_value("background-position-x", "calc(10px - 0.5em), -20%, right, 15%", "-10px, -20%, 100%"); + +test_computed_value("background-position-y", "0.5em", "20px, 20px, 20px"); +test_computed_value("background-position-y", "-20%, 10px", "-20%, 10px, -20%"); +test_computed_value("background-position-y", "center, top, bottom", "50%, 0%, 100%"); +test_computed_value("background-position-y", "calc(10px - 0.5em), -20%, bottom, 15%", "-10px, -20%, 100%"); + +test_computed_value("background-repeat", "round", "round, round, round"); +test_computed_value("background-repeat", "repeat-x, repeat", "repeat-x, repeat, repeat-x"); +test_computed_value("background-repeat", "repeat space, round no-repeat, repeat-x"); +test_computed_value("background-repeat", "repeat-y, round no-repeat, repeat-x, repeat", "repeat-y, round no-repeat, repeat-x"); + +test_computed_value("background-size", "contain", "contain, contain, contain"); +test_computed_value("background-size", "auto 1px, 2% 3%", "auto 1px, 2% 3%, auto 1px"); +test_computed_value("background-size", "auto 1px, 2% 3%, contain"); +test_computed_value("background-size", "auto 1px, 2% 3%, contain, 7px 8px", "auto 1px, 2% 3%, contain"); + +// Open issue: Define serialization for background shorthand +// https://github.com/w3c/csswg-drafts/issues/418 +// test_computed_value("background", "rgb(1, 2, 3) none 4px 5px / 6px 7px repeat space scroll border-box padding-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-computed.sub.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-computed.sub.html new file mode 100644 index 0000000000..cf3c065d49 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-computed.sub.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundImage</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image"> +<meta name="assert" content="background-image computed value is as specified."> +<meta name="assert" content="Colors and lengths are computed, with radii clamped."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<!-- target is used by test_computed_value --> +<div id="target"></div> +<script> +test_computed_value("background-image", "none"); + +test_computed_value("background-image", 'url("http://{{host}}/")'); +test_computed_value("background-image", 'none, url("http://{{host}}/")'); + +test_computed_value('background-image', 'linear-gradient(to left bottom, red, blue)', 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255))'); + +test_computed_value('background-image', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(at center, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(at 50%, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-side, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-side at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-corner, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-corner at center, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-corner at 50%, red, blue)', 'radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(farthest-corner at 10px 10px, red, blue)', 'radial-gradient(at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); + +test_computed_value('background-image', 'radial-gradient(10px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(circle calc(-0.5em + 10px) at calc(-1em + 10px) calc(-2em + 10px), red, blue)', 'radial-gradient(0px at -30px -70px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(ellipse calc(-0.5em + 10px) calc(0.5em + 10px) at 20px 30px, red, blue)', 'radial-gradient(0px 30px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'radial-gradient(ellipse calc(0.5em + 10px) calc(-0.5em + 10px) at 20px 30px, red, blue)', 'radial-gradient(30px 0px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))'); + +test_computed_value('background-image', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(at center, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(at 50%, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 0deg, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 0deg at center, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 0deg at 50%, red, blue)', 'conic-gradient(rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 0deg at 10px 10px, red, blue)', 'conic-gradient(at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 45deg at center, red, blue)', 'conic-gradient(from 45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 45deg at 50%, red, blue)', 'conic-gradient(from 45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from 45deg at 10px 10px, red, blue)', 'conic-gradient(from 45deg at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from -45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from -45deg at center, red, blue)', 'conic-gradient(from -45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from -45deg at 50%, red, blue)', 'conic-gradient(from -45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('background-image', 'conic-gradient(from -45deg at 10px 10px, red, blue)', 'conic-gradient(from -45deg at 10px 10px, rgb(255, 0, 0), rgb(0, 0, 255))'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-invalid.html new file mode 100644 index 0000000000..8a48d5efe8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-invalid.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-image with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image"> +<link rel="help" href="https://drafts.csswg.org/css-images/#radial-gradients"> +<meta name="assert" content="background-image supports only the grammar '<bg-image>#'."> +<meta name="assert" content="Negative radial-gradient radii are invalid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-image", "none, auto"); + +// Negative radii are invalid. +test_invalid_value("background-image", "radial-gradient(circle -10px at center, red, blue)"); +test_invalid_value("background-image", "repeating-radial-gradient(-10px at center, red, blue)"); +test_invalid_value("background-image", "radial-gradient(ellipse -20px 30px at center, red, blue)"); +test_invalid_value("background-image", "repeating-radial-gradient(-20% 30% at center, red, blue)"); +test_invalid_value("background-image", "radial-gradient(20px -30px at center, red, blue)"); +test_invalid_value("background-image", "repeating-radial-gradient(20px -30px ellipse at center, red, blue)"); + +test_invalid_value("background-image", "cross-fade(auto blue, 50% red)"); +test_invalid_value("background-image", "cross-fade(1px red, green)"); +test_invalid_value("background-image", "cross-fade(calc(1% + 1px) red, green)"); +test_invalid_value("background-image", "cross-fade(-1% red, green)"); +test_invalid_value("background-image", "cross-fade(101% red, green)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html new file mode 100644 index 0000000000..da08a63885 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-image with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image"> +<meta name="assert" content="background-image supports the full grammar '<bg-image>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-image", "none"); + +// Safari removes quotes. +test_valid_value("background-image", 'url("http://www.example.com/")', ['url("http://www.example.com/")', 'url(http://www.example.com/)']); +test_valid_value("background-image", 'none, url("http://www.example.com/")', ['none, url("http://www.example.com/")', 'none, url(http://www.example.com/)']); + +test_valid_value( + "background-image", + "cross-fade(50% url(http://www.example.com), 50% url(http://www.example.com))", [ + "cross-fade(50% url(http://www.example.com), 50% url(http://www.example.com))", + 'cross-fade(50% url("http://www.example.com"), 50% url("http://www.example.com"))' + ]); +test_valid_value( + "background-image", + "cross-fade(33% red, 33% white, blue)"); +test_valid_value( + "background-image", + "cross-fade(blue, linear-gradient(90deg, rgb(2, 0, 36) 0%, rgb(0, 212, 255) 100%))"); +test_valid_value("background-image", "cross-fade( 1% red, green)", "cross-fade(1% red, green)"); +test_valid_value("background-image", "cross-fade(1% red , green)", "cross-fade(1% red, green)"); +test_valid_value("background-image", "cross-fade(1% red, green )", "cross-fade(1% red, green)"); +test_valid_value("background-image", "cross-fade(1% red, cross-fade(2% red, green))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-invalid.html new file mode 100644 index 0000000000..76ff18f35d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> +<meta name="assert" content="background supports only the grammar '<bg-layer># , <final-bg-layer>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <bg-layer> does not allow a <color>. +test_invalid_value("background", "red, green"); + +// A `/ <bg-size>` is only allowed directly after a <bg-position>. +test_invalid_value("background", "black 0 url(https://example.invalid/) / cover"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-computed.html new file mode 100644 index 0000000000..41887f852d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundOrigin</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-origin"> +<meta name="assert" content="background-origin computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-origin", "border-box"); +test_computed_value("background-origin", "padding-box"); +test_computed_value("background-origin", "content-box"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-origin", "border-box, padding-box, content-box", "border-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-invalid.html new file mode 100644 index 0000000000..5da00dabe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-origin with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-origin"> +<meta name="assert" content="background-origin supports only the grammar '<box>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-origin", "fill-box"); +test_invalid_value("background-origin", "margin-box"); +test_invalid_value("background-origin", "stroke-box"); +test_invalid_value("background-origin", "view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-valid.html new file mode 100644 index 0000000000..7e3b0fffca --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-origin with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-origin"> +<meta name="assert" content="background-origin supports the full grammar '<box>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-origin", "border-box"); +test_valid_value("background-origin", "padding-box"); +test_valid_value("background-origin", "content-box"); + +test_valid_value("background-origin", "border-box, padding-box, content-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-computed.html new file mode 100644 index 0000000000..2a3f6fae1e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-computed.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundPosition</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-position"> +<meta name="assert" content="background-position computed value is a list, each item a pair of offsets (horizontal and vertical) from the top left origin each given as a computed <length-percentage> value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-position", "1px", "1px 50%"); +test_computed_value("background-position", "1px center", "1px 50%"); +test_computed_value("background-position", "-2% -3%"); +test_computed_value("background-position", "5% top", "5% 0%"); +test_computed_value("background-position", "center", "50% 50%"); +test_computed_value("background-position", "center center", "50% 50%"); +test_computed_value("background-position", "center 6px", "50% 6px"); +test_computed_value("background-position", "center left", "0% 50%"); +test_computed_value("background-position", "center right 7%", "93% 50%"); +test_computed_value("background-position", "center bottom", "50% 100%"); +test_computed_value("background-position", "center top 8px", "50% 8px"); +test_computed_value("background-position", "left", "0% 50%"); +test_computed_value("background-position", "right 9%", "100% 9%"); +test_computed_value("background-position", "left 10px center", "10px 50%"); +test_computed_value("background-position", "right 11% bottom", "89% 100%"); +test_computed_value("background-position", "left 12px top 13px", "12px 13px"); +test_computed_value("background-position", "right center", "100% 50%"); +test_computed_value("background-position", "left bottom", "0% 100%"); +test_computed_value("background-position", "right top 14%", "100% 14%"); +test_computed_value("background-position", "bottom", "50% 100%"); +test_computed_value("background-position", "top 15px center", "50% 15px"); +test_computed_value("background-position", "bottom 16% left", "0% 84%"); +test_computed_value("background-position", "top 17px right -18px", "calc(100% + 18px) 17px"); +test_computed_value("background-position", "bottom center", "50% 100%"); +test_computed_value("background-position", "top left", "0% 0%"); +test_computed_value("background-position", "bottom right 19%", "81% 100%"); +test_computed_value("background-position", "calc(10px + 0.5em) calc(10px - 0.5em)", "30px -10px"); +test_computed_value("background-position", "calc(10px - 0.5em) calc(10px + 0.5em)", "-10px 30px"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-position", "12px 13px, 50% 6px, 30px -10px", "12px 13px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-invalid.html new file mode 100644 index 0000000000..966db4c31a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-invalid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-position with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-position"> +<meta name="assert" content="background-position supports only the grammar '<bg-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-position", "left right"); +test_invalid_value("background-position", "top bottom"); +test_invalid_value("background-position", "1% center 2px"); +test_invalid_value("background-position", "right 7% 50%"); +test_invalid_value("background-position", "50% top 8px"); +test_invalid_value("background-position", "left 10px 50%"); +test_invalid_value("background-position", "right 11% 100%"); +test_invalid_value("background-position", "100% top 14%"); +test_invalid_value("background-position", "50% top 15px"); +test_invalid_value("background-position", "0% bottom 16%"); +test_invalid_value("background-position", "right 19% 100%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-valid.html new file mode 100644 index 0000000000..dac7b1012a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-valid.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-position with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-position"> +<meta name="assert" content="background-position supports the full grammar '<bg-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-position", "1px", ["1px", "1px center"]); +test_valid_value("background-position", "1px center", ["1px", "1px center"]); +test_valid_value("background-position", "-2% -3%"); +test_valid_value("background-position", "5% top"); +test_valid_value("background-position", "center", ["center", "center center"]); +test_valid_value("background-position", "center center", ["center", "center center"]); +test_valid_value("background-position", "center 6px"); +test_valid_value("background-position", "center left", ["left center", "left"]); +test_valid_value("background-position", "center right 7%", "right 7% center"); +test_valid_value("background-position", "center bottom", ["center bottom", "bottom"]); +test_valid_value("background-position", "center top 8px", ["center top 8px", "center 8px"]); +test_valid_value("background-position", "left", ["left center", "left"]); +test_valid_value("background-position", "right 9%"); +test_valid_value("background-position", "left 10px center", ["left 10px center", "10px"]); +test_valid_value("background-position", "right 11% bottom", ["right 11% bottom", "right 11% bottom 0%"]); // "right 11% bottom 0%" in Edge +test_valid_value("background-position", "left 12px top 13px", ["left 12px top 13px", "12px 13px"]); +test_valid_value("background-position", "right center", ["right center", "right"]); +test_valid_value("background-position", "left bottom"); +test_valid_value("background-position", "right top 14%", ["right top 14%", "right 14%"]); +test_valid_value("background-position", "bottom", ["center bottom", "bottom"]); +test_valid_value("background-position", "top 15px center", ["center top 15px", "center 15px"]); +test_valid_value("background-position", "bottom 16% left", ["left bottom 16%", "left 0% bottom 16%"]); // "left 0% bottom 16%" in Edge +test_valid_value("background-position", "top 17px right 18px", "right 18px top 17px"); +test_valid_value("background-position", "bottom center", ["center bottom", "bottom"]); +test_valid_value("background-position", "top left", "left top"); +test_valid_value("background-position", "bottom right 19%", ["right 19% bottom", "right 19% bottom 0%"]); // "right 19% bottom 0%" in Edge +test_valid_value("background-position", "20% 0%"); +test_valid_value("background-position", "0% 0%"); +test_valid_value("background-position", "0%", ["0%", "0% center"]); +test_valid_value("background-position", "0% center", ["0%", "0% center"]); +test_valid_value("background-position", "center 0%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-computed.html new file mode 100644 index 0000000000..6cb7fb2c17 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-computed.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: getComputedStyle().backgroundPositionX</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-position-x", "center", "50%"); +test_computed_value("background-position-x", "left", "0%"); +test_computed_value("background-position-x", "right", "100%"); +test_computed_value("background-position-x", "x-start"); +test_computed_value("background-position-x", "x-end"); +test_computed_value("background-position-x", "-20%"); +test_computed_value("background-position-x", "10px"); +test_computed_value("background-position-x", "0.5em", "20px"); +test_computed_value("background-position-x", "calc(10px - 0.5em)", "-10px"); +test_computed_value("background-position-x", "left -20%", "-20%"); +test_computed_value("background-position-x", "right -10px", "calc(100% + 10px)"); +test_computed_value("background-position-x", "-20%, 10px", "-20%"); +test_computed_value("background-position-x", "center, left, right", "50%"); +test_computed_value("background-position-x", "0.5em, x-start, x-end", "20px"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-position-x", "calc(10px - 0.5em), -20%, 10px", "-10px"); +test_computed_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px", "-10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-invalid.html new file mode 100644 index 0000000000..7cdfcf426c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-x with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x"> +<meta name="assert" content="background-position-x supports only the grammar '[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-position-x", "top"); +test_invalid_value("background-position-x", "bottom"); +test_invalid_value("background-position-x", "y-start"); +test_invalid_value("background-position-x", "y-end"); +test_invalid_value("background-position-x", "center 10px"); +test_invalid_value("background-position-x", "20% left"); +test_invalid_value("background-position-x", "right left"); +test_invalid_value("background-position-x", "x-start center"); +test_invalid_value("background-position-x", "left, center right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-valid.html new file mode 100644 index 0000000000..ca9c229db4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-valid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-x with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x"> +<meta name="assert" content="background-position-x supports the full grammar '[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-position-x", "center"); +test_valid_value("background-position-x", "left"); +test_valid_value("background-position-x", "right"); +test_valid_value("background-position-x", "x-start"); +test_valid_value("background-position-x", "x-end"); +test_valid_value("background-position-x", "-20%"); +test_valid_value("background-position-x", "10px"); +test_valid_value("background-position-x", "0.5em"); +test_valid_value("background-position-x", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("background-position-x", "left -20%"); +test_valid_value("background-position-x", "right 10px"); +test_valid_value("background-position-x", "-20%, 10px"); +test_valid_value("background-position-x", "center, left, right"); +test_valid_value("background-position-x", "0.5em, x-start, x-end"); +test_valid_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px", "calc(-0.5em + 10px), left -20%, right 10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-computed.html new file mode 100644 index 0000000000..a2d60bfeb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-computed.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: getComputedStyle().backgroundPositionY</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-position-y", "center", "50%"); +test_computed_value("background-position-y", "top", "0%"); +test_computed_value("background-position-y", "bottom", "100%"); +test_computed_value("background-position-y", "y-start"); +test_computed_value("background-position-y", "y-end"); +test_computed_value("background-position-y", "-20%"); +test_computed_value("background-position-y", "10px"); +test_computed_value("background-position-y", "0.5em", "20px"); +test_computed_value("background-position-y", "calc(10px - 0.5em)", "-10px"); +test_computed_value("background-position-y", "top -20%", "-20%"); +test_computed_value("background-position-y", "bottom -10px", "calc(100% + 10px)"); +test_computed_value("background-position-y", "-20%, 10px", "-20%"); +test_computed_value("background-position-y", "center, top, bottom", "50%"); +test_computed_value("background-position-y", "0.5em, y-start, y-end", "20px"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-position-y", "calc(10px - 0.5em), -20%, 10px", "-10px"); +test_computed_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px", "-10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-invalid.html new file mode 100644 index 0000000000..7885b142ee --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-y with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y"> +<meta name="assert" content="background-position-y supports only the grammar '[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-position-y", "left"); +test_invalid_value("background-position-y", "right"); +test_invalid_value("background-position-y", "x-start"); +test_invalid_value("background-position-y", "x-end"); +test_invalid_value("background-position-y", "center 10px"); +test_invalid_value("background-position-y", "20% top"); +test_invalid_value("background-position-y", "bottom top"); +test_invalid_value("background-position-y", "y-start center"); +test_invalid_value("background-position-y", "top, center bottom"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-valid.html new file mode 100644 index 0000000000..5a474a449d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-valid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-y with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y"> +<meta name="assert" content="background-position-y supports the full grammar '[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-position-y", "center"); +test_valid_value("background-position-y", "top"); +test_valid_value("background-position-y", "bottom"); +test_valid_value("background-position-y", "y-start"); +test_valid_value("background-position-y", "y-end"); +test_valid_value("background-position-y", "-20%"); +test_valid_value("background-position-y", "10px"); +test_valid_value("background-position-y", "0.5em"); +test_valid_value("background-position-y", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("background-position-y", "top -20%"); +test_valid_value("background-position-y", "bottom 10px"); +test_valid_value("background-position-y", "-20%, 10px"); +test_valid_value("background-position-y", "center, top, bottom"); +test_valid_value("background-position-y", "0.5em, y-start, y-end"); +test_valid_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px", "calc(-0.5em + 10px), top -20%, bottom 10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-computed.html new file mode 100644 index 0000000000..ad7bfa5a21 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundRepeat</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-repeat"> +<meta name="assert" content="background-attachment repeat value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-repeat", "repeat-x"); +test_computed_value("background-repeat", "repeat-y"); +test_computed_value("background-repeat", "repeat"); +test_computed_value("background-repeat", "space"); +test_computed_value("background-repeat", "round"); +test_computed_value("background-repeat", "no-repeat"); + +test_computed_value("background-repeat", "repeat space"); +test_computed_value("background-repeat", "round no-repeat"); +test_computed_value("background-repeat", "repeat repeat", "repeat"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-repeat", "repeat-x, repeat-y, repeat", "repeat-x"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-invalid.html new file mode 100644 index 0000000000..abb153378f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-repeat with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-repeat"> +<meta name="assert" content="background-repeat supports only the grammar '<repeat-style>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-repeat", "repeat repeat-x"); +test_invalid_value("background-repeat", "repeat-y round"); +test_invalid_value("background-repeat", "repeat space round"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-valid.html new file mode 100644 index 0000000000..2f72e03c73 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-repeat with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-repeat"> +<meta name="assert" content="background-repeat supports the full grammar '<repeat-style>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-repeat", "repeat"); +test_valid_value("background-repeat", "repeat-x, repeat-y, repeat", "repeat-x, repeat-y, repeat"); +test_valid_value("background-repeat", "repeat space, round no-repeat, repeat-x"); +test_valid_value("background-repeat", "repeat repeat", ["repeat", "repeat repeat"]); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-shorthand-serialization.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-shorthand-serialization.html new file mode 100644 index 0000000000..5212303784 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-shorthand-serialization.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Background Shorthand Serialization Test: background shorthand should only serialize non-initial values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> +<meta name="assert" content="background shorthand should only serialize non-initial values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> + const element = document.createElement('div'); + + test((t) => { + element.style = 'background: yellow;'; + assert_equals(element.style.background , 'yellow'); + }, "single value"); + + test((t) => { + element.style = 'background: no-repeat url(/favicon.ico);'; + assert_equals(element.style.background , 'url("/favicon.ico") no-repeat'); + }, "multiple values"); + + test((t) => { + element.style = 'background: url(/favicon.ico) no-repeat, url(/favicon.ico) no-repeat;'; + assert_equals(element.style.background , 'url("/favicon.ico") no-repeat, url("/favicon.ico") no-repeat'); + }, "multiple backgrounds"); + + test((t) => { + element.style = 'background: url("/favicon.ico") 0% 0% / 10rem;'; + assert_equals(element.style.background , 'url("/favicon.ico") 0% 0% / 10rem'); + }, "background-size with non-initial background-position"); + + test((t) => { + element.style = `background: url(/favicon.ico) top left no-repeat, + url(/favicon.ico) center / 100% 100% no-repeat, + url(/favicon.ico) white;`; + assert_equals(element.style.background , 'url("/favicon.ico") left top no-repeat, url("/favicon.ico") center center / 100% 100% no-repeat, white url("/favicon.ico")'); + }, "multiple backgrounds with varying values"); + + test((t) => { + element.style = `background: padding-box border-box;`; + assert_equals(element.style.background , 'none'); + }, "all initial values"); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-computed.html new file mode 100644 index 0000000000..80fdd0fb27 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().backgroundSize</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-size"> +<meta name="assert" content="background-size computed value is a list, each item a pair of sizes (one per axis) each represented as either a keyword or a computed length-percentage value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("background-size", "1px", "1px auto"); +test_computed_value("background-size", "1px auto", "1px auto"); +test_computed_value("background-size", "2% 3%"); +test_computed_value("background-size", "auto"); +test_computed_value("background-size", "auto auto", "auto"); +test_computed_value("background-size", "auto 4%"); +test_computed_value("background-size", "contain"); +test_computed_value("background-size", "cover"); +test_computed_value("background-size", "calc(10px + 0.5em) calc(10px - 0.5em)", "30px 0px"); +test_computed_value("background-size", "calc(10px - 0.5em) calc(10px + 0.5em)", "0px 30px"); + +// See background-computed.html for a test with multiple background images. +test_computed_value("background-size", "auto 1px, 2% 3%, contain", "auto 1px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-invalid.html new file mode 100644 index 0000000000..01a0322002 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-size with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-size"> +<meta name="assert" content="background-size supports only the grammar '<bg-size>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Blink and WebKit fail these by accepting negative values. +test_invalid_value("background-size", "-1px"); +test_invalid_value("background-size", "2% -3%"); + +test_invalid_value("background-size", "1px 2px 3px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-valid.html new file mode 100644 index 0000000000..c169232cb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-size-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background-size with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-size"> +<meta name="assert" content="background-size supports the full grammar '<bg-size>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("background-size", "1px", ["1px", "1px auto"]); +test_valid_value("background-size", "1px auto", ["1px", "1px auto"]); +test_valid_value("background-size", "2% 3%"); +test_valid_value("background-size", "auto", ["auto", "auto auto"]); +test_valid_value("background-size", "auto auto", ["auto", "auto auto"]); +test_valid_value("background-size", "auto 4%"); +test_valid_value("background-size", "contain"); +test_valid_value("background-size", "cover"); + +test_valid_value("background-size", "auto 1px, 2% 3%, contain"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-valid.html new file mode 100644 index 0000000000..e011c2238d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-valid.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing background with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> +<meta name="assert" content="background supports the full grammar '<bg-layer># , <final-bg-layer>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> + +// Background serialization varies across browsers. https://github.com/w3c/csswg-drafts/issues/418 +test_valid_value("background", + 'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box', [ + 'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box', // spec, WebKit + 'url("https://example.com/") local space round 1px 2px / 3px 4px padding-box content-box, url("https://example.com/") local space round 1px 2px / 3px 4px padding-box content-box rgb(5, 6, 7)', // Edge + 'url("https://example.com/") space round local 1px 2px / 3px 4px padding-box content-box, rgb(5, 6, 7) url("https://example.com/") space round local 1px 2px / 3px 4px padding-box content-box', // Firefox + 'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box rgb(5, 6, 7)' // Blink +]); + +test_shorthand_value('background', 'none', { + 'background-image': 'none', + 'background-position': '0% 0%', + 'background-size': 'auto', + 'background-repeat': 'repeat', + 'background-attachment': 'scroll', + 'background-origin': 'padding-box', + 'background-clip': 'border-box', + 'background-color': 'transparent', +}) +test_shorthand_value('background', 'url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box, rgb(5, 6, 7) url("https://example.com/") 1px 2px / 3px 4px space round local padding-box content-box', { + 'background-image': 'url("https://example.com/"), url("https://example.com/")', + 'background-position': '1px 2px, 1px 2px', + 'background-size': '3px 4px, 3px 4px', + 'background-repeat': 'space round, space round', + 'background-attachment': 'local, local', + 'background-origin': 'padding-box, padding-box', + 'background-clip': 'content-box, content-box', + 'background-color': 'rgb(5, 6, 7)', +}) + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-computed.html new file mode 100644 index 0000000000..5cff8b3dfa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-computed.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderColor</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color"> +<meta name="assert" content="border-color computed value is the computed colors."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: lime; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; +const currentColor = "rgb(0, 255, 0)"; +const red = "rgb(255, 0, 0)"; +const yellow = "rgb(255, 255, 0)"; +const green = "rgb(0, 128, 0)"; +const blue = "rgb(0, 0, 255)"; + +test_computed_value("border-color", "currentcolor", currentColor); +test_computed_value("border-color", "red yellow", red + " " + yellow); +test_computed_value("border-color", "red yellow currentcolor", red + " " + yellow + " " + currentColor); +test_computed_value("border-color", "red yellow green blue", red + " " + yellow + " " + green + " " + blue); + +test_computed_value("border-top-color", "red", red); +test_computed_value("border-right-color", "yellow", yellow); +test_computed_value("border-bottom-color", "green", green); +test_computed_value("border-left-color", "blue", blue); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-invalid.html new file mode 100644 index 0000000000..6e4d28e798 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-color with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color"> +<meta name="assert" content="border-color supports only the grammar '<color>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-color", "auto"); + +test_invalid_value("border-color", "black, white"); + +test_invalid_value("border-color", "black white red green blue"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-shorthand.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-shorthand.html new file mode 100644 index 0000000000..012567830e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-color sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color"> +<meta name="assert" content="border-color supports the full grammar '<color>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-color', 'currentcolor', { + 'border-top-color': 'currentcolor', + 'border-right-color': 'currentcolor', + 'border-bottom-color': 'currentcolor', + 'border-left-color': 'currentcolor' +}); + +test_shorthand_value('border-color', 'red yellow', { + 'border-top-color': 'red', + 'border-right-color': 'yellow', + 'border-bottom-color': 'red', + 'border-left-color': 'yellow' +}); + +test_shorthand_value('border-color', 'red yellow green', { + 'border-top-color': 'red', + 'border-right-color': 'yellow', + 'border-bottom-color': 'green', + 'border-left-color': 'yellow' +}); + +test_shorthand_value('border-color', 'red yellow green blue', { + 'border-top-color': 'red', + 'border-right-color': 'yellow', + 'border-bottom-color': 'green', + 'border-left-color': 'blue' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-valid.html new file mode 100644 index 0000000000..a4cd7748ac --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-color with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color"> +<meta name="assert" content="border-color supports the full grammar '<color>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-color", "currentcolor", "currentcolor"); +test_valid_value("border-color", "currentColor", "currentcolor"); + +test_valid_value("border-color", "red yellow green blue"); + +test_valid_value("border-top-color", "red"); +test_valid_value("border-right-color", "yellow"); +test_valid_value("border-bottom-color", "green"); +test_valid_value("border-left-color", "blue"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-invalid.html new file mode 100644 index 0000000000..273fc0a7bf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-invalid.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image"> +<meta name="assert" content="border-image supports only the grammar ' <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image", "auto"); +test_invalid_value("border-image", 'none, url("http://www.example.com/")'); + +test_invalid_value("border-image", "stretch repeat round"); + +test_invalid_value("border-image", "fill"); +test_invalid_value("border-image", "1 2 3 4 5"); +test_invalid_value("border-image", "1% fill 2%"); + +test_invalid_value("border-image", "1 / -2px"); +test_invalid_value("border-image", "-1 / 2px"); + +test_invalid_value("border-image", "1 / 1 2 3 4 5"); + +test_invalid_value("border-image", "1 2 3 4 5 / / 1px"); +test_invalid_value("border-image", "1 / / auto"); +test_invalid_value("border-image", "1 2% 3 4% / / 1%"); +test_invalid_value("border-image", "1 2% 3 4% fill / / 1 2 3 4 5"); + +test_invalid_value("border-image", "1 / none / 1px"); +test_invalid_value("border-image", "1 2% 3 4% / 1 2 3 4 5 / 2"); +test_invalid_value("border-image", "1 2 3 4 5 / 1px / 1px"); +test_invalid_value("border-image", "1 / 1px / auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-computed.html new file mode 100644 index 0000000000..c026207991 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-computed.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageOutset</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-outset"> +<meta name="assert" content="border-image-outset computed value is four values, each a number or absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-outset", "1px"); +test_computed_value("border-image-outset", "1px 2"); +test_computed_value("border-image-outset", "1px 2 3px"); +test_computed_value("border-image-outset", "1px 2 3px 4"); +test_computed_value("border-image-outset", "0 calc(0.5em + 10px) 3 calc(-0.5em + 10px)", "0 30px 3 0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-invalid.html new file mode 100644 index 0000000000..4102f60342 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-outset with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-outset"> +<meta name="assert" content="border-image-outset supports only the grammar '[ <length> | <number> ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-outset", "auto"); + +test_invalid_value("border-image-outset", "-1"); +test_invalid_value("border-image-outset", "-2px"); + +test_invalid_value("border-image-outset", "1%"); + +test_invalid_value("border-image-outset", "1 2 3 4 5"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-valid.html new file mode 100644 index 0000000000..ee85af8767 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-outset with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-outset"> +<meta name="assert" content="border-image-outset supports the full grammar '[ <length> | <number> ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-outset", "1px"); +test_valid_value("border-image-outset", "2"); +test_valid_value("border-image-outset", "1px 2 3px 4"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-computed.html new file mode 100644 index 0000000000..95ce8498f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageRepeat</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-repeat"> +<meta name="assert" content="border-image-repeat computed value is specified keywords."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-repeat", "round"); +test_computed_value("border-image-repeat", "stretch repeat"); +test_computed_value("border-image-repeat", "round space"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-invalid.html new file mode 100644 index 0000000000..de0998dcc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-repeat with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-repeat"> +<meta name="assert" content="border-image-repeat supports only the grammar '[ stretch | repeat | round | space ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-repeat", "auto"); + +test_invalid_value("border-image-repeat", "stretch repeat round"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-valid.html new file mode 100644 index 0000000000..f90ef71191 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-repeat with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-repeat"> +<meta name="assert" content="border-image-repeat supports the full grammar '[ stretch | repeat | round | space ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-repeat", "stretch"); +test_valid_value("border-image-repeat", "space space", "space"); +test_valid_value("border-image-repeat", "repeat round"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-shorthand.sub.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-shorthand.sub.html new file mode 100644 index 0000000000..37fb998d6c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-shorthand.sub.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-image sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image"> +<meta name="assert" content="border-image supports the full grammar ' <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-image', 'none', { + 'border-image-source': 'none', + 'border-image-slice': '100%', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-image', 'url("http://{{host}}/") 1 2 3 4 fill', { + 'border-image-source': 'url("http://{{host}}/")', + 'border-image-slice': '1 2 3 4 fill', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-image', 'repeat round', { + 'border-image-source': 'none', + 'border-image-slice': '100%', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'repeat round' +}); + +test_shorthand_value('border-image', 'url("http://{{host}}/") fill 1 2% 3 4%', { + 'border-image-source': 'url("http://{{host}}/")', + 'border-image-slice': '1 2% 3 4% fill', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-image', '1 2% 3 4% / 5% / 6', { + 'border-image-source': 'none', + 'border-image-slice': '1 2% 3 4%', + 'border-image-width': '5%', + 'border-image-outset': '6', + 'border-image-repeat': 'stretch' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-computed.html new file mode 100644 index 0000000000..bfc8714d98 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageSlice</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-slice"> +<meta name="assert" content="border-image-slice computed value is four values, each either a number or percentage; plus a fill keyword if specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-slice", "1"); +test_computed_value("border-image-slice", "1 2%"); +test_computed_value("border-image-slice", "1 2% 3"); +test_computed_value("border-image-slice", "1 2% 3 4%"); + +test_computed_value("border-image-slice", "1% 2 3% 4 fill"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-invalid.html new file mode 100644 index 0000000000..6b6e0e9d61 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-invalid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-slice with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-slice"> +<meta name="assert" content="border-image-slice supports only the grammar '[<number> | <percentage>]{1,4} && fill?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-slice", "fill"); + +test_invalid_value("border-image-slice", "1 -2% fill"); +test_invalid_value("border-image-slice", "-1 2% fill"); + +test_invalid_value("border-image-slice", "1 2 3 4 5"); + +test_invalid_value("border-image-slice", "1% fill 2%"); + +test_invalid_value("border-image-slice", "-10"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-valid.html new file mode 100644 index 0000000000..671120b41b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-slice with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-slice"> +<meta name="assert" content="border-image-slice supports the full grammar '[<number> | <percentage>]{1,4} && fill?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-slice", "1"); +test_valid_value("border-image-slice", "1 2% 3 4%"); + +test_valid_value("border-image-slice", "1 2% 3 4% fill"); +test_valid_value("border-image-slice", "fill 1 2% 3 4%", "1 2% 3 4% fill"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-computed.sub.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-computed.sub.html new file mode 100644 index 0000000000..ad48aa987a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-computed.sub.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageSource</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-source"> +<meta name="assert" content="border-image-source computed value is the keyword none or the specified image with URIs made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: blue; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-source", "none"); +test_computed_value("border-image-source", 'url("http://{{host}}/")'); + +test_computed_value('border-image-source', 'linear-gradient(-45deg, red, currentcolor)', 'linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('border-image-source', 'repeating-linear-gradient(-45deg, red, 30%, currentcolor 70%, lime)', 'repeating-linear-gradient(-45deg, rgb(255, 0, 0), 30%, rgb(0, 0, 255) 70%, rgb(0, 255, 0))'); +test_computed_value('border-image-source', 'radial-gradient(10px at 20px 30px, currentcolor, lime)', 'radial-gradient(10px at 20px 30px, rgb(0, 0, 255), rgb(0, 255, 0))'); +test_computed_value('border-image-source', 'conic-gradient(from 90deg at 80% 90%, lime, black)', 'conic-gradient(from 90deg at 80% 90%, rgb(0, 255, 0), rgb(0, 0, 0))'); + +test(() => { + const target = document.getElementById('target'); + target.style['border-image-source'] = 'url("a.b#c")'; + const result = getComputedStyle(target)['border-image-source']; + const resolved = new URL("a.b#c", document.URL).href; + assert_equals(result, 'url("' + resolved + '")'); +}, 'url values are made absolute'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-invalid.html new file mode 100644 index 0000000000..8b1240a0d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-source with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-source"> +<meta name="assert" content="border-image-source supports only the grammar 'none | <image>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-source", "auto"); + +test_invalid_value("border-image-source", 'none, url("http://www.example.com/")'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-valid.html new file mode 100644 index 0000000000..7fbbbd9e95 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-source with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-source"> +<meta name="assert" content="border-image-source supports the full grammar 'none | <image>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-source", "none"); + +// Safari removes quotes. +test_valid_value("border-image-source", 'url("http://www.example.com/")', ['url("http://www.example.com/")', 'url(http://www.example.com/)']); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-valid.html new file mode 100644 index 0000000000..cdd38b0a62 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-valid.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image"> +<meta name="assert" content="border-image supports the full grammar ' <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// WebKit fails all these tests by returning an empty string as the value of border-image. + +// "none" in Edge, "none 100% / 1 / 0 stretch" in Firefox and Blink. +test_valid_value("border-image", "none", ["none", "none 100% / 1 / 0 stretch"]); +test_valid_value("border-image", "stretch", ["stretch", "none", "none 100% / 1 / 0 stretch"]); +test_valid_value("border-image", "none 100% / 1 / 0 stretch", ["none", "none 100% / 1 / 0 stretch"]); + +test_valid_value("border-image", 'url("http://www.example.com/") 1 2 3 4 fill', ['url("http://www.example.com/") 1 2 3 4 fill', 'url("http://www.example.com/") 1 2 3 4 fill / 1 / 0 stretch']); +test_valid_value("border-image", 'url("http://www.example.com/") 1 2 3 4 fill / 1 / 0 stretch', ['url("http://www.example.com/") 1 2 3 4 fill', 'url("http://www.example.com/") 1 2 3 4 fill / 1 / 0 stretch']); + +test_valid_value("border-image", 'url("http://www.example.com/")', ['url("http://www.example.com/")', 'url("http://www.example.com/") 100% / 1 / 0 stretch']); + +test_valid_value("border-image", "repeat round", ["repeat round", "none repeat round", "none 100% / 1 / 0 repeat round"]); +test_valid_value("border-image", "none repeat round", ["repeat round", "none repeat round", "none 100% / 1 / 0 repeat round"]); + +test_valid_value("border-image", "space", ["space", "none space space", "none 100% / 1 / 0 space"]); +test_valid_value("border-image", "none space space", ["space", "none space space", "none space", "none 100% / 1 / 0 space"]); +test_valid_value("border-image", "none 100% / 1 / 0 space", ["space", "none space space", "none 100% / 1 / 0 space"]); + +test_valid_value("border-image", "1", ["1", "none 1 1 1 1", "none 1 / 1 / 0 stretch"]); +test_valid_value("border-image", "none 1 1 1 1", ["1", "none 1 1 1 1", "none 1", "none 1 / 1 / 0 stretch"]); +test_valid_value("border-image", "none 1 / 1 / 0 stretch", ["1", "none 1 1 1 1", "none 1 / 1 / 0 stretch"]); + +test_valid_value("border-image", 'url("http://www.example.com/") 1 2% 3 4%', ['url("http://www.example.com/") 1 2% 3 4%', 'url("http://www.example.com/") 1 2% 3 4% / 1 / 0 stretch']); +test_valid_value("border-image", 'url("http://www.example.com/") 1 2% 3 4% fill', ['url("http://www.example.com/") 1 2% 3 4% fill', 'url("http://www.example.com/") 1 2% 3 4% fill / 1 / 0 stretch']); +test_valid_value("border-image", 'url("http://www.example.com/") fill 1 2% 3 4%', ['url("http://www.example.com/") 1 2% 3 4% fill', 'url("http://www.example.com/") 1 2% 3 4% fill / 1 / 0 stretch']); + +test_valid_value("border-image", "1 / 1px", ["1 / 1px", "none 1 / 1px / 0 stretch"]); +test_valid_value("border-image", "1 2% 3 4% / 2%", ["1 2% 3 4% / 2%", "none 1 2% 3 4% / 2% 2% 2% 2%", "none 1 2% 3 4% / 2% / 0 stretch"]); +test_valid_value("border-image", "1 2% 3 4% fill / 3", ["1 2% 3 4% fill / 3", "none 1 2% 3 4% fill / 3 3 3 3", "none 1 2% 3 4% fill / 3 / 0 stretch"]); +test_valid_value("border-image", "fill 1 2% 3 4% / auto", ["1 2% 3 4% fill / auto", "none 1 2% 3 4% fill / auto / 0 stretch"]); +test_valid_value("border-image", "1 / 1px 2% 3 auto", ["1 / 1px 2% 3 auto", "none 1 / 1px 2% 3 auto / 0 stretch"]); + +test_valid_value("border-image", "1 / / 1px", ["1 / / 1px", "none 1 / 1 / 1px stretch"]); +test_valid_value("border-image", "1 2% 3 4% / / 2", ["1 2% 3 4% / / 2", "none 1 2% 3 4% / 1 / 2 stretch"]); +test_valid_value("border-image", 'url("http://www.example.com/") 1 2% 3 4% fill / / 1px 2 3px 4', ['url("http://www.example.com/") 1 2% 3 4% fill / / 1px 2 3px 4', 'url("http://www.example.com/") 1 2% 3 4% fill / 1 / 1px 2 3px 4 stretch']); + +test_valid_value("border-image", "1 / 1px / 1px", ["1 / 1px / 1px", "none 1 / 1px / 1px stretch"]); +test_valid_value("border-image", "1 2% 3 4% / 2% / 2", ["1 2% 3 4% / 2% / 2", "none 1 2% 3 4% / 2% / 2 stretch"]); +test_valid_value("border-image", "1 2% 3 4% fill / 3 / 1px 2 3px 4", ["1 2% 3 4% fill / 3 / 1px 2 3px 4", "none 1 2% 3 4% fill / 3 / 1px 2 3px 4 stretch"]); +test_valid_value("border-image", "1 / auto / 1px", ["1 / auto / 1px", "none 1 / auto / 1px stretch"]); +test_valid_value("border-image", "1 2% 3 4% / 1px 2% 3 auto / 2", ["1 2% 3 4% / 1px 2% 3 auto / 2", "none 1 2% 3 4% / 1px 2% 3 auto / 2 2 2 2", "none 1 2% 3 4% / 1px 2% 3 auto / 2 stretch"]); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-computed.html new file mode 100644 index 0000000000..2c36eda8c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-computed.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderImageWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width"> +<meta name="assert" content="border-image-width computed value is four values, each either a number, the keyword auto, or a computed length-percentage value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-image-width", "0"); +test_computed_value("border-image-width", "1"); +test_computed_value("border-image-width", "auto"); +test_computed_value("border-image-width", "10px"); +test_computed_value("border-image-width", "20%"); +test_computed_value("border-image-width", "calc(20% + 10px)"); +test_computed_value("border-image-width", "calc(-0.5em + 10px)", "0px"); +test_computed_value("border-image-width", "calc(0.5em + 10px)", "30px"); +test_computed_value("border-image-width", "1 auto"); +test_computed_value("border-image-width", "1 auto 10px"); +test_computed_value("border-image-width", "1 auto 10px 20%"); +test_computed_value("border-image-width", "20% 10px auto 1"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-invalid.html new file mode 100644 index 0000000000..b3e9359749 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-width with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width"> +<meta name="assert" content="border-image-width supports only the grammar '[ <length-percentage> | <number> | auto ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-image-width", "none"); + +test_invalid_value("border-image-width", "-1px"); +test_invalid_value("border-image-width", "-2%"); +test_invalid_value("border-image-width", "-3"); + +test_invalid_value("border-image-width", "1 2 3 4 5"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-valid.html new file mode 100644 index 0000000000..ce8b9a9455 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-image-width with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width"> +<meta name="assert" content="border-image-width supports the full grammar '[ <length-percentage> | <number> | auto ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-image-width", "1px"); +test_valid_value("border-image-width", "2%"); +test_valid_value("border-image-width", "3"); +test_valid_value("border-image-width", "auto"); + +test_valid_value("border-image-width", "1px 2% 3 auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-invalid.html new file mode 100644 index 0000000000..870e741f44 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands"> +<meta name="assert" content="border supports only the grammar '<line-width> || <line-style> || <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border", "auto"); +test_invalid_value("border", "thin double green 1px"); +test_invalid_value("border", "-2em"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-computed.html new file mode 100644 index 0000000000..9406d1b171 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-computed.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: getComputedStyle().borderRadius</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> +<meta name="assert" content="Computed value has computed length-percentage values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-radius", "1px"); +test_computed_value("border-radius", "1px 2% 3px 4%"); +test_computed_value("border-radius", "5em / 1px 2% 3px 4%", "200px / 1px 2% 3px 4%"); +test_computed_value("border-radius", "1px 2% 3px 4% / 5em", "1px 2% 3px 4% / 200px"); + +test_computed_value("border-radius", "1px 1px 1px 2% / 1px 2% 1px 2%", "1px 1px 1px 2% / 1px 2%"); +test_computed_value("border-radius", "1px 1px 1px 1px / 1px 1px 2% 1px", "1px / 1px 1px 2%"); +test_computed_value("border-radius", "1px 1px 2% 2%"); +test_computed_value("border-radius", "1px 2% 1px 1px"); +test_computed_value("border-radius", "1px 2% 2% 2% / 1px 2% 3px 2%", "1px 2% 2% / 1px 2% 3px"); + +test_computed_value("border-top-left-radius", "calc(-0.5em + 10px)", "0px"); +test_computed_value("border-top-right-radius", "20%"); +test_computed_value("border-bottom-right-radius", "calc(0.5em + 10px) 40%", "30px 40%"); +test_computed_value("border-bottom-left-radius", "50% 60px"); + +test_computed_value("border-top-left-radius", "40px 0px", "40px 0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-invalid.html new file mode 100644 index 0000000000..f6d1bcb081 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-radius with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> +<meta name="assert" content="border-radius supports only the grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-radius", "auto"); +test_invalid_value("border-radius", "none"); +test_invalid_value("border-radius", "1px 2px 3px 4px 5px"); +test_invalid_value("border-radius", "-1px"); +test_invalid_value("border-radius", "1px -2px"); +test_invalid_value("border-radius", "1em /"); +test_invalid_value("border-radius", "1px / 2px / 3px"); +test_invalid_value("border-radius", "4 / 5"); + +test_invalid_value("border-radius", "5em 1px 5em 2% 5em 3px 5em 4%"); +test_invalid_value("border-radius", "1px 5em 2% 5em 3px 5em 4% 5em"); + +test_invalid_value("border-top-left-radius", "10px 20px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-valid.html new file mode 100644 index 0000000000..584211f09a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-valid.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-radius with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> +<meta name="assert" content="border-radius supports CSS Wide keywords and the full grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-radius", "initial"); +test_valid_value("border-radius", "inherit"); +test_valid_value("border-radius", "unset"); +test_valid_value("border-radius", "revert"); + +test_valid_value("border-radius", "1px"); +test_valid_value("border-radius", "1px 5%"); +test_valid_value("border-radius", "1px 2% 3px"); +test_valid_value("border-radius", "1px 2% 3px 4%"); +test_valid_value("border-radius", "1px / 2px"); +test_valid_value("border-radius", "5em / 1px 2% 3px 4%"); +test_valid_value("border-radius", "1px 2% / 3px 4px"); +test_valid_value("border-radius", "1px 2px 3em / 1px 2px 3%"); +test_valid_value("border-radius", "1px 2% / 2px 3em 4px 5em"); +test_valid_value("border-radius", "1px 2% 3px 4% / 5em"); + +test_valid_value("border-radius", "1px 1px 1px 2% / 1px 2% 1px 2%", "1px 1px 1px 2% / 1px 2%"); +test_valid_value("border-radius", "1px 1px 1px 1px / 1px 1px 2% 1px", "1px / 1px 1px 2%"); +test_valid_value("border-radius", "1px 1px 2% 2%"); +test_valid_value("border-radius", "1px 2% 1px 1px"); +test_valid_value("border-radius", "1px 2% 2% 2% / 1px 2% 3px 2%", "1px 2% 2% / 1px 2% 3px"); + +test_valid_value("border-top-left-radius", "10px"); +test_valid_value("border-top-right-radius", "20%"); +test_valid_value("border-bottom-right-radius", "30px 40%"); +test_valid_value("border-bottom-left-radius", "50% 60px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-shorthand.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-shorthand.html new file mode 100644 index 0000000000..487ce876fa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-shorthand.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands"> +<meta name="assert" content="border supports the full grammar '<line-width> || <line-style> || <color>'."> +<meta name="assert" content="The border shorthand also resets border-image to its initial value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + +test_invalid_value('border', '2px solid color-mix(42deg)'); +test_invalid_value('border', '2px solid color-contrast(42deg)'); + +test_shorthand_value('border', '5px dotted blue', { + 'border-top-width': '5px', + 'border-right-width': '5px', + 'border-bottom-width': '5px', + 'border-left-width': '5px', + 'border-top-style': 'dotted', + 'border-right-style': 'dotted', + 'border-bottom-style': 'dotted', + 'border-left-style': 'dotted', + 'border-top-color': 'blue', + 'border-right-color': 'blue', + 'border-bottom-color': 'blue', + 'border-left-color': 'blue', + + 'border-image-source': 'none', + 'border-image-slice': '100%', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-top', 'thin', { + 'border-top-width': 'thin', + 'border-top-style': 'none', + 'border-top-color': 'currentcolor' +}); + +test_shorthand_value('border-right', 'double', { + 'border-right-width': 'medium', + 'border-right-style': 'double', + 'border-right-color': 'currentcolor' +}); + +test_shorthand_value('border-bottom', 'green', { + 'border-bottom-width': 'medium', + 'border-bottom-style': 'none', + 'border-bottom-color': 'green' +}); + +test_shorthand_value('border-left', '1px dotted red', { + 'border-left-width': '1px', + 'border-left-style': 'dotted', + 'border-left-color': 'red' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-computed.html new file mode 100644 index 0000000000..e890be1128 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderStyle</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style"> +<meta name="assert" content="border-style computed value is the specified keywords."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-style", "none"); +test_computed_value("border-style", "inset outset"); +test_computed_value("border-style", "hidden dotted dashed"); +test_computed_value("border-style", "solid double groove ridge"); + +test_computed_value("border-top-style", "solid"); +test_computed_value("border-right-style", "double"); +test_computed_value("border-bottom-style", "groove"); +test_computed_value("border-left-style", "ridge"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-invalid.html new file mode 100644 index 0000000000..27fa45116f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-style with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style"> +<meta name="assert" content="border-style supports only the grammar '<line-style>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-style", "auto"); +test_invalid_value("border-style", "solid double groove ridge none"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-shorthand.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-shorthand.html new file mode 100644 index 0000000000..b85804e287 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-style sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style"> +<meta name="assert" content="border-style supports the full grammar '<line-style>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-style', 'none', { + 'border-top-style': 'none', + 'border-right-style': 'none', + 'border-bottom-style': 'none', + 'border-left-style': 'none' +}); + +test_shorthand_value('border-style', 'inset outset', { + 'border-top-style': 'inset', + 'border-right-style': 'outset', + 'border-bottom-style': 'inset', + 'border-left-style': 'outset' +}); + +test_shorthand_value('border-style', 'hidden dotted dashed', { + 'border-top-style': 'hidden', + 'border-right-style': 'dotted', + 'border-bottom-style': 'dashed', + 'border-left-style': 'dotted' +}); + +test_shorthand_value('border-style', 'solid double groove ridge', { + 'border-top-style': 'solid', + 'border-right-style': 'double', + 'border-bottom-style': 'groove', + 'border-left-style': 'ridge' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-valid.html new file mode 100644 index 0000000000..0b59218028 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-style with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style"> +<meta name="assert" content="border-style supports the full grammar '<line-style>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-style", "none"); +test_valid_value("border-style", "none hidden dotted dashed"); +test_valid_value("border-style", "solid double groove ridge"); +test_valid_value("border-style", "inset outset"); + +test_valid_value("border-top-style", "solid"); +test_valid_value("border-right-style", "double"); +test_valid_value("border-bottom-style", "groove"); +test_valid_value("border-left-style", "ridge"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-valid.html new file mode 100644 index 0000000000..8c52b428ba --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands"> +<meta name="assert" content="border supports the full grammar '<line-width> || <line-style> || <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border", "1px dotted red"); +test_valid_value("border", "green double thin", "thin double green"); + +test_valid_value("border-top", "thin", ["thin", "thin none"]); +test_valid_value("border-right", "double", ["double", "medium double"]); +test_valid_value("border-bottom", "green", ["green", "medium none green"]); +test_valid_value("border-left", "1px dotted red"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-computed.html new file mode 100644 index 0000000000..ab4169ea99 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-computed.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders: getComputedStyle().borderWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<meta name="assert" content="border-width computed value is the absolute length; zero if the border style is none or hidden."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #box { + border-style: dotted; /* Avoid border-*-width computed style 0 */ + border-top-width: thin; + border-right-width: medium; + border-bottom-width: thick; + } + #target { + border-style: dotted; /* Avoid border-*-width computed style 0 */ + font-size: 40px; + } +</style> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<script> +'use strict'; +const box = document.getElementById('box'); +const thinWidth = getComputedStyle(box).borderTopWidth; +const mediumWidth = getComputedStyle(box).borderRightWidth; +const thickWidth = getComputedStyle(box).borderBottomWidth; + +test_computed_value("border-width", "1px"); +test_computed_value("border-width", "1px 2px"); +test_computed_value("border-width", "1px 2px 3px"); +test_computed_value("border-width", "1px 2px 3px 4px"); + +test_computed_value("border-width", "0.5em", "20px"); +test_computed_value("border-width", "2px thin medium thick", "2px " + thinWidth + " " + mediumWidth + " " + thickWidth); + +test_computed_value("border-top-width", "0px"); +test_computed_value("border-right-width", "10px"); +test_computed_value("border-bottom-width", "calc(-0.5em + 10px)", "0px"); +test_computed_value("border-left-width", "calc(0.5em + 10px)", "30px"); + +test(() => { + const thin = Number(thinWidth.replace("px", "")); + const medium = Number(mediumWidth.replace("px", "")); + const thick = Number(thickWidth.replace("px", "")); + assert_less_than_equal(0, thin); + assert_less_than_equal(thin, medium); + assert_less_than_equal(medium, thick); +}, "thin ≤ medium ≤ thick"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-invalid.html new file mode 100644 index 0000000000..ec7eb72a9a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-width with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<meta name="assert" content="border-width supports only the grammar '<line-width>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-width", "none"); +test_invalid_value("border-width", "thin medium thick medium thin"); +test_invalid_value("border-width", "-1px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-shorthand.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-shorthand.html new file mode 100644 index 0000000000..07461bc94d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-width sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<meta name="assert" content="border-width supports the full grammar '<line-width>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-width', '5px', { + 'border-top-width': '5px', + 'border-right-width': '5px', + 'border-bottom-width': '5px', + 'border-left-width': '5px' +}); + +test_shorthand_value('border-width', 'thick thin', { + 'border-top-width': 'thick', + 'border-right-width': 'thin', + 'border-bottom-width': 'thick', + 'border-left-width': 'thin' +}); + +test_shorthand_value('border-width', 'thin medium thick', { + 'border-top-width': 'thin', + 'border-right-width': 'medium', + 'border-bottom-width': 'thick', + 'border-left-width': 'medium' +}); + +test_shorthand_value('border-width', '1px 2px 3px 4px', { + 'border-top-width': '1px', + 'border-right-width': '2px', + 'border-bottom-width': '3px', + 'border-left-width': '4px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-valid.html new file mode 100644 index 0000000000..552416df3d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-valid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing border-width with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<meta name="assert" content="border-width supports the full grammar '<line-width>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-width", "1em"); +test_valid_value("border-width", "2px thin medium thick"); + +test_valid_value("border-top-width", "0px"); +test_valid_value("border-right-width", "thin"); +test_valid_value("border-bottom-width", "medium"); +test_valid_value("border-left-width", "thick"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-computed.html b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-computed.html new file mode 100644 index 0000000000..5d268bf3fd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-computed.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: getComputedStyle().boxShadow</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#box-shadow"> +<meta name="assert" content="box-shadow computes to none or a list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: blue; + font-size: 20px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; +const currentColor = 'rgb(0, 0, 255)'; +test_computed_value('box-shadow', 'none'); +test_computed_value('box-shadow', '1px 2px', currentColor + ' 1px 2px 0px 0px'); +test_computed_value('box-shadow', 'currentcolor -1em -2em 3em -4em', currentColor + ' -20px -40px 60px -80px'); +test_computed_value('box-shadow', 'rgb(0, 255, 0) 1px 2px 3px 4px inset'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-invalid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-invalid.html new file mode 100644 index 0000000000..74e7b0db80 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-invalid.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing box-shadow with invalid values</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#box-shadow"> +<meta name="assert" content="box-shadow supports only the grammar 'none | <shadow>#'."> +<meta name="assert" content="Lengths must stay adjacent." /> +<meta name="assert" content="<blur-radius> must be non-negative." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("box-shadow", "auto"); +test_invalid_value("box-shadow", "1 2"); +test_invalid_value("box-shadow", "1% 2%"); +test_invalid_value("box-shadow", "1px calc(2px + 2%)"); + +test_invalid_value("box-shadow", "1px"); + +test_invalid_value("box-shadow", "1px 2px 3px 4px 5px"); +test_invalid_value("box-shadow", "red 1px 2px blue"); + + +test_invalid_value("box-shadow", "red"); +test_invalid_value("box-shadow", "4px red"); +test_invalid_value("box-shadow", "red 4px"); +test_invalid_value("box-shadow", "-4px red 4px"); +test_invalid_value("box-shadow", "red -4px 4px red"); +test_invalid_value("box-shadow", "-4px 4px red 0"); +test_invalid_value("box-shadow", "-4px 4px 0 red 0"); +test_invalid_value("box-shadow", "inset"); +test_invalid_value("box-shadow", "inset 4px"); +test_invalid_value("box-shadow", "4px inset"); +test_invalid_value("box-shadow", "4px inset -4px"); +test_invalid_value("box-shadow", "inset 4px -4px inset"); +test_invalid_value("box-shadow", "4px -4px inset 0"); +test_invalid_value("box-shadow", "4px -4px 0 inset 0"); +test_invalid_value("box-shadow", "red inset"); +test_invalid_value("box-shadow", "inset red"); +test_invalid_value("box-shadow", "4px red inset"); +test_invalid_value("box-shadow", "red inset 4px"); +test_invalid_value("box-shadow", "4px inset red"); +test_invalid_value("box-shadow", "inset red 4px"); +test_invalid_value("box-shadow", "4px red inset -4px"); +test_invalid_value("box-shadow", "4px inset red -4px"); +test_invalid_value("box-shadow", "inset 4px red -4px"); +test_invalid_value("box-shadow", "4px red 4px inset"); +test_invalid_value("box-shadow", "red 4px inset -4px"); +test_invalid_value("box-shadow", "4px inset -4px red"); +test_invalid_value("box-shadow", "4px -4px red inset 0"); +test_invalid_value("box-shadow", "4px -4px inset red 0"); +test_invalid_value("box-shadow", "inset 4px -4px red 0"); +test_invalid_value("box-shadow", "4px -4px red 0 inset"); +test_invalid_value("box-shadow", "red 4px -4px inset 0"); +test_invalid_value("box-shadow", "4px -4px inset 0 red"); + +// <blur-radius> must be non-negative +test_invalid_value("box-shadow", "1px 1px -1px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-valid.html new file mode 100644 index 0000000000..901b0a0ad2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-valid.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: parsing box-shadow with valid values</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#box-shadow"> +<meta name="assert" content="box-shadow supports the full grammar 'none | <shadow>#'."> +<meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("box-shadow", "none"); +test_valid_value("box-shadow", "1px 2px"); +test_valid_value("box-shadow", "red 1px 2px 3px -4px inset"); // Edge serializes as "inset 1px 2px 3px -4px red" +test_valid_value("box-shadow", "inset 1px 2px red", "red 1px 2px inset"); +test_valid_value("box-shadow", "1px -2px inset, red -3px 4px"); // Edge serializes as "inset 1px -2px, -3px 4px red" +test_valid_value("box-shadow", "inset 1px -2px, -3px 4px red", "1px -2px inset, red -3px 4px"); + + +// color only +test_valid_value("box-shadow", "4px 4px green", "green 4px 4px"); +test_valid_value("box-shadow", "green -4px 4px", "green -4px 4px"); +test_valid_value("box-shadow", "-4px 4px 0 green", "green -4px 4px 0px"); +test_valid_value("box-shadow", "green -4px 4px 0", "green -4px 4px 0px"); +test_valid_value("box-shadow", "-4px 4px 0 0 green", "green -4px 4px 0px 0px"); +test_valid_value("box-shadow", "green -4px 4px 0 0", "green -4px 4px 0px 0px"); + +// inset only +test_valid_value("box-shadow", "4px -4px inset", "4px -4px inset"); +test_valid_value("box-shadow", "inset 4px -4px", "4px -4px inset"); +test_valid_value("box-shadow", "4px -4px 0 inset", "4px -4px 0px inset"); +test_valid_value("box-shadow", "inset 4px -4px 0", "4px -4px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 0 inset", "4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "inset 4px -4px 0 0", "4px -4px 0px 0px inset"); + +// color and inset +test_valid_value("box-shadow", "4px -4px green inset", "green 4px -4px inset"); +test_valid_value("box-shadow", "4px -4px inset green", "green 4px -4px inset"); +test_valid_value("box-shadow", "inset green 4px -4px", "green 4px -4px inset"); +test_valid_value("box-shadow", "green inset 4px -4px", "green 4px -4px inset"); +test_valid_value("box-shadow", "green 4px -4px inset", "green 4px -4px inset"); +test_valid_value("box-shadow", "inset 4px -4px green", "green 4px -4px inset"); +test_valid_value("box-shadow", "inset green 4px -4px 0", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "green inset 4px -4px 0", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 green inset", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 inset green", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "green 4px -4px 0 inset", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "inset 4px -4px 0 green", "green 4px -4px 0px inset"); +test_valid_value("box-shadow", "inset green 4px -4px 0 0", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "green inset 4px -4px 0 0", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 0 green inset", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "4px -4px 0 0 inset green", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "green 4px -4px 0 0 inset", "green 4px -4px 0px 0px inset"); +test_valid_value("box-shadow", "inset 4px -4px 0 0 green", "green 4px -4px 0px 0px inset"); + +// No parse-time range-checking for <blur-radius> given as a math function +// https://drafts.csswg.org/css-values-4/#calc-range +test_valid_value("box-shadow", "1px 1px calc(-1px)", "1px 1px calc(-1px)"); +test_valid_value("box-shadow", "1px 1px calc(1em - 2px)", "1px 1px calc(1em - 2px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/webkit-border-radius-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/webkit-border-radius-valid.html new file mode 100644 index 0000000000..cdf570b4e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/webkit-border-radius-valid.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Compatibility: parsing -webkit-border-radius with valid values</title> +<link rel="help" href="https://compat.spec.whatwg.org/#propdef--webkit-border-radius"> +<link rel="help" href="https://github.com/whatwg/compat/issues/133"> +<meta name="assert" content="-webkit-border-radius supports CSS Wide keywords and the full grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_valid_value("-webkit-border-radius", "initial"); +test_valid_value("-webkit-border-radius", "inherit"); +test_valid_value("-webkit-border-radius", "unset"); +test_valid_value("-webkit-border-radius", "revert"); + +test_valid_value("-webkit-border-radius", "1px"); +test_valid_value("-webkit-border-radius", "1px 5%", ["1px 5%", "1px / 5%"]); +test_valid_value("-webkit-border-radius", "1px 2% 3px"); +test_valid_value("-webkit-border-radius", "1px 2% 3px 4%"); +test_valid_value("-webkit-border-radius", "1px / 2px", ["1px 2px", "1px / 2px"]); +test_valid_value("-webkit-border-radius", "5em / 1px 2% 3px 4%"); +test_valid_value("-webkit-border-radius", "1px 2% / 3px 4px"); +test_valid_value("-webkit-border-radius", "1px 2px 3em / 1px 2px 3%"); +test_valid_value("-webkit-border-radius", "1px 2% / 2px 3em 4px 5em"); +test_valid_value("-webkit-border-radius", "1px 2% 3px 4% / 5em"); + +test_valid_value("-webkit-border-radius", "1px 1px 1px 2% / 1px 2% 1px 2%", "1px 1px 1px 2% / 1px 2%"); +test_valid_value("-webkit-border-radius", "1px 1px 1px 1px / 1px 1px 2% 1px", "1px / 1px 1px 2%"); +test_valid_value("-webkit-border-radius", "1px 1px 2% 2%"); +test_valid_value("-webkit-border-radius", "1px 2% 1px 1px"); +test_valid_value("-webkit-border-radius", "1px 2% 2% 2% / 1px 2% 3px 2%", "1px 2% 2% / 1px 2% 3px"); + +test_valid_value("-webkit-border-top-left-radius", "10px"); +test_valid_value("-webkit-border-top-right-radius", "20%"); +test_valid_value("-webkit-border-bottom-right-radius", "30px 40%"); +test_valid_value("-webkit-border-bottom-left-radius", "50% 60px"); + +// Some browsers treat '-webkit-border-radius: l1 l2' as 'border-radius: l1 / l2'. +// Regardless of whether this is done, ensure that there is round-tripping. +const target = document.getElementById("target"); +const style = target.style; +const cs = getComputedStyle(target); +test(function() { + style.cssText = "-webkit-border-radius: 1px 2px"; + const oldLonghands = [...style].map(p => p + ": " + style[p]); + const value = style.getPropertyValue("border-radius"); + assert_in_array(value, ["1px 2px", "1px / 2px"]); + assert_equals(cs.getPropertyValue("border-radius"), value); + style.cssText = "border-radius: " + value; + const newLonghands = [...style].map(p => p + ": " + style[p]); + assert_array_equals(newLonghands, oldLonghands); +}, "Serialize border-radius from -webkit-border-radius: 1px 2px"); +test(function() { + style.cssText = "border-radius: 1px 2px"; + const oldLonghands = [...style].map(p => p + ": " + style[p]); + const value = style.getPropertyValue("-webkit-border-radius"); + assert_in_array(value, ["1px 2px", "1px 2px 1px"]); + assert_equals(cs.getPropertyValue("-webkit-border-radius"), value); + style.cssText = "-webkit-border-radius: " + value; + const newLonghands = [...style].map(p => p + ": " + style[p]); + assert_array_equals(newLonghands, oldLonghands); +}, "Serialize -webkit-border-radius from border-radius: 1px 2px"); +</script> +</body> +</html> |