From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../parsing/background-attachment-computed.html    | 21 +++++++
 .../parsing/background-attachment-invalid.html     | 19 ++++++
 .../parsing/background-attachment-valid.html       | 19 ++++++
 .../parsing/background-clip-computed.html          | 23 +++++++
 .../parsing/background-clip-invalid.html           | 21 +++++++
 .../parsing/background-clip-valid.html             | 22 +++++++
 .../parsing/background-color-computed.html         | 30 ++++++++++
 .../parsing/background-color-invalid.html          | 20 +++++++
 .../parsing/background-color-valid.html            | 28 +++++++++
 .../parsing/background-computed.html               | 70 ++++++++++++++++++++++
 .../parsing/background-image-computed.sub.html     | 63 +++++++++++++++++++
 .../parsing/background-image-invalid.html          | 34 +++++++++++
 .../parsing/background-image-valid.html            | 39 ++++++++++++
 .../parsing/background-invalid.html                | 22 +++++++
 .../parsing/background-origin-computed.html        | 23 +++++++
 .../parsing/background-origin-invalid.html         | 21 +++++++
 .../parsing/background-origin-valid.html           | 22 +++++++
 .../parsing/background-position-computed.html      | 53 ++++++++++++++++
 .../parsing/background-position-invalid.html       | 28 +++++++++
 .../parsing/background-position-valid.html         | 48 +++++++++++++++
 .../parsing/background-position-x-computed.html    | 39 ++++++++++++
 .../parsing/background-position-x-invalid.html     | 25 ++++++++
 .../parsing/background-position-x-valid.html       | 31 ++++++++++
 .../parsing/background-position-y-computed.html    | 39 ++++++++++++
 .../parsing/background-position-y-invalid.html     | 25 ++++++++
 .../parsing/background-position-y-valid.html       | 31 ++++++++++
 .../parsing/background-repeat-computed.html        | 30 ++++++++++
 .../parsing/background-repeat-invalid.html         | 20 +++++++
 .../parsing/background-repeat-valid.html           | 21 +++++++
 .../background-shorthand-serialization.html        | 46 ++++++++++++++
 .../parsing/background-size-computed.html          | 35 +++++++++++
 .../parsing/background-size-invalid.html           | 22 +++++++
 .../parsing/background-size-valid.html             | 27 +++++++++
 .../css-backgrounds/parsing/background-valid.html  | 49 +++++++++++++++
 .../parsing/border-color-computed.html             | 38 ++++++++++++
 .../parsing/border-color-invalid.html              | 22 +++++++
 .../parsing/border-color-shorthand.html            | 43 +++++++++++++
 .../parsing/border-color-valid.html                | 26 ++++++++
 .../parsing/border-image-invalid.html              | 40 +++++++++++++
 .../parsing/border-image-outset-computed.html      | 27 +++++++++
 .../parsing/border-image-outset-invalid.html       | 25 ++++++++
 .../parsing/border-image-outset-valid.html         | 20 +++++++
 .../parsing/border-image-repeat-computed.html      | 20 +++++++
 .../parsing/border-image-repeat-invalid.html       | 20 +++++++
 .../parsing/border-image-repeat-valid.html         | 20 +++++++
 .../parsing/border-image-shorthand.sub.html        | 55 +++++++++++++++++
 .../parsing/border-image-slice-computed.html       | 23 +++++++
 .../parsing/border-image-slice-invalid.html        | 27 +++++++++
 .../parsing/border-image-slice-valid.html          | 23 +++++++
 .../parsing/border-image-source-computed.sub.html  | 37 ++++++++++++
 .../parsing/border-image-source-invalid.html       | 20 +++++++
 .../parsing/border-image-source-valid.html         | 21 +++++++
 .../parsing/border-image-valid.html                | 59 ++++++++++++++++++
 .../parsing/border-image-width-computed.html       | 34 +++++++++++
 .../parsing/border-image-width-invalid.html        | 24 ++++++++
 .../parsing/border-image-width-valid.html          | 23 +++++++
 .../css-backgrounds/parsing/border-invalid.html    | 19 ++++++
 .../parsing/border-radius-computed.html            | 39 ++++++++++++
 .../parsing/border-radius-invalid.html             | 29 +++++++++
 .../parsing/border-radius-valid.html               | 42 +++++++++++++
 .../css-backgrounds/parsing/border-shorthand.html  | 66 ++++++++++++++++++++
 .../parsing/border-style-computed.html             | 26 ++++++++
 .../parsing/border-style-invalid.html              | 19 ++++++
 .../parsing/border-style-shorthand.html            | 43 +++++++++++++
 .../parsing/border-style-valid.html                | 26 ++++++++
 .../css/css-backgrounds/parsing/border-valid.html  | 23 +++++++
 .../parsing/border-width-computed.html             | 57 ++++++++++++++++++
 .../parsing/border-width-invalid.html              | 20 +++++++
 .../parsing/border-width-shorthand.html            | 43 +++++++++++++
 .../parsing/border-width-valid.html                | 24 ++++++++
 .../parsing/box-shadow-computed.html               | 29 +++++++++
 .../parsing/box-shadow-invalid.html                | 66 ++++++++++++++++++++
 .../css-backgrounds/parsing/box-shadow-valid.html  | 67 +++++++++++++++++++++
 .../parsing/webkit-border-radius-valid.html        | 70 ++++++++++++++++++++++
 74 files changed, 2421 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-attachment-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-clip-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-color-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-color-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-color-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-image-computed.sub.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-image-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-origin-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-position-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-position-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-position-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-position-x-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-repeat-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-shorthand-serialization.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-size-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-size-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-size-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/background-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-color-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-color-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-color-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-color-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-outset-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-repeat-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-shorthand.sub.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-slice-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-computed.sub.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-source-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-image-width-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-radius-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-style-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-style-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-style-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-style-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-width-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-width-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-width-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/border-width-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-computed.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/box-shadow-valid.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/parsing/webkit-border-radius-valid.html

(limited to 'testing/web-platform/tests/css/css-backgrounds/parsing')

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>
-- 
cgit v1.2.3