diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-align/parsing')
40 files changed, 1384 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/parsing/align-content-computed.html b/testing/web-platform/tests/css/css-align/parsing/align-content-computed.html new file mode 100644 index 0000000000..8b5465c6b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-content-computed.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().alignContent</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<meta name="assert" content="align-content 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("align-content", "normal"); + +test_computed_value("align-content", "baseline"); +test_computed_value("align-content", "last baseline"); + +test_computed_value("align-content", "space-between"); +test_computed_value("align-content", "space-around"); +test_computed_value("align-content", "space-evenly"); +test_computed_value("align-content", "stretch"); + +test_computed_value("align-content", "center"); +test_computed_value("align-content", "start"); +test_computed_value("align-content", "end"); +test_computed_value("align-content", "flex-start"); +test_computed_value("align-content", "flex-end"); +test_computed_value("align-content", "unsafe end"); +test_computed_value("align-content", "safe flex-start"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-content-invalid.html b/testing/web-platform/tests/css/css-align/parsing/align-content-invalid.html new file mode 100644 index 0000000000..ae244389bf --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-content-invalid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-content with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<meta name="assert" content="align-content supports only the grammar 'normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("align-content", "auto"); +test_invalid_value("align-content", "baseline last"); +test_invalid_value("align-content", "center baseline"); +test_invalid_value("align-content", "first"); +test_invalid_value("align-content", "flex-start flex-end"); +test_invalid_value("align-content", "last"); +test_invalid_value("align-content", "left"); +test_invalid_value("align-content", "legacy center"); +test_invalid_value("align-content", "legacy left"); +test_invalid_value("align-content", "legacy"); +test_invalid_value("align-content", "normal baseline"); +test_invalid_value("align-content", "right legacy"); +test_invalid_value("align-content", "safe self-end"); +test_invalid_value("align-content", "safe"); +test_invalid_value("align-content", "self-end unsafe"); +test_invalid_value("align-content", "self-start"); +test_invalid_value("align-content", "start safe"); +test_invalid_value("align-content", "unsafe right"); +test_invalid_value("align-content", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-content-valid.html b/testing/web-platform/tests/css/css-align/parsing/align-content-valid.html new file mode 100644 index 0000000000..46c4724516 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-content-valid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-content with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<meta name="assert" content="align-content supports the full grammar 'normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("align-content", "normal"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("align-content", "baseline"); +test_valid_value("align-content", "first baseline", "baseline"); +test_valid_value("align-content", "last baseline"); + +// <content-distribution> = space-between | space-around | space-evenly | stretch +test_valid_value("align-content", "space-between"); +test_valid_value("align-content", "space-around"); +test_valid_value("align-content", "space-evenly"); +test_valid_value("align-content", "stretch"); + +// <overflow-position>? <content-position> +// <overflow-position> = unsafe | safe +// <content-position> = center | start | end | flex-start | flex-end +test_valid_value("align-content", "center"); +test_valid_value("align-content", "start"); +test_valid_value("align-content", "end"); +test_valid_value("align-content", "flex-start"); +test_valid_value("align-content", "flex-end"); +test_valid_value("align-content", "unsafe end"); +test_valid_value("align-content", "safe flex-start"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-items-computed.html b/testing/web-platform/tests/css/css-align/parsing/align-items-computed.html new file mode 100644 index 0000000000..23d4c2fd0d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-items-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().alignItems</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<meta name="assert" content="align-items 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("align-items", "normal"); +test_computed_value("align-items", "stretch"); + +test_computed_value("align-items", "baseline"); +test_computed_value("align-items", "last baseline"); + +test_computed_value("align-items", "center"); +test_computed_value("align-items", "start"); +test_computed_value("align-items", "end"); +test_computed_value("align-items", "self-start"); +test_computed_value("align-items", "self-end"); +test_computed_value("align-items", "flex-start"); +test_computed_value("align-items", "flex-end"); +test_computed_value("align-items", "unsafe center"); +test_computed_value("align-items", "safe self-end"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-items-invalid.html b/testing/web-platform/tests/css/css-align/parsing/align-items-invalid.html new file mode 100644 index 0000000000..8e329d50e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-items-invalid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-items with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<meta name="assert" content="align-items supports only the grammar 'normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("align-items", "auto"); +test_invalid_value("align-items", "baseline last"); +test_invalid_value("align-items", "center baseline"); +test_invalid_value("align-items", "first"); +test_invalid_value("align-items", "flex-start flex-end"); +test_invalid_value("align-items", "last"); +test_invalid_value("align-items", "left"); +test_invalid_value("align-items", "legacy center"); +test_invalid_value("align-items", "legacy left"); +test_invalid_value("align-items", "legacy"); +test_invalid_value("align-items", "normal baseline"); +test_invalid_value("align-items", "right legacy"); +test_invalid_value("align-items", "safe"); +test_invalid_value("align-items", "self-end unsafe"); +test_invalid_value("align-items", "space-around"); +test_invalid_value("align-items", "space-between"); +test_invalid_value("align-items", "space-evenly"); +test_invalid_value("align-items", "start safe"); +test_invalid_value("align-items", "unsafe right"); +test_invalid_value("align-items", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-items-valid.html b/testing/web-platform/tests/css/css-align/parsing/align-items-valid.html new file mode 100644 index 0000000000..e88845b962 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-items-valid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-items with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<meta name="assert" content="align-items supports the full grammar 'normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("align-items", "normal"); +test_valid_value("align-items", "stretch"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("align-items", "baseline"); +test_valid_value("align-items", "first baseline", "baseline"); +test_valid_value("align-items", "last baseline"); + +// <overflow-position>? <self-position> +// <overflow-position> = unsafe | safe +// <self-position> = center | start | end | self-start | self-end | flex-start | flex-end +test_valid_value("align-items", "center"); +test_valid_value("align-items", "start"); +test_valid_value("align-items", "end"); +test_valid_value("align-items", "self-start"); +test_valid_value("align-items", "self-end"); +test_valid_value("align-items", "flex-start"); +test_valid_value("align-items", "flex-end"); +test_valid_value("align-items", "unsafe center"); +test_valid_value("align-items", "safe self-end"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-self-computed.html b/testing/web-platform/tests/css/css-align/parsing/align-self-computed.html new file mode 100644 index 0000000000..e61a88a72e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-self-computed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().alignSelf</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="align-self 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("align-self", "auto"); +test_computed_value("align-self", "normal"); +test_computed_value("align-self", "stretch"); + +test_computed_value("align-self", "baseline"); +test_computed_value("align-self", "last baseline"); + +test_computed_value("align-self", "center"); +test_computed_value("align-self", "start"); +test_computed_value("align-self", "end"); +test_computed_value("align-self", "self-start"); +test_computed_value("align-self", "self-end"); +test_computed_value("align-self", "flex-start"); +test_computed_value("align-self", "flex-end"); +test_computed_value("align-self", "unsafe center"); +test_computed_value("align-self", "safe self-end"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-self-invalid.html b/testing/web-platform/tests/css/css-align/parsing/align-self-invalid.html new file mode 100644 index 0000000000..27b0250026 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-self-invalid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-self with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="align-self supports only the grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("align-self", "baseline last"); +test_invalid_value("align-self", "center baseline"); +test_invalid_value("align-self", "first"); +test_invalid_value("align-self", "flex-start flex-end"); +test_invalid_value("align-self", "last"); +test_invalid_value("align-self", "left"); +test_invalid_value("align-self", "legacy center"); +test_invalid_value("align-self", "legacy left"); +test_invalid_value("align-self", "legacy"); +test_invalid_value("align-self", "normal baseline"); +test_invalid_value("align-self", "right legacy"); +test_invalid_value("align-self", "safe"); +test_invalid_value("align-self", "self-end unsafe"); +test_invalid_value("align-self", "space-around"); +test_invalid_value("align-self", "space-between"); +test_invalid_value("align-self", "space-evenly"); +test_invalid_value("align-self", "start safe"); +test_invalid_value("align-self", "unsafe right"); +test_invalid_value("align-self", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-self-valid.html b/testing/web-platform/tests/css/css-align/parsing/align-self-valid.html new file mode 100644 index 0000000000..25ea093b20 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-self-valid.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-self with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="align-self supports the full grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("align-self", "auto"); +test_valid_value("align-self", "normal"); +test_valid_value("align-self", "stretch"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("align-self", "baseline"); +test_valid_value("align-self", "first baseline", "baseline"); +test_valid_value("align-self", "last baseline"); + +// <overflow-position>? <self-position> +// <overflow-position> = unsafe | safe +// <self-position> = center | start | end | self-start | self-end | flex-start | flex-end +test_valid_value("align-self", "center"); +test_valid_value("align-self", "start"); +test_valid_value("align-self", "end"); +test_valid_value("align-self", "self-start"); +test_valid_value("align-self", "self-end"); +test_valid_value("align-self", "flex-start"); +test_valid_value("align-self", "flex-end"); +test_valid_value("align-self", "unsafe center"); +test_valid_value("align-self", "safe self-end"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/column-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/column-gap-computed.html new file mode 100644 index 0000000000..01e04b0499 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/column-gap-computed.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().columnGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#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> diff --git a/testing/web-platform/tests/css/css-align/parsing/column-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/column-gap-invalid.html new file mode 100644 index 0000000000..181e004e7c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/column-gap-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing column-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#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> diff --git a/testing/web-platform/tests/css/css-align/parsing/column-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/column-gap-valid.html new file mode 100644 index 0000000000..4be3b50989 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/column-gap-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing column-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#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> diff --git a/testing/web-platform/tests/css/css-align/parsing/gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/gap-computed.html new file mode 100644 index 0000000000..b93b237813 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/gap-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().gap</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap"> +<meta name="assert" content="gap computed value is a pair of keyword or <length-percentage> values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("gap", "normal"); +test_computed_value("gap", "10px"); +test_computed_value("gap", "20%"); +test_computed_value("gap", "calc(20% + 10px)"); +test_computed_value("gap", "calc(-0.5em + 10px)", "0px"); +test_computed_value("gap", "calc(0.5em + 10px)", "30px"); + +test_computed_value("gap", "normal 10px"); +test_computed_value("gap", "10px 20%"); +test_computed_value("gap", "20% calc(20% + 10px)"); +test_computed_value("gap", "calc(20% + 10px) normal"); + +test_computed_value("gap", "calc(-0.5em + 10px) calc(0.5em + 10px)", "0px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/gap-invalid.html new file mode 100644 index 0000000000..c2eae8f7aa --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/gap-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap"> +<meta name="assert" content="gap supports only the grammar '<row-gap> <column-gap>?'."> +<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("gap", "auto"); +test_invalid_value("gap", "-10px"); + +test_invalid_value("gap", "10px 20% 30px"); +test_invalid_value("gap", "normal 10px normal"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html new file mode 100644 index 0000000000..52397fb744 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: gap sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap"> +<meta name="assert" content="row-gap supports the full grammar '<row-gap> <column-gap>?'."> +<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('gap', 'normal', { + 'row-gap': 'normal', + 'column-gap': 'normal' +}); + +test_shorthand_value('gap', '10px 20%', { + 'row-gap': '10px', + 'column-gap': '20%' +}); + +test_shorthand_value('gap', '10px normal', { + 'row-gap': '10px', + 'column-gap': 'normal' +}); + +test_shorthand_value('gap', 'normal calc(20% + 10px)', { + 'row-gap': 'normal', + 'column-gap': 'calc(20% + 10px)' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/gap-valid.html new file mode 100644 index 0000000000..3104e3fbbd --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/gap-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap"> +<meta name="assert" content="row-gap supports the full grammar '<row-gap> <column-gap>?'."> +<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("gap", "normal normal", "normal"); +test_valid_value("gap", "10px 10px", "10px"); +test_valid_value("gap", "20% 20%", "20%"); +test_valid_value("gap", "calc(20% + 10px) calc(20% + 10px)", "calc(20% + 10px)"); + +test_valid_value("gap", "normal 10px"); +test_valid_value("gap", "10px 20%"); +test_valid_value("gap", "20% calc(20% + 10px)"); +test_valid_value("gap", "calc(20% + 10px) 0px"); +test_valid_value("gap", "0px normal"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-content-computed.html b/testing/web-platform/tests/css/css-align/parsing/justify-content-computed.html new file mode 100644 index 0000000000..b04d2db142 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-content-computed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().justifyContent</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<meta name="assert" content="justify-content 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("justify-content", "normal"); + +test_computed_value("justify-content", "space-between"); +test_computed_value("justify-content", "space-around"); +test_computed_value("justify-content", "space-evenly"); +test_computed_value("justify-content", "stretch"); + +test_computed_value("justify-content", "center"); +test_computed_value("justify-content", "start"); +test_computed_value("justify-content", "end"); +test_computed_value("justify-content", "flex-start"); +test_computed_value("justify-content", "flex-end"); +test_computed_value("justify-content", "unsafe end"); +test_computed_value("justify-content", "safe flex-start"); +test_computed_value("justify-content", "left"); +test_computed_value("justify-content", "unsafe right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-content-invalid.html b/testing/web-platform/tests/css/css-align/parsing/justify-content-invalid.html new file mode 100644 index 0000000000..47f3a59a7d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-content-invalid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-content with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<meta name="assert" content="justify-content supports only the grammar 'normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]'."> +<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("justify-content", "auto"); +test_invalid_value("justify-content", "baseline last"); +test_invalid_value("justify-content", "baseline"); +test_invalid_value("justify-content", "center baseline"); +test_invalid_value("justify-content", "first baseline"); +test_invalid_value("justify-content", "first"); +test_invalid_value("justify-content", "flex-start flex-end"); +test_invalid_value("justify-content", "last baseline"); +test_invalid_value("justify-content", "last"); +test_invalid_value("justify-content", "legacy center"); +test_invalid_value("justify-content", "legacy left"); +test_invalid_value("justify-content", "legacy"); +test_invalid_value("justify-content", "normal baseline"); +test_invalid_value("justify-content", "right legacy"); +test_invalid_value("justify-content", "safe self-end"); +test_invalid_value("justify-content", "safe"); +test_invalid_value("justify-content", "self-end unsafe"); +test_invalid_value("justify-content", "self-start"); +test_invalid_value("justify-content", "start safe"); +test_invalid_value("justify-content", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-content-valid.html b/testing/web-platform/tests/css/css-align/parsing/justify-content-valid.html new file mode 100644 index 0000000000..4372f6fdc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-content-valid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-content with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<meta name="assert" content="justify-content supports the full grammar 'normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]'."> +<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("justify-content", "normal"); + +// <content-distribution> = space-between | space-around | space-evenly | stretch +test_valid_value("justify-content", "space-between"); +test_valid_value("justify-content", "space-around"); +test_valid_value("justify-content", "space-evenly"); +test_valid_value("justify-content", "stretch"); + +// <overflow-position>? [ <content-position> | left | right ] +// <overflow-position> = unsafe | safe +// <content-position> = center | start | end | flex-start | flex-end +test_valid_value("justify-content", "center"); +test_valid_value("justify-content", "start"); +test_valid_value("justify-content", "end"); +test_valid_value("justify-content", "flex-start"); +test_valid_value("justify-content", "flex-end"); +test_valid_value("justify-content", "unsafe end"); +test_valid_value("justify-content", "safe flex-start"); +test_valid_value("justify-content", "left"); +test_valid_value("justify-content", "unsafe right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-items-computed.html b/testing/web-platform/tests/css/css-align/parsing/justify-items-computed.html new file mode 100644 index 0000000000..b93f2a381b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-items-computed.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().justifyItems</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<meta name="assert" content="justify-items computed value is as specified."> +<meta name="assert" content="justify-items legacy depends on inherited value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +test_computed_value("justify-items", "normal"); +test_computed_value("justify-items", "stretch"); + +test_computed_value("justify-items", "baseline"); +test_computed_value("justify-items", "last baseline"); + +test_computed_value("justify-items", "center"); +test_computed_value("justify-items", "start"); +test_computed_value("justify-items", "end"); +test_computed_value("justify-items", "self-start"); +test_computed_value("justify-items", "self-end"); +test_computed_value("justify-items", "flex-start"); +test_computed_value("justify-items", "flex-end"); +test_computed_value("justify-items", "unsafe center"); +test_computed_value("justify-items", "safe self-end"); +test_computed_value("justify-items", "right"); +test_computed_value("justify-items", "safe left"); + +test_computed_value("justify-items", "legacy", "normal"); +test_computed_value("justify-items", "legacy left"); +test_computed_value("justify-items", "legacy right"); +test_computed_value("justify-items", "legacy center"); + +test(() => { + const container = document.getElementById('container'); + const target = document.getElementById('target'); + target.style.justifyItems = 'legacy'; + container.style.justifyItems = 'legacy left'; + assert_equals(getComputedStyle(target).justifyItems, 'legacy left'); + container.style.justifyItems = 'legacy right'; + assert_equals(getComputedStyle(target).justifyItems, 'legacy right'); + container.style.justifyItems = 'legacy center'; + assert_equals(getComputedStyle(target).justifyItems, 'legacy center'); + container.style.justifyItems = 'flex-end'; + assert_equals(getComputedStyle(target).justifyItems, 'normal'); +}, 'justify-items legacy depends on inherited value'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-items-invalid.html b/testing/web-platform/tests/css/css-align/parsing/justify-items-invalid.html new file mode 100644 index 0000000000..87d03cb3d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-items-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-items with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<meta name="assert" content="justify-items supports only the grammar 'normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]'."> +<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("justify-items", "auto"); +test_invalid_value("justify-items", "baseline last"); +test_invalid_value("justify-items", "center baseline"); +test_invalid_value("justify-items", "first"); +test_invalid_value("justify-items", "flex-start flex-end"); +test_invalid_value("justify-items", "last"); +test_invalid_value("justify-items", "normal baseline"); +test_invalid_value("justify-items", "safe"); +test_invalid_value("justify-items", "self-end unsafe"); +test_invalid_value("justify-items", "space-around"); +test_invalid_value("justify-items", "space-between"); +test_invalid_value("justify-items", "space-evenly"); +test_invalid_value("justify-items", "start safe"); +test_invalid_value("justify-items", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-items-valid.html b/testing/web-platform/tests/css/css-align/parsing/justify-items-valid.html new file mode 100644 index 0000000000..51496554cb --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-items-valid.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-items with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<meta name="assert" content="justify-items supports the full grammar 'normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]'."> +<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("justify-items", "normal"); +test_valid_value("justify-items", "stretch"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("justify-items", "baseline"); +test_valid_value("justify-items", "first baseline", "baseline"); +test_valid_value("justify-items", "last baseline"); + +// <overflow-position>? [ <self-position> | left | right ] +// <overflow-position> = unsafe | safe +// <self-position> = center | start | end | self-start | self-end | flex-start | flex-end +test_valid_value("justify-items", "center"); +test_valid_value("justify-items", "start"); +test_valid_value("justify-items", "end"); +test_valid_value("justify-items", "self-start"); +test_valid_value("justify-items", "self-end"); +test_valid_value("justify-items", "flex-start"); +test_valid_value("justify-items", "flex-end"); +test_valid_value("justify-items", "unsafe center"); +test_valid_value("justify-items", "safe self-end"); +test_valid_value("justify-items", "right"); +test_valid_value("justify-items", "safe left"); + +// legacy | legacy && [ left | right | center ] +test_valid_value("justify-items", "legacy"); +test_valid_value("justify-items", "left legacy", "legacy left"); +test_valid_value("justify-items", "right legacy", "legacy right"); +test_valid_value("justify-items", "center legacy", "legacy center"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-self-computed.html b/testing/web-platform/tests/css/css-align/parsing/justify-self-computed.html new file mode 100644 index 0000000000..f560d23d7b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-self-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().justifySelf</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<meta name="assert" content="justify-self 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("justify-self", "auto"); +test_computed_value("justify-self", "normal"); +test_computed_value("justify-self", "stretch"); + +test_computed_value("justify-self", "baseline"); +test_computed_value("justify-self", "last baseline"); + +test_computed_value("justify-self", "center"); +test_computed_value("justify-self", "start"); +test_computed_value("justify-self", "end"); +test_computed_value("justify-self", "self-start"); +test_computed_value("justify-self", "self-end"); +test_computed_value("justify-self", "flex-start"); +test_computed_value("justify-self", "flex-end"); +test_computed_value("justify-self", "unsafe center"); +test_computed_value("justify-self", "safe self-end"); +test_computed_value("justify-self", "left"); +test_computed_value("justify-self", "unsafe right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-self-invalid.html b/testing/web-platform/tests/css/css-align/parsing/justify-self-invalid.html new file mode 100644 index 0000000000..7823c0aa58 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-self-invalid.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-self with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<meta name="assert" content="justify-self supports only the grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]'."> +<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("justify-self", "baseline last"); +test_invalid_value("justify-self", "center baseline"); +test_invalid_value("justify-self", "first"); +test_invalid_value("justify-self", "flex-start flex-end"); +test_invalid_value("justify-self", "last"); +test_invalid_value("justify-self", "legacy center"); +test_invalid_value("justify-self", "legacy left"); +test_invalid_value("justify-self", "legacy"); +test_invalid_value("justify-self", "normal baseline"); +test_invalid_value("justify-self", "right legacy"); +test_invalid_value("justify-self", "safe"); +test_invalid_value("justify-self", "self-end unsafe"); +test_invalid_value("justify-self", "space-around"); +test_invalid_value("justify-self", "space-between"); +test_invalid_value("justify-self", "space-evenly"); +test_invalid_value("justify-self", "start safe"); +test_invalid_value("justify-self", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-self-valid.html b/testing/web-platform/tests/css/css-align/parsing/justify-self-valid.html new file mode 100644 index 0000000000..4cca080995 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-self-valid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-self with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<meta name="assert" content="justify-self supports the full grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]'."> +<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("justify-self", "auto"); +test_valid_value("justify-self", "normal"); +test_valid_value("justify-self", "stretch"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("justify-self", "baseline"); +test_valid_value("justify-self", "first baseline", "baseline"); +test_valid_value("justify-self", "last baseline"); + +// <overflow-position>? [ <self-position> | left | right ] +// <overflow-position> = unsafe | safe +// <self-position> = center | start | end | self-start | self-end | flex-start | flex-end +test_valid_value("justify-self", "center"); +test_valid_value("justify-self", "start"); +test_valid_value("justify-self", "end"); +test_valid_value("justify-self", "self-start"); +test_valid_value("justify-self", "self-end"); +test_valid_value("justify-self", "flex-start"); +test_valid_value("justify-self", "flex-end"); +test_valid_value("justify-self", "unsafe center"); +test_valid_value("justify-self", "safe self-end"); +test_valid_value("justify-self", "left"); +test_valid_value("justify-self", "unsafe right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-content-computed.html b/testing/web-platform/tests/css/css-align/parsing/place-content-computed.html new file mode 100644 index 0000000000..1fc152c231 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-content-computed.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().placeContent</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content"> +<meta name="assert" content="place-content 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("place-content", "normal normal", "normal"); + +test_computed_value("place-content", "first baseline", "baseline start"); +test_computed_value("place-content", "baseline", "baseline start"); +test_computed_value("place-content", "first baseline start", "baseline start"); +test_computed_value("place-content", "last baseline", "last baseline start"); +test_computed_value("place-content", "first baseline stretch", "baseline stretch"); +test_computed_value("place-content", "last baseline flex-start"); + +test_computed_value("place-content", "baseline stretch"); + +test_computed_value("place-content", "space-between"); +test_computed_value("place-content", "space-around"); +test_computed_value("place-content", "space-evenly"); +test_computed_value("place-content", "stretch"); + +test_computed_value("place-content", "center"); +test_computed_value("place-content", "end"); +test_computed_value("place-content", "flex-start flex-start", "flex-start"); +test_computed_value("place-content", "unsafe end unsafe end", "unsafe end"); +test_computed_value("place-content", "safe flex-start"); + +test_computed_value("place-content", "normal stretch"); +test_computed_value("place-content", "baseline space-around"); +test_computed_value("place-content", "space-evenly unsafe end"); +test_computed_value("place-content", "center normal"); + +test_computed_value("place-content", "normal right"); +test_computed_value("place-content", "baseline unsafe left"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-content-invalid.html b/testing/web-platform/tests/css/css-align/parsing/place-content-invalid.html new file mode 100644 index 0000000000..3fcd9a8dbe --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-content-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-content with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content"> +<meta name="assert" content="place-content supports only the grammar '<align-content> <justify-content>?'."> +<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("place-content", "auto"); + +test_invalid_value("place-content", "self-end unsafe"); +test_invalid_value("place-content", "self-start"); + +test_invalid_value("place-content", "left"); +test_invalid_value("place-content", "unsafe right"); +test_invalid_value("place-content", "left normal"); +test_invalid_value("place-content", "unsafe right stretch"); + +test_invalid_value("place-content", "normal flex-start baseline"); +test_invalid_value("place-content", "first baseline first baseline"); + +test_invalid_value("place-content", "baseline safe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-content-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/place-content-shorthand.html new file mode 100644 index 0000000000..a46c58a29b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-content-shorthand.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: place-content sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content"> +<meta name="assert" content="place-content supports the full grammar '<align-content> <justify-content>?'."> +<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('place-content', 'normal', { + 'align-content': 'normal', + 'justify-content': 'normal' +}); + +test_shorthand_value('place-content', 'first baseline', { + 'align-content': 'baseline', + 'justify-content': 'start' +}); + +test_shorthand_value('place-content', 'last baseline flex-start', { + 'align-content': 'last baseline', + 'justify-content': 'flex-start' +}); + +test_shorthand_value('place-content', 'space-around', { + 'align-content': 'space-around', + 'justify-content': 'space-around' +}); + +test_shorthand_value('place-content', 'space-evenly unsafe end', { + 'align-content': 'space-evenly', + 'justify-content': 'unsafe end' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-content-valid.html b/testing/web-platform/tests/css/css-align/parsing/place-content-valid.html new file mode 100644 index 0000000000..a83aa4cec8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-content-valid.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-content with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content"> +<meta name="assert" content="place-content supports the full grammar '<align-content> <justify-content>?'."> +<meta name="assert" content="<baseline-position> and <baseline-position> start are equivalent."> +<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("place-content", "normal normal", "normal"); + +test_valid_value("place-content", "first baseline", "baseline start"); +test_valid_value("place-content", "baseline", "baseline start"); +test_valid_value("place-content", "first baseline start", "baseline start"); +test_valid_value("place-content", "last baseline", "last baseline start"); +test_valid_value("place-content", "first baseline stretch", "baseline stretch"); +test_valid_value("place-content", "last baseline flex-start"); + +test_valid_value("place-content", "baseline stretch"); + +test_valid_value("place-content", "space-between"); +test_valid_value("place-content", "space-around"); +test_valid_value("place-content", "space-evenly"); +test_valid_value("place-content", "stretch"); + +test_valid_value("place-content", "center"); +test_valid_value("place-content", "end"); +test_valid_value("place-content", "flex-start flex-start", "flex-start"); +test_valid_value("place-content", "unsafe end unsafe end", "unsafe end"); +test_valid_value("place-content", "safe flex-start"); + +test_valid_value("place-content", "normal stretch"); +test_valid_value("place-content", "baseline space-around"); +test_valid_value("place-content", "space-evenly unsafe end"); +test_valid_value("place-content", "center normal"); + +test_valid_value("place-content", "normal right"); +test_valid_value("place-content", "baseline unsafe left"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-items-computed.html b/testing/web-platform/tests/css/css-align/parsing/place-items-computed.html new file mode 100644 index 0000000000..24a0fa32f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-items-computed.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().placeItems</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items"> +<meta name="assert" content="place-items 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> + #grandparent { + justify-items: legacy center; + } + #parent { + justify-items: legacy; + } +</style> +</head> +<body> +<div id="grandparent"> + <div id="parent"> + <div id="target"></div> + </div> +<script> +test_computed_value("place-items", "normal"); +test_computed_value("place-items", "stretch stretch", "stretch"); + +test_computed_value("place-items", "first baseline", "baseline"); +test_computed_value("place-items", "last baseline last baseline", "last baseline"); + +test_computed_value("place-items", "center"); +test_computed_value("place-items", "end end", "end"); +test_computed_value("place-items", "self-start"); +test_computed_value("place-items", "flex-end"); +test_computed_value("place-items", "unsafe center unsafe center", "unsafe center"); +test_computed_value("place-items", "safe self-end"); + +test_computed_value("place-items", "stretch baseline"); +test_computed_value("place-items", "last baseline center"); +test_computed_value("place-items", "safe self-end normal"); + +test_computed_value("place-items", "normal right"); +test_computed_value("place-items", "baseline unsafe left"); + +// When specified justify-items is legacy, computed value depends on inherited value. +test_computed_value("place-items", "flex-end legacy", "flex-end legacy center"); +test_computed_value("place-items", "stretch legacy left"); +test_computed_value("place-items", "first baseline right legacy", "baseline legacy right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-items-invalid.html b/testing/web-platform/tests/css/css-align/parsing/place-items-invalid.html new file mode 100644 index 0000000000..9468d30e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-items-invalid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-items with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items"> +<meta name="assert" content="place-items supports only the grammar '<align-items> <justify-items>?'."> +<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("place-items", "auto"); + +test_invalid_value("place-items", "space-around"); +test_invalid_value("place-items", "space-between"); +test_invalid_value("place-items", "space-evenly"); + +test_invalid_value("place-items", "left"); +test_invalid_value("place-items", "unsafe right"); +test_invalid_value("place-items", "left baseline"); +test_invalid_value("place-items", "unsafe right flex-end"); + +test_invalid_value("place-items", "legacy center"); +test_invalid_value("place-items", "legacy left"); +test_invalid_value("place-items", "legacy"); +test_invalid_value("place-items", "legacy right flex-start"); +test_invalid_value("place-items", "legacy normal"); + +test_invalid_value("place-items", "normal flex-start baseline"); + +test_invalid_value("place-items", "baseline safe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-items-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/place-items-shorthand.html new file mode 100644 index 0000000000..991510b5b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-items-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: place-items sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items"> +<meta name="assert" content="place-items supports the full grammar '<align-items> <justify-items>?'."> +<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('place-items', 'normal', { + 'align-items': 'normal', + 'justify-items': 'normal' +}); + +test_shorthand_value('place-items', 'first baseline', { + 'align-items': 'baseline', + 'justify-items': 'baseline' +}); + +test_shorthand_value('place-items', 'last baseline flex-start', { + 'align-items': 'last baseline', + 'justify-items': 'flex-start' +}); + +test_shorthand_value('place-items', 'stretch right legacy', { + 'align-items': 'stretch', + 'justify-items': 'legacy right' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-items-valid.html b/testing/web-platform/tests/css/css-align/parsing/place-items-valid.html new file mode 100644 index 0000000000..72179bf2db --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-items-valid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-items with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items"> +<meta name="assert" content="place-items supports the full grammar '<align-items> <justify-items>?'."> +<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("place-items", "normal"); +test_valid_value("place-items", "stretch stretch", "stretch"); + +test_valid_value("place-items", "first baseline", "baseline"); +test_valid_value("place-items", "last baseline last baseline", "last baseline"); + +test_valid_value("place-items", "center"); +test_valid_value("place-items", "end end", "end"); +test_valid_value("place-items", "self-start"); +test_valid_value("place-items", "flex-end"); +test_valid_value("place-items", "unsafe center unsafe center", "unsafe center"); +test_valid_value("place-items", "safe self-end"); + +test_valid_value("place-items", "stretch baseline"); +test_valid_value("place-items", "last baseline center"); +test_valid_value("place-items", "safe self-end normal"); + +test_valid_value("place-items", "normal right"); +test_valid_value("place-items", "baseline unsafe left"); + +test_valid_value("place-items", "flex-end legacy"); +test_valid_value("place-items", "stretch legacy left"); +test_valid_value("place-items", "first baseline right legacy", "baseline legacy right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-self-computed.html b/testing/web-platform/tests/css/css-align/parsing/place-self-computed.html new file mode 100644 index 0000000000..9fa4dbea5f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-self-computed.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().placeSelf</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self"> +<meta name="assert" content="place-self 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("place-self", "auto auto", "auto"); +test_computed_value("place-self", "normal"); +test_computed_value("place-self", "stretch"); + +test_computed_value("place-self", "first baseline", "baseline"); +test_computed_value("place-self", "last baseline last baseline", "last baseline"); + +test_computed_value("place-self", "center center", "center"); +test_computed_value("place-self", "start"); +test_computed_value("place-self", "self-start"); +test_computed_value("place-self", "flex-end"); +test_computed_value("place-self", "unsafe center"); +test_computed_value("place-self", "safe self-end safe self-end", "safe self-end"); + +test_computed_value("place-self", "auto last baseline"); +test_computed_value("place-self", "baseline flex-end"); +test_computed_value("place-self", "unsafe center stretch"); + +test_computed_value("place-self", "normal right"); +test_computed_value("place-self", "baseline unsafe left"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-self-invalid.html b/testing/web-platform/tests/css/css-align/parsing/place-self-invalid.html new file mode 100644 index 0000000000..8a7a2ab187 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-self-invalid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-self with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self"> +<meta name="assert" content="place-self supports only the grammar '<align-self> <justify-self>?'."> +<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("place-self", "space-around"); +test_invalid_value("place-self", "space-between"); +test_invalid_value("place-self", "space-evenly"); + +test_invalid_value("place-self", "right"); +test_invalid_value("place-self", "unsafe left"); +test_invalid_value("place-self", "right start"); +test_invalid_value("place-self", "unsafe left stretch"); + +test_invalid_value("place-self", "normal flex-start baseline"); + +test_invalid_value("place-self", "baseline safe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-self-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/place-self-shorthand.html new file mode 100644 index 0000000000..52afa92b40 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-self-shorthand.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: place-self sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self"> +<meta name="assert" content="place-self supports the full grammar '<align-self> <justify-self>?'."> +<meta name="assert" content="<baseline-position> and <baseline-position> start are equivalent."> +<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('place-self', 'normal', { + 'align-self': 'normal', + 'justify-self': 'normal' +}); + +test_shorthand_value('place-self', 'first baseline', { + 'align-self': 'baseline', + 'justify-self': 'baseline' +}); + +test_shorthand_value('place-self', 'last baseline flex-start', { + 'align-self': 'last baseline', + 'justify-self': 'flex-start' +}); + +test_shorthand_value('place-self', 'unsafe self-start stretch', { + 'align-self': 'unsafe self-start', + 'justify-self': 'stretch' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-self-valid.html b/testing/web-platform/tests/css/css-align/parsing/place-self-valid.html new file mode 100644 index 0000000000..36a8bd5026 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-self-valid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-self with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self"> +<meta name="assert" content="place-self supports the full grammar '<align-self> <justify-self>?'."> +<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("place-self", "auto auto", "auto"); +test_valid_value("place-self", "normal"); +test_valid_value("place-self", "stretch"); + +test_valid_value("place-self", "first baseline", "baseline"); +test_valid_value("place-self", "last baseline last baseline", "last baseline"); + +test_valid_value("place-self", "center center", "center"); +test_valid_value("place-self", "start"); +test_valid_value("place-self", "self-start"); +test_valid_value("place-self", "flex-end"); +test_valid_value("place-self", "unsafe center"); +test_valid_value("place-self", "safe self-end safe self-end", "safe self-end"); + +test_valid_value("place-self", "auto last baseline"); +test_valid_value("place-self", "baseline flex-end"); +test_valid_value("place-self", "unsafe center stretch"); + +test_valid_value("place-self", "normal right"); +test_valid_value("place-self", "baseline unsafe left"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/row-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/row-gap-computed.html new file mode 100644 index 0000000000..8108dcc63a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/row-gap-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().rowGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap"> +<meta name="assert" content="row-gap computed value is a specified keyword or a computed <length-percentage>."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("row-gap", "normal"); + +test_computed_value("row-gap", "10px"); +test_computed_value("row-gap", "20%"); +test_computed_value("row-gap", "calc(20% + 10px)"); + +test_computed_value("row-gap", "calc(-0.5em + 10px)", "0px"); +test_computed_value("row-gap", "calc(0.5em + 10px)", "30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/row-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/row-gap-invalid.html new file mode 100644 index 0000000000..a51ab7425c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/row-gap-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing row-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap"> +<meta name="assert" content="row-gap supports only the grammar 'normal | <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("row-gap", "auto"); +test_invalid_value("row-gap", "-10px"); + +test_invalid_value("row-gap", "10px 20%"); +test_invalid_value("row-gap", "normal 10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/row-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/row-gap-valid.html new file mode 100644 index 0000000000..dacdd38254 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/row-gap-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing row-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap"> +<meta name="assert" content="row-gap supports the full grammar 'normal | <length-percentage>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("row-gap", "normal"); + +test_valid_value("row-gap", "10px"); +test_valid_value("row-gap", "20%"); +test_valid_value("row-gap", "calc(20% + 10px)"); +test_valid_value("row-gap", "0", "0px"); +</script> +</body> +</html> |