summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-multicol/parsing
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-multicol/parsing
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-multicol/parsing')
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-count-computed.html22
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-count-invalid.html24
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-count-valid.html20
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-fill-computed.html20
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-fill-invalid.html18
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-fill-valid.html19
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-computed.html25
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-invalid.html20
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-valid.html19
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-computed.html37
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-invalid.html20
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-shorthand.html33
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-computed.html26
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-invalid.html18
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-valid.html25
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-valid.html21
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-computed.html44
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-invalid.html24
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-valid.html22
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-span-computed.html19
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-span-invalid.html18
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-span-valid.html18
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-width-computed.html26
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-width-invalid.html23
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/column-width-valid.html20
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/columns-invalid.html32
-rw-r--r--testing/web-platform/tests/css/css-multicol/parsing/columns-valid.html35
27 files changed, 648 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-count-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-count-computed.html
new file mode 100644
index 0000000000..702632d2dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-count-computed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: getComputedStyle().columnCount</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-count">
+<meta name="assert" content="column-count 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("column-count", "auto");
+
+test_computed_value("column-count", "1");
+test_computed_value("column-count", "234");
+test_computed_value("column-count", "calc(1 + 234)", "235");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-count-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-count-invalid.html
new file mode 100644
index 0000000000..4d76cdd85a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-count-invalid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-count with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-count">
+<meta name="assert" content="column-count supports only the grammar 'auto | <integer>'.">
+<meta name="assert" content="column-count rejects non-positive integers.">
+<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("column-count", "none");
+test_invalid_value("column-count", "2.5");
+test_invalid_value("column-count", "-1");
+test_invalid_value("column-count", "0");
+
+test_invalid_value("column-count", "auto 1");
+test_invalid_value("column-count", "1 234");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-count-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-count-valid.html
new file mode 100644
index 0000000000..f1d00e75d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-count-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-count with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-count">
+<meta name="assert" content="column-count supports the full grammar 'auto | <integer>'.">
+<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("column-count", "auto");
+
+test_valid_value("column-count", "1");
+test_valid_value("column-count", "234");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-fill-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-computed.html
new file mode 100644
index 0000000000..6a27f105c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: getComputedStyle().columnFill</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-fill">
+<meta name="assert" content="column-fill 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("column-fill", "auto");
+test_computed_value("column-fill", "balance");
+test_computed_value("column-fill", "balance-all");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-fill-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-invalid.html
new file mode 100644
index 0000000000..f055e9958b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-invalid.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-fill with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-fill">
+<meta name="assert" content="column-fill supports only the grammar 'auto | balance | balance-all'.">
+<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("column-fill", "none");
+test_invalid_value("column-fill", "auto balance");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-fill-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-valid.html
new file mode 100644
index 0000000000..ad5913d0bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-fill with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-fill">
+<meta name="assert" content="column-fill supports the full grammar 'auto | balance | balance-all'.">
+<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("column-fill", "auto");
+test_valid_value("column-fill", "balance");
+test_valid_value("column-fill", "balance-all");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-computed.html
new file mode 100644
index 0000000000..d5cc240751
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-computed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: getComputedStyle().columnRuleColor</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color">
+<meta name="assert" content="column-rule-color 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>
+<style>
+ #target {
+ color: lime;
+ }
+</style>
+<script>
+test_computed_value("column-rule-color", "currentcolor", "rgb(0, 255, 0)");
+
+test_computed_value("column-rule-color", "red", "rgb(255, 0, 0)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-invalid.html
new file mode 100644
index 0000000000..015defb756
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-rule-color with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color">
+<meta name="assert" content="column-rule-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("column-rule-color", "auto");
+
+test_invalid_value("column-rule-color", "green blue");
+test_invalid_value("column-rule-color", "green, blue");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-valid.html
new file mode 100644
index 0000000000..99ad7adbdc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-rule-color with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color">
+<meta name="assert" content="column-rule-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("column-rule-color", "currentcolor");
+
+test_valid_value("column-rule-color", "red");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-computed.html
new file mode 100644
index 0000000000..96ba734d89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-computed.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: getComputedStyle().columnRule</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
+<meta name="assert" content="column-rule 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>
+<style>
+ #reference {
+ column-rule-style: dotted; /* Avoid column-rule-width computed style 0px */
+ column-rule-width: medium;
+ }
+ #target {
+ color: lime;
+ }
+</style>
+</head>
+<body>
+<div id="reference"></div>
+<div id="target"></div>
+<script>
+const currentColor = 'rgb(0, 255, 0)';
+const mediumWidth = getComputedStyle(document.getElementById('reference')).columnRuleWidth; // e.g. 3px
+
+test_computed_value("column-rule", "10px", "0px none " + currentColor);
+test_computed_value("column-rule", "dotted", mediumWidth + " dotted " + currentColor);
+test_computed_value("column-rule", "0px none rgb(255, 0, 255)");
+test_computed_value("column-rule", "10px dotted rgb(255, 0, 255)");
+
+test_computed_value("column-rule", "medium hidden currentcolor", "0px hidden " + currentColor);
+test_computed_value("column-rule", "medium solid currentcolor", mediumWidth + " solid " + currentColor);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-invalid.html
new file mode 100644
index 0000000000..e9945ec774
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-rule with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
+<meta name="assert" content="column-rule supports only the grammar '<column-rule-width> || <column-rule-style> || <column-rule-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("column-rule", "reverse");
+test_invalid_value("column-rule", "10");
+
+test_invalid_value("column-rule", "red medium green");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-shorthand.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-shorthand.html
new file mode 100644
index 0000000000..68e7582fcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-shorthand.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: column-rule sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
+<meta name="assert" content="column-rule supports the full grammar '<column-rule-width> || <column-rule-style> || <column-rule-color>'.">
+<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('column-rule', 'medium dotted green', {
+ 'column-rule-width': 'medium',
+ 'column-rule-style': 'dotted',
+ 'column-rule-color': 'green'
+});
+
+test_shorthand_value('column-rule', '100px', {
+ 'column-rule-width': '100px',
+ 'column-rule-style': 'none',
+ 'column-rule-color': 'currentcolor'
+});
+
+test_shorthand_value('column-rule', 'blue', {
+ 'column-rule-width': 'medium',
+ 'column-rule-style': 'none',
+ 'column-rule-color': 'blue'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-computed.html
new file mode 100644
index 0000000000..277750ef36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-computed.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: getComputedStyle().columnRuleStyle</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style">
+<meta name="assert" content="column-rule-style 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("column-rule-style", "none");
+test_computed_value("column-rule-style", "hidden");
+test_computed_value("column-rule-style", "dotted");
+test_computed_value("column-rule-style", "dashed");
+test_computed_value("column-rule-style", "solid");
+test_computed_value("column-rule-style", "double");
+test_computed_value("column-rule-style", "groove");
+test_computed_value("column-rule-style", "ridge");
+test_computed_value("column-rule-style", "inset");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-invalid.html
new file mode 100644
index 0000000000..db367c273f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-invalid.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-rule-style with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style">
+<meta name="assert" content="column-rule-style supports only the <line-style> grammar 'none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset'.">
+<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("column-rule-style", "auto");
+test_invalid_value("column-rule-style", "double dashed");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-valid.html
new file mode 100644
index 0000000000..6f79c0a168
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-valid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-rule-style with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style">
+<meta name="assert" content="column-rule-style supports the full <line-style> grammar 'none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset'.">
+<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("column-rule-style", "none");
+test_valid_value("column-rule-style", "hidden");
+test_valid_value("column-rule-style", "dotted");
+test_valid_value("column-rule-style", "dashed");
+test_valid_value("column-rule-style", "solid");
+test_valid_value("column-rule-style", "double");
+test_valid_value("column-rule-style", "groove");
+test_valid_value("column-rule-style", "ridge");
+test_valid_value("column-rule-style", "inset");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-valid.html
new file mode 100644
index 0000000000..473d8f075c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-rule with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
+<meta name="assert" content="column-rule supports the full grammar '<column-rule-width> || <column-rule-style> || <column-rule-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("column-rule", "10px");
+test_valid_value("column-rule", "dotted");
+test_valid_value("column-rule", "red");
+
+test_valid_value("column-rule", "currentcolor hidden medium", "medium hidden currentcolor");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-computed.html
new file mode 100644
index 0000000000..3061f59e23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-computed.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: getComputedStyle().columnRuleWidth</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width">
+<meta name="assert" content="column-rule-width computed value is absolute length.">
+<meta name="assert" content="column-rule-width computed value is 0 if the column rule 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>
+</head>
+<body>
+<div id="target"></div>
+<style>
+ #target {
+ font-size: 40px;
+ column-rule-style: dotted;
+ }
+</style>
+<script>
+test_computed_value("column-rule-width", "calc(10px + 0.5em)", "30px");
+test_computed_value("column-rule-width", "calc(10px - 0.5em)", "0px");
+
+// thin, medium, thick computed values not yet tested
+
+test(() => {
+ target.style.columnRuleWidth = '10px';
+ assert_equals(getComputedStyle(target).columnRuleWidth, '10px');
+
+ target.style.columnRuleStyle = 'none';
+ assert_equals(getComputedStyle(target).columnRuleWidth, '0px');
+
+ target.style.columnRuleStyle = 'outset';
+ assert_equals(getComputedStyle(target).columnRuleWidth, '10px');
+
+ target.style.columnRuleStyle = 'hidden';
+ assert_equals(getComputedStyle(target).columnRuleWidth, '0px');
+
+ target.style.columnRuleStyle = '';
+}, 'column-rule-width is 0 when column-rule-style is none or hidden');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-invalid.html
new file mode 100644
index 0000000000..0bdbbecb8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-invalid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-rule-width with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width">
+<meta name="assert" content="column-rule-width supports only the <line-width> grammar '<length> | thin | medium | thick'.">
+<meta name="assert" content="column-rule-width rejects negative lengths.">
+<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("column-rule-width", "auto");
+
+test_invalid_value("column-rule-width", "10");
+test_invalid_value("column-rule-width", "-20px");
+test_invalid_value("column-rule-width", "30%");
+
+test_invalid_value("column-rule-width", "medium 40px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-valid.html
new file mode 100644
index 0000000000..1be37fc757
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-rule-width with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width">
+<meta name="assert" content="column-rule-width supports the full <line-width> grammar '<length> | thin | medium | thick'.">
+<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("column-rule-width", "thin");
+test_valid_value("column-rule-width", "medium");
+test_valid_value("column-rule-width", "thick");
+
+test_valid_value("column-rule-width", "0", "0px");
+test_valid_value("column-rule-width", "10px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-span-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-span-computed.html
new file mode 100644
index 0000000000..3b6bcf15cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-span-computed.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: getComputedStyle().columnSpan</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-span">
+<meta name="assert" content="column-span 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("column-span", "none");
+test_computed_value("column-span", "all");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-span-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-span-invalid.html
new file mode 100644
index 0000000000..c412922f05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-span-invalid.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-span with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-span">
+<meta name="assert" content="column-span supports only the grammar 'none | all'.">
+<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("column-span", "auto");
+test_invalid_value("column-span", "none all");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-span-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-span-valid.html
new file mode 100644
index 0000000000..005b8c31b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-span-valid.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-span with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-span">
+<meta name="assert" content="column-span supports the full grammar 'none | all'.">
+<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("column-span", "none");
+test_valid_value("column-span", "all");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-width-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-width-computed.html
new file mode 100644
index 0000000000..328d47f8a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-width-computed.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: getComputedStyle().columnWidth</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-width">
+<meta name="assert" content="column-width computed value is the keyword auto or an absolute length.">
+<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>
+<style>
+ #target {
+ font-size: 40px;
+ }
+</style>
+<script>
+test_computed_value("column-width", "auto");
+
+test_computed_value("column-width", "calc(10px + 0.5em)", "30px");
+test_computed_value("column-width", "calc(10px - 0.5em)", "0px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-width-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-width-invalid.html
new file mode 100644
index 0000000000..207a78e8cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-width-invalid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-width with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-width">
+<meta name="assert" content="column-width supports only the grammar 'auto | <length>'.">
+<meta name="assert" content="column-width rejects negative lengths.">
+<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("column-width", "none");
+test_invalid_value("column-width", "10");
+test_invalid_value("column-width", "-20px");
+test_invalid_value("column-width", "30%");
+
+test_invalid_value("column-width", "auto 40px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-width-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-width-valid.html
new file mode 100644
index 0000000000..e35a6ebf32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-width-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-width with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-width">
+<meta name="assert" content="column-width supports the full grammar 'auto | <length>'.">
+<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("column-width", "auto");
+
+test_valid_value("column-width", "0", "0px");
+test_valid_value("column-width", "10px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/columns-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/columns-invalid.html
new file mode 100644
index 0000000000..dc9b27bf37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/columns-invalid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing columns with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns">
+<meta name="assert" content="columns supports only the grammar '<column-width> || <column-count>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// Invalid keyword.
+test_invalid_value("columns", "none");
+
+// Only column-count can be unitless.
+test_invalid_value("columns", "10px 20px");
+test_invalid_value("columns", "10 20");
+
+// column-count needs to be 1 or more.
+test_invalid_value("columns", "0 0");
+test_invalid_value("columns", "0 7px");
+
+// Excess keywords.
+test_invalid_value("columns", "auto auto auto");
+test_invalid_value("columns", "10em auto auto");
+test_invalid_value("columns", "initial initial");
+test_invalid_value("columns", "inherit inherit");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-multicol/parsing/columns-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/columns-valid.html
new file mode 100644
index 0000000000..7b643e2d9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/columns-valid.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing columns with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns">
+<meta name="assert" content="columns supports the full grammar '<column-width> || <column-count>'.">
+<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("columns", "auto 3", "3");
+test_valid_value("columns", "auto 10em", "10em");
+test_valid_value("columns", "3 auto", "3");
+test_valid_value("columns", "10em auto", "10em");
+test_valid_value("columns", "2 10px", "10px 2");
+test_valid_value("columns", "10px 2");
+test_valid_value("columns", "auto");
+test_valid_value("columns", "auto auto", "auto");
+test_valid_value("columns", "7");
+test_valid_value("columns", "7em");
+
+// Unitless zero is allowed for column-width.
+test_valid_value("columns", "0 1", "0px 1");
+test_valid_value("columns", "1 0", "0px 1");
+test_valid_value("columns", "0px 1");
+
+// CSS-wide keywords.
+test_valid_value("columns", "initial");
+test_valid_value("columns", "inherit");
+</script>
+</body>
+</html>