columns-invalid.html

Enable keyboard shortcuts

<!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">

<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#propdef-columns">

<meta name="assert" content="columns supports only the grammar '[ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?'.">

<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");

// With "/ <'column-height'>"

test_invalid_value("columns", "/ 100px");

test_invalid_value("columns", "/ auto");

test_invalid_value("columns", "/");

test_invalid_value("columns", "auto /");

test_invalid_value("columns", "100px /");

test_invalid_value("columns", "2 /");

test_invalid_value("columns", "2 100px /");

test_invalid_value("columns", "100px 2 /");

</script>

</body>

</html>