diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-align/parsing')
11 files changed, 275 insertions, 1 deletions
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 index 52397fb744..6095104fa3 100644 --- a/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html +++ b/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html @@ -4,7 +4,7 @@ <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>?'."> +<meta name="assert" content="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> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-computed.html new file mode 100644 index 0000000000..ae43a2a3f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-computed.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().gridColumnGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-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("grid-column-gap", "normal"); + +test_computed_value("grid-column-gap", "calc(10px + 0.5em)", "30px"); +test_computed_value("grid-column-gap", "calc(10px - 0.5em)", "0px"); +test_computed_value("grid-column-gap", "40%"); +test_computed_value("grid-column-gap", "calc(50% + 60px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-invalid.html new file mode 100644 index 0000000000..a43f05dbe1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-column-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-column-gap supports only the grammar '<length-percentage> | normal'."> +<meta name="assert" content="grid-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("grid-column-gap", "auto"); + +test_invalid_value("grid-column-gap", "10"); +test_invalid_value("grid-column-gap", "10px 20px"); +test_invalid_value("grid-column-gap", "-1px"); +test_invalid_value("grid-column-gap", "-10%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-valid.html new file mode 100644 index 0000000000..b96e36e434 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-valid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-column-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-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("grid-column-gap", "normal"); + +test_valid_value("grid-column-gap", "0", "0px"); +test_valid_value("grid-column-gap", "1px"); +test_valid_value("grid-column-gap", "calc(2em + 3ex)"); +test_valid_value("grid-column-gap", "4%"); +test_valid_value("grid-column-gap", "5vmin"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/grid-gap-computed.html new file mode 100644 index 0000000000..eee24ad653 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-gap-computed.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().gridGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-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("grid-gap", "normal"); +test_computed_value("grid-gap", "10px"); +test_computed_value("grid-gap", "20%"); +test_computed_value("grid-gap", "calc(20% + 10px)"); +test_computed_value("grid-gap", "calc(-0.5em + 10px)", "0px"); +test_computed_value("grid-gap", "calc(0.5em + 10px)", "30px"); + +test_computed_value("grid-gap", "normal 10px"); +test_computed_value("grid-gap", "10px 20%"); +test_computed_value("grid-gap", "20% calc(20% + 10px)"); +test_computed_value("grid-gap", "calc(20% + 10px) normal"); + +test_computed_value("grid-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/grid-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/grid-gap-invalid.html new file mode 100644 index 0000000000..7536b091d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-gap-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-gap supports only the grammar '<grid-row-gap> <grid-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("grid-gap", "auto"); +test_invalid_value("grid-gap", "-10px"); + +test_invalid_value("grid-gap", "10px 20% 30px"); +test_invalid_value("grid-gap", "normal 10px normal"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-gap-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/grid-gap-shorthand.html new file mode 100644 index 0000000000..61ded44176 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-gap-shorthand.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: grid-gap sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-gap supports the full grammar '<grid-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)', { + 'grid-row-gap': 'normal', + 'grid-column-gap': 'calc(20% + 10px)' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/grid-gap-valid.html new file mode 100644 index 0000000000..c70b9205fd --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-gap-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-gap supports the full grammar '<grid-row-gap> <grid-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("grid-gap", "normal normal", "normal"); +test_valid_value("grid-gap", "10px 10px", "10px"); +test_valid_value("grid-gap", "20% 20%", "20%"); +test_valid_value("grid-gap", "calc(20% + 10px) calc(20% + 10px)", "calc(20% + 10px)"); + +test_valid_value("grid-gap", "normal 10px"); +test_valid_value("grid-gap", "10px 20%"); +test_valid_value("grid-gap", "20% calc(20% + 10px)"); +test_valid_value("grid-gap", "calc(20% + 10px) 0px"); +test_valid_value("grid-gap", "0px normal"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-computed.html new file mode 100644 index 0000000000..d108cb2737 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-computed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().gridRowGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-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("grid-row-gap", "normal"); + +test_computed_value("grid-row-gap", "10px"); +test_computed_value("grid-row-gap", "20%"); +test_computed_value("grid-row-gap", "calc(20% + 10px)"); + +test_computed_value("grid-row-gap", "calc(-0.5em + 10px)", "0px"); +test_computed_value("grid-row-gap", "calc(0.5em + 10px)", "30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-invalid.html new file mode 100644 index 0000000000..39d0835a48 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-row-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-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("grid-row-gap", "auto"); +test_invalid_value("grid-row-gap", "-10px"); + +test_invalid_value("grid-row-gap", "10px 20%"); +test_invalid_value("grid-row-gap", "normal 10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-valid.html new file mode 100644 index 0000000000..fe12376395 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-row-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-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("grid-row-gap", "normal"); + +test_valid_value("grid-row-gap", "10px"); +test_valid_value("grid-row-gap", "20%"); +test_valid_value("grid-row-gap", "calc(20% + 10px)"); +test_valid_value("grid-row-gap", "0", "0px"); +</script> +</body> +</html> |