Bug 1510315 [wpt PR 14259] - [css-multicol] property parsing, computed values, a=testonly
authorEric Willigers <ewilligers@users.noreply.github.com>
Fri, 30 Nov 2018 18:04:23 +0000
changeset 450016 72976f097678b4ead5c5d4b9db41ecc16e712dd5
parent 450015 405ab8c4e34d50c9e6c4add5a3bcb054e8ac27b1
child 450017 92b27d218e1284a22121d9f8722cf412229d5090
push id110435
push userjames@hoppipolla.co.uk
push dateTue, 11 Dec 2018 15:53:47 +0000
treeherdermozilla-inbound@add833a587f5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1510315, 14259
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1510315 [wpt PR 14259] - [css-multicol] property parsing, computed values, a=testonly Automatic update from web-platform-tests [css-multicol] property parsing, computed values (#14259) Test that CSS Multi-column Layout properties parse exactly the grammar specified in the spec. https://drafts.csswg.org/css-multicol/ Test that computed values are as specified, with lengths made absolute. -- wpt-commits: fa234f78976ca7abea803fceb3eb53ad3a8603d2 wpt-pr: 14259
testing/web-platform/tests/css/css-multicol/parsing/column-count-computed.html
testing/web-platform/tests/css/css-multicol/parsing/column-count-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/column-count-valid.html
testing/web-platform/tests/css/css-multicol/parsing/column-fill-computed.html
testing/web-platform/tests/css/css-multicol/parsing/column-fill-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/column-fill-valid.html
testing/web-platform/tests/css/css-multicol/parsing/column-gap-computed.html
testing/web-platform/tests/css/css-multicol/parsing/column-gap-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/column-gap-valid.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-computed.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-valid.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-computed.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-valid.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-valid.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-computed.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-valid.html
testing/web-platform/tests/css/css-multicol/parsing/column-span-computed.html
testing/web-platform/tests/css/css-multicol/parsing/column-span-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/column-span-valid.html
testing/web-platform/tests/css/css-multicol/parsing/column-width-computed.html
testing/web-platform/tests/css/css-multicol/parsing/column-width-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/column-width-valid.html
testing/web-platform/tests/css/css-multicol/parsing/columns-invalid.html
testing/web-platform/tests/css/css-multicol/parsing/columns-valid.html
new file mode 100644
--- /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: getComputedValue().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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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: getComputedValue().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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-gap-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: getComputedValue().columnGap</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-gap">
+<meta name="assert" content="column-gap 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 {
+    font-size: 40px;
+  }
+</style>
+<script>
+test_computed_value("column-gap", "normal");
+
+test_computed_value("column-gap", "calc(10px + 0.5em)", "30px");
+test_computed_value("column-gap", "calc(10px - 0.5em)", "0px");
+test_computed_value("column-gap", "40%");
+test_computed_value("column-gap", "calc(50% + 60px)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-gap-invalid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-gap with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-gap">
+<meta name="assert" content="column-gap supports only the grammar '<length-percentage> | normal'.">
+<meta name="assert" content="column-gap rejects negative <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("column-gap", "auto");
+
+test_invalid_value("column-gap", "10");
+test_invalid_value("column-gap", "10px 20px");
+test_invalid_value("column-gap", "-1px");
+test_invalid_value("column-gap", "-10%");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/column-gap-valid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Multi-column Layout: parsing column-gap with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-gap">
+<meta name="assert" content="column-gap supports the full grammar '<length-percentage> | normal'.">
+<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-gap", "normal");
+
+test_valid_value("column-gap", "0", "0px");
+test_valid_value("column-gap", "1px");
+test_valid_value("column-gap", "calc(2em + 3ex)");
+test_valid_value("column-gap", "4%");
+test_valid_value("column-gap", "5vmin");
+</script>
+</body>
+</html>
new file mode 100644
--- /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: getComputedValue().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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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: getComputedValue().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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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: getComputedValue().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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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: getComputedValue().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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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: getComputedValue().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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/columns-invalid.html
@@ -0,0 +1,20 @@
+<!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>
+test_invalid_value("columns", "none");
+
+test_invalid_value("columns", "10px 20px");
+test_invalid_value("columns", "10 20");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-multicol/parsing/columns-valid.html
@@ -0,0 +1,17 @@
+<!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", "2 10px", "10px 2");
+</script>
+</body>
+</html>