diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-multicol/parsing')
27 files changed, 649 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..30da6380fc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-valid.html @@ -0,0 +1,22 @@ +<!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", "hidden"); +test_valid_value("column-rule", "currentcolor none medium", "medium"); +</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> |