diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-grid/parsing | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/parsing')
49 files changed, 3318 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html new file mode 100644 index 0000000000..d1ae78c702 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridArea</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#placement"> +<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> +// auto +test_computed_value("grid-area", "auto / auto / auto / auto", + ["auto", "auto / auto / auto / auto"]); +test_computed_value("grid-row", "auto / auto", ["auto", "auto / auto"]); +test_computed_value("grid-column-end", "auto"); + +// <custom-ident> +test_computed_value("grid-row", "-zπ", [ "-zπ", "-zπ / -zπ"]); +test_computed_value("grid-row-start", "AZ"); +test_computed_value("grid-column-start", "-_π"); +test_computed_value("grid-row-end", "_9"); + + +// <integer> && <custom-ident>? +test_computed_value("grid-area", "1 / 90 -a- / auto / auto", + ["1 / 90 -a-", "1 / 90 -a- / auto / auto"]); +test_computed_value("grid-row", "2 az / auto", ["2 az", "2 az / auto"]); +test_computed_value("grid-column", "9 / -19 zA"); +test_computed_value("grid-row-start", "-19"); +test_computed_value("grid-row-start", "9 -Z_"); +test_computed_value("grid-column-start", "-44 Z"); +test_computed_value("grid-row-end", "1 -πA"); +test_computed_value("grid-column-end", "5 π_"); + +// span && [ <integer> || <custom-ident> ] +test_computed_value("grid-area", "span 2 i / auto / auto / auto", + ["span 2 i", "span 2 i / auto / auto / auto"]); +test_computed_value("grid-row", "span 2 / auto", ["span 2", "span 2 / auto"]); +test_computed_value("grid-column-start", "span 1 i", "span i"); +test_computed_value("grid-row-start", "span 1"); +test_computed_value("grid-row-end", "span 2 i"); +test_computed_value("grid-column-end", "span 2"); + +// https://github.com/w3c/csswg-drafts/issues/3448 +test_computed_value("grid-row-start", "span i"); +test_computed_value("grid-row", "span i / auto", ["span i", "span i / auto"]); + +// <grid-line> [ / <grid-line> ]{0,3} +test_computed_value("grid-area", "auto / i / auto / i", + ["auto / i", "auto / i / auto / i"]); +test_computed_value("grid-area", "auto / i / 2 j", + ["auto / i / 2 j", "auto / i / 2 j / i"]); +test_computed_value("grid-area", "auto / i / 2 j / span 3 k"); +test_computed_value("grid-row", "auto / i"); +test_computed_value("grid-column", "2 j / span 3 k"); + + +// https://github.com/w3c/csswg-drafts/issues/2858 +test_computed_value("grid-column-end", "\\31st", "\\31 st"); +test_computed_value("grid-column-end", "\\31 st", "\\31 st"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html new file mode 100644 index 0000000000..c7d35ebf09 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-area with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area"> +<meta name="assert" content="grid-area supports only the grammar '<grid-line> [ / <grid-line> ]{0,3}'."> +<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-area", "'string'"); +test_invalid_value("grid-row", "1.0"); +test_invalid_value("grid-column", "1 2"); +test_invalid_value("grid-row-start", "+-3"); +test_invalid_value("grid-column-start", "0"); +test_invalid_value("grid-row-end", "span"); +test_invalid_value("grid-column-end", "sPaN"); +test_invalid_value("grid-column-end", '"1st"'); +test_invalid_value("grid-column-end", "1st"); +test_invalid_value("grid-column-start", "auto 1"); +test_invalid_value("grid-row-start", "1 auto"); + +test_invalid_value("grid-area", "auto / initial"); +test_invalid_value("grid-row", "auto / inherit"); +test_invalid_value("grid-column", "auto / unset"); + +test_invalid_value("grid-area", "auto / auto / auto / auto / auto"); +test_invalid_value("grid-row", "1 / 2 / 3") +test_invalid_value("grid-column", "a / b / c"); +test_invalid_value("grid-row-end", "span 1 / span 2"); +test_invalid_value("grid-area", "auto 2 auto 4"); +test_invalid_value("grid-row", "33 -A0 auto"); +test_invalid_value("grid-row", "auto i 2 j span 3 k"); + + +// https://github.com/w3c/csswg-drafts/issues/2856 +test_invalid_value("grid-row-end", "1 auto"); +test_invalid_value("grid-row-end", "span 1 auto"); +test_invalid_value("grid-row-end", "span auto 1"); +test_invalid_value("grid-row-end", "1 auto span"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html new file mode 100644 index 0000000000..9cb84e940a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid-area sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area"> +<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'."> +<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('grid-area', 'auto', { + 'grid-row-start': 'auto', + 'grid-column-start': 'auto', + 'grid-row-end': 'auto', + 'grid-column-end': 'auto' +}); + +// <custom-ident> +test_shorthand_value('grid-area', '--a', { + 'grid-row-start': '--a', + 'grid-column-start': '--a', + 'grid-row-end': '--a', + 'grid-column-end': '--a' +}); + +test_shorthand_value('grid-area', 'a / b', { + 'grid-row-start': 'a', + 'grid-column-start': 'b', + 'grid-row-end': 'a', + 'grid-column-end': 'b' +}); + +test_shorthand_value('grid-area', 'a / b / c', { + 'grid-row-start': 'a', + 'grid-column-start': 'b', + 'grid-row-end': 'c', + 'grid-column-end': 'b' +}); + +test_shorthand_value('grid-area', 'a / b / c / d', { + 'grid-row-start': 'a', + 'grid-column-start': 'b', + 'grid-row-end': 'c', + 'grid-column-end': 'd' +}); + +// <integer> && <custom-ident>? +// span && [ <integer> || <custom-ident> ] +test_shorthand_value('grid-area', '+90 -a- / 2 i span', { + 'grid-row-start': '90 -a-', + 'grid-column-start': 'span 2 i', + 'grid-row-end': 'auto', + 'grid-column-end': 'auto' +}); + +test_shorthand_value('grid-area', '1 / 2 / 3 / 4', { + 'grid-row-start': '1', + 'grid-column-start': '2', + 'grid-row-end': '3', + 'grid-column-end': '4' +}); + + +test_shorthand_value('grid-row', 'auto', { + 'grid-row-start': 'auto', + 'grid-row-end': 'auto' +}); + +test_shorthand_value('grid-row', 'one / 2', { + 'grid-row-start': 'one', + 'grid-row-end': '2' +}); + +test_shorthand_value('grid-row', '1 two / four 3', { + 'grid-row-start': '1 two', + 'grid-row-end': '3 four' +}); + + +test_shorthand_value('grid-column', '5 span', { + 'grid-column-start': 'span 5', + 'grid-column-end': 'auto' +}); + +test_shorthand_value('grid-column', '1 / two', { + 'grid-column-start': '1', + 'grid-column-end': 'two' +}); + +test_shorthand_value('grid-column', 'span 1 two / four 3 span', { + 'grid-column-start': 'span two', + 'grid-column-end': 'span 3 four' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html new file mode 100644 index 0000000000..b61c803658 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-area with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area"> +<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// auto +test_valid_value("grid-area", "auto"); +test_valid_value("grid-area", "auto / auto", "auto"); +test_valid_value("grid-area", "auto / auto / auto", "auto"); +test_valid_value("grid-area", "auto / auto / auto / auto", "auto"); +test_valid_value("grid-area", "AuTo", "auto"); +test_valid_value("grid-row", "auto"); +test_valid_value("grid-row", "auto/auto", "auto"); +test_valid_value("grid-column-end", "AuTo", "auto"); + +// <custom-ident> +test_valid_value("grid-area", "--a"); +test_valid_value("grid-row", "-zπ"); +test_valid_value("grid-row", "-zπ/-zπ", "-zπ"); +test_valid_value("grid-row", "i / i", "i"); +test_valid_value("grid-row-start", "AZ"); +test_valid_value("grid-column-start", "-_π"); +test_valid_value("grid-row-end", "_9"); + + +// <integer> && <custom-ident>? +test_valid_value("grid-area", "1"); +test_valid_value("grid-area", "+90 -a-", "90 -a-"); +test_valid_value("grid-row", "az 2", "2 az"); +test_valid_value("grid-column", "9"); +test_valid_value("grid-column", "-19 zA"); +test_valid_value("grid-column", "-A0 33", "33 -A0"); +test_valid_value("grid-row-start", "-19"); +test_valid_value("grid-row-start", "9 -Z_"); +test_valid_value("grid-column-start", "+90", "90"); +test_valid_value("grid-column-start", "Z -44", "-44 Z"); +test_valid_value("grid-row-end", "1 -πA"); +test_valid_value("grid-column-end", "π_ +5", "5 π_"); + +// span && [ <integer> || <custom-ident> ] +test_valid_value("grid-area", "span 2 i"); +test_valid_value("grid-area", "i 2 SpAn", "span 2 i"); +test_valid_value("grid-area", "span 1 i", "span i") +test_valid_value("grid-row", "span 2"); +test_valid_value("grid-column", "i SpAn", "span i"); +test_valid_value("grid-row-start", "span i"); +test_valid_value("grid-column-start", "SpAn i 2", "span 2 i"); +test_valid_value("grid-row-end", "2 i span", "span 2 i"); +test_valid_value("grid-column-end", "2 SpAn", "span 2"); + +// <grid-line> [ / <grid-line> ]{0,3} +test_valid_value("grid-area", "auto / i"); +test_valid_value("grid-area", "auto / i / auto / i", "auto / i"); +test_valid_value("grid-area", "auto / i / auto / 2 i"); +test_valid_value("grid-area", "1 / i / auto / i", "1 / i"); +test_valid_value("grid-area", "1 / auto / auto / auto", "1"); +test_valid_value("grid-area", "1 / auto / i / auto", "1 / auto / i"); +test_valid_value("grid-area", "1 / j / i / k"); +test_valid_value("grid-area", "1 / auto / 2 / auto", "1 / auto / 2"); +test_valid_value("grid-area", "1 / i / 2 / auto"); +test_valid_value("grid-area", "i / i / auto / auto"); +test_valid_value("grid-area", "i / auto / i / auto", "i / auto"); +test_valid_value("grid-area", "auto / i / 2 j"); +test_valid_value("grid-area", "auto / i / 2 j / span 3 k"); +test_valid_value("grid-row", "auto / i"); +test_valid_value("grid-row", "i / auto"); +test_valid_value("grid-row", "2 i / auto", "2 i"); +test_valid_value("grid-row", "1 / auto", "1"); +test_valid_value("grid-column", "2 j / span 3 k"); + +// https://github.com/w3c/csswg-drafts/issues/2858 +// '\\31 st' in Blink, Firefox, EdgeHTML and Safari serialize invalid values. +test_valid_value("grid-column-end", "\\31st", ["\\31 st", "\\31st"]); +test_valid_value("grid-column-end", "\\31 st", ["\\31 st", "\\31st"]); +test_valid_value("grid-column", "\\31st / \\31 st", ["\\31 st", "\\31st"]); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html new file mode 100644 index 0000000000..ac8a9fb4ef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridAutoColumns</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns"> +<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> +// <track-breadth> +// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto +test_computed_value("grid-auto-columns", "1px"); +test_computed_value("grid-auto-columns", "calc(10px + 0.5em)", "30px"); +test_computed_value("grid-auto-columns", "calc(10px - 0.5em)", "0px"); +test_computed_value("grid-auto-columns", "4%"); +test_computed_value("grid-auto-columns", "5fr"); +test_computed_value("grid-auto-columns", "min-content"); +test_computed_value("grid-auto-columns", "max-content"); +test_computed_value("grid-auto-columns", "auto"); + +// minmax( <inflexible-breadth> , <track-breadth> ) +// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto +test_computed_value("grid-auto-columns", "minmax(1px, 5fr)"); +test_computed_value("grid-auto-columns", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)"); +test_computed_value("grid-auto-columns", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)"); +test_computed_value("grid-auto-columns", "minmax(4%, auto)"); +test_computed_value("grid-auto-columns", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)"); +test_computed_value("grid-auto-columns", "minmax(auto, 4%)"); + +// fit-content( <length-percentage> ) +test_computed_value("grid-auto-columns", "fit-content(1px)"); +test_computed_value("grid-auto-columns", "fit-content(calc(10px + 0.5em))", "fit-content(30px)"); +test_computed_value("grid-auto-columns", "fit-content(calc(10px - 0.5em))", "fit-content(0px)"); +test_computed_value("grid-auto-columns", "fit-content(4%)"); + +// 0 +test_computed_value("grid-auto-columns", "0px"); +test_computed_value("grid-auto-columns", "0%"); +test_computed_value("grid-auto-columns", "0fr"); +test_computed_value("grid-auto-columns", "minmax(auto, 0%)"); +test_computed_value("grid-auto-columns", "fit-content(0px)"); + +// <track-size>+ +// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672 +test_computed_value("grid-auto-columns", "1px 2px 3px 0px"); +test_computed_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html new file mode 100644 index 0000000000..04e0fadf0d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-auto-columns with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns"> +<meta name="assert" content="grid-auto-columns supports only the grammar '<track-size>+'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <track-breadth> +test_invalid_value("grid-auto-columns", "none"); +test_invalid_value("grid-auto-columns", "-1px"); +test_invalid_value("grid-auto-columns", "-4%"); + +// minmax( <inflexible-breadth> , <track-breadth> ) +test_invalid_value("grid-auto-columns", "minmax(1px)"); +test_invalid_value("grid-auto-columns", "minmax(1px, 2px, 3px)"); +test_invalid_value("grid-auto-columns", "minmax(5fr, 1px)"); +test_invalid_value("grid-auto-columns", "minmax(6px, -7%)"); +test_invalid_value("grid-auto-columns", "minmax(8px, -9fr)"); + +// fit-content( <length-percentage> ) +test_invalid_value("grid-auto-columns", "fit-content(-1px)"); +test_invalid_value("grid-auto-columns", "fit-content(1px, 2px)"); +test_invalid_value("grid-auto-columns", "fit-content(1px auto)"); + +// <track-size>+ +test_invalid_value("grid-auto-columns", "2em / 3em"); +test_invalid_value("grid-auto-columns", "auto, 10%"); +test_invalid_value("grid-auto-columns", "1px [a] 1px"); +test_invalid_value("grid-auto-columns", "[] 1px []"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html new file mode 100644 index 0000000000..e26d085a2d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-auto-columns with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns"> +<meta name="assert" content="grid-auto-columns supports the full grammar '<track-size>+'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <track-breadth> +// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto +test_valid_value("grid-auto-columns", "1px"); +test_valid_value("grid-auto-columns", "2em"); +test_valid_value("grid-auto-columns", "calc(2em + 3ex)"); +test_valid_value("grid-auto-columns", "4%"); +test_valid_value("grid-auto-columns", "5fr"); +test_valid_value("grid-auto-columns", "min-content"); +test_valid_value("grid-auto-columns", "max-content"); +test_valid_value("grid-auto-columns", "auto"); +test_valid_value("grid-auto-columns", "auto /**/", "auto"); + +// minmax( <inflexible-breadth> , <track-breadth> ) +// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto +test_valid_value("grid-auto-columns", "minmax(1px, 5fr)"); +test_valid_value("grid-auto-columns", "minmax(2em, min-content)"); +test_valid_value("grid-auto-columns", "minmax(calc(2em + 3ex), max-content)"); +test_valid_value("grid-auto-columns", "minmax(4%, auto)"); +test_valid_value("grid-auto-columns", "minmax(5vmin, 1px)"); +test_valid_value("grid-auto-columns", "minmax(min-content, 2em)"); +test_valid_value("grid-auto-columns", "minmax(max-content, calc(2em + 3ex))"); +test_valid_value("grid-auto-columns", "minmax(auto, 4%)"); + +// fit-content( <length-percentage> ) +test_valid_value("grid-auto-columns", "fit-content(1px)"); +test_valid_value("grid-auto-columns", "fit-content(2em)"); +test_valid_value("grid-auto-columns", "fit-content(calc(2em + 3ex))"); +test_valid_value("grid-auto-columns", "fit-content(4%)"); + +test_valid_value("grid-auto-columns", "0px"); +test_valid_value("grid-auto-columns", "0%"); +test_valid_value("grid-auto-columns", "0fr"); +test_valid_value("grid-auto-columns", "minmax(auto, 0%)"); +test_valid_value("grid-auto-columns", "fit-content(0px)"); + +// <track-size>+ +test_valid_value("grid-auto-columns", "auto auto"); +test_valid_value("grid-auto-columns", "auto 10px"); +test_valid_value("grid-auto-columns", "1px 2px 3px 0px"); +test_valid_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html new file mode 100644 index 0000000000..330956c493 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridAutoFlow</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow"> +<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("grid-auto-flow", "row"); +test_computed_value("grid-auto-flow", "column"); +test_computed_value("grid-auto-flow", "row dense", "dense"); +test_computed_value("grid-auto-flow", "column dense"); + +test_computed_value("grid-auto-flow", "dense row", "dense"); +test_computed_value("grid-auto-flow", "dense column", "column dense"); + +test_computed_value("grid-auto-flow", "dense", "dense"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html new file mode 100644 index 0000000000..a261e8eba1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-auto-flow with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow"> +<meta name="assert" content="grid-auto-flow supports only the grammar '[ row | column ] || dense'."> +<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-auto-flow", "auto"); +test_invalid_value("grid-auto-flow", "row dense column"); +test_invalid_value("grid-auto-flow", "dense row dense"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html new file mode 100644 index 0000000000..7db8b189a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-auto-flow with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow"> +<meta name="assert" content="grid-auto-flow supports the full grammar '[ row | column ] || dense'."> +<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-auto-flow", "row"); +test_valid_value("grid-auto-flow", "column"); +test_valid_value("grid-auto-flow", "row dense", "dense"); +test_valid_value("grid-auto-flow", "dense row", "dense"); +test_valid_value("grid-auto-flow", "dense"); +test_valid_value("grid-auto-flow", "column dense"); +test_valid_value("grid-auto-flow", "dense column", "column dense"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html new file mode 100644 index 0000000000..761c5d785d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridAutoRows</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows"> +<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> +// <track-breadth> +// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto +test_computed_value("grid-auto-rows", "1px"); +test_computed_value("grid-auto-rows", "calc(10px + 0.5em)", "30px"); +test_computed_value("grid-auto-rows", "calc(10px - 0.5em)", "0px"); +test_computed_value("grid-auto-rows", "4%"); +test_computed_value("grid-auto-rows", "5fr"); +test_computed_value("grid-auto-rows", "min-content"); +test_computed_value("grid-auto-rows", "max-content"); +test_computed_value("grid-auto-rows", "auto"); + +// minmax( <inflexible-breadth> , <track-breadth> ) +// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto +test_computed_value("grid-auto-rows", "minmax(1px, 5fr)"); +test_computed_value("grid-auto-rows", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)"); +test_computed_value("grid-auto-rows", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)"); +test_computed_value("grid-auto-rows", "minmax(4%, auto)"); +test_computed_value("grid-auto-rows", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)"); +test_computed_value("grid-auto-rows", "minmax(auto, 4%)"); + +// fit-content( <length-percentage> ) +test_computed_value("grid-auto-rows", "fit-content(1px)"); +test_computed_value("grid-auto-rows", "fit-content(calc(10px + 0.5em))", "fit-content(30px)"); +test_computed_value("grid-auto-rows", "fit-content(calc(10px - 0.5em))", "fit-content(0px)"); +test_computed_value("grid-auto-rows", "fit-content(4%)"); + +// 0 +test_computed_value("grid-auto-rows", "0px"); +test_computed_value("grid-auto-rows", "0%"); +test_computed_value("grid-auto-rows", "0fr"); +test_computed_value("grid-auto-rows", "minmax(auto, 0%)"); +test_computed_value("grid-auto-rows", "fit-content(0px)"); + +// <track-size>+ +// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672 +test_computed_value("grid-auto-rows", "1px 2px 3px 0px"); +test_computed_value("grid-auto-rows", "fit-content(1px) minmax(2px, 3px) 4px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html new file mode 100644 index 0000000000..1b61479f3c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-auto-rows with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows"> +<meta name="assert" content="grid-auto-rows supports only the grammar '<track-size>+'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <track-breadth> +test_invalid_value("grid-auto-rows", "none"); +test_invalid_value("grid-auto-rows", "-1px"); +test_invalid_value("grid-auto-rows", "-4%"); + +// minmax( <inflexible-breadth> , <track-breadth> ) +test_invalid_value("grid-auto-rows", "minmax(1px)"); +test_invalid_value("grid-auto-rows", "minmax(1px, 2px, 3px)"); +test_invalid_value("grid-auto-rows", "minmax(5fr, 1px)"); +test_invalid_value("grid-auto-rows", "minmax(6px, -7%)"); + +// fit-content( <length-percentage> ) +test_invalid_value("grid-auto-rows", "fit-content(-1px)"); +test_invalid_value("grid-auto-rows", "fit-content(1px, 2px)"); +test_invalid_value("grid-auto-rows", "fit-content(1px auto)"); + +// <track-size>+ +test_invalid_value("grid-auto-rows", "2em / 3em"); +test_invalid_value("grid-auto-rows", "auto, 10%"); +test_invalid_value("grid-auto-rows", "1px [a] 1px"); +test_invalid_value("grid-auto-rows", "[] 1px []"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html new file mode 100644 index 0000000000..d4dcdb12b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-auto-rows with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows"> +<meta name="assert" content="grid-auto-rows supports the full grammar '<track-size>+'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <track-breadth> +// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto +test_valid_value("grid-auto-rows", "1px"); +test_valid_value("grid-auto-rows", "2em"); +test_valid_value("grid-auto-rows", "calc(2em + 3ex)"); +test_valid_value("grid-auto-rows", "4%"); +test_valid_value("grid-auto-rows", "5fr"); +test_valid_value("grid-auto-rows", "min-content"); +test_valid_value("grid-auto-rows", "max-content"); +test_valid_value("grid-auto-rows", "auto"); +test_valid_value("grid-auto-rows", "auto /**/", "auto"); + +// minmax( <inflexible-breadth> , <track-breadth> ) +// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto +test_valid_value("grid-auto-rows", "minmax(1px, 5fr)"); +test_valid_value("grid-auto-rows", "minmax(2em, min-content)"); +test_valid_value("grid-auto-rows", "minmax(calc(2em + 3ex), max-content)"); +test_valid_value("grid-auto-rows", "minmax(4%, auto)"); +test_valid_value("grid-auto-rows", "minmax(5vmin, 1px)"); +test_valid_value("grid-auto-rows", "minmax(min-content, 2em)"); +test_valid_value("grid-auto-rows", "minmax(max-content, calc(2em + 3ex))"); +test_valid_value("grid-auto-rows", "minmax(auto, 4%)"); + +// fit-content( <length-percentage> ) +test_valid_value("grid-auto-rows", "fit-content(1px)"); +test_valid_value("grid-auto-rows", "fit-content(2em)"); +test_valid_value("grid-auto-rows", "fit-content(calc(2em + 3ex))"); +test_valid_value("grid-auto-rows", "fit-content(4%)"); + +test_valid_value("grid-auto-rows", "0px"); +test_valid_value("grid-auto-rows", "0%"); +test_valid_value("grid-auto-rows", "0fr"); +test_valid_value("grid-auto-rows", "minmax(auto, 0%)"); +test_valid_value("grid-auto-rows", "fit-content(0px)"); + +// <track-size>+ +test_valid_value("grid-auto-rows", "auto auto"); +test_valid_value("grid-auto-rows", "auto 10px"); +test_valid_value("grid-auto-rows", "1px 2px 3px 0px"); +test_valid_value("grid-auto-rows", "fit-content(1px) minmax(2px, 3px) 4px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-column-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-column-invalid.html new file mode 100644 index 0000000000..d1f4dce172 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-column-invalid.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"> +<meta name="assert" content="Tests invalid values for grid-column"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_invalid_value("grid-column", "4 5"); +test_invalid_value("grid-column", "4 /"); +test_invalid_value("grid-column", "5 5"); +test_invalid_value("grid-column", "5 / /"); + +test_invalid_value("grid-column", "0 / 5"); +test_invalid_value("grid-column", "6 / 0"); +test_invalid_value("grid-column", "0"); + +test_invalid_value("grid-column", "span"); +test_invalid_value("grid-column", "span / span"); + +test_invalid_value("grid-column", "span span / span span"); + +test_invalid_value("grid-column", "5 5 / span 2"); +test_invalid_value("grid-column", "5 first last / span 2"); +test_invalid_value("grid-column", "5 / first last 2"); +test_invalid_value("grid-column", "first last / span 2"); +test_invalid_value("grid-column", "5 / first last"); +test_invalid_value("grid-column", "5 5 span / 2", "span 4 4 / 3"); +test_invalid_value("grid-column", "span 3 5 / 1", "5 span 4 / 3"); +test_invalid_value("grid-column", "span last first / 1", "span first last / 3"); +test_invalid_value("grid-column", "2 / span last first", "3 / span first last"); +test_invalid_value("grid-column", "span 1 last first / 1", "span first last 7 / 3"); +test_invalid_value("grid-column", "2 / span last 3 first", "3 / span first 5 last"); +test_invalid_value("grid-column", "1 span 2 first / 1", "1 span last 7 / 3"); +test_invalid_value("grid-column", "2 / 3 span 3 first", "3 / 5 span first 5"); + +test_invalid_value("grid-column", "span -1 / -2"); +test_invalid_value("grid-column", "-1 / -2 span"); +test_invalid_value("grid-column", "0 span / 0"); +test_invalid_value("grid-column", "0 / span 0"); +test_invalid_value("grid-column", "span -3 'first' / 3 last"); + +test_invalid_value("grid-column", "first span 1 / last"); +test_invalid_value("grid-column", "3 first / 2 span last"); +test_invalid_value("grid-column", "3 / 1 span 2"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-column-shortest-serialization.html b/testing/web-platform/tests/css/css-grid/parsing/grid-column-shortest-serialization.html new file mode 100644 index 0000000000..868de54c35 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-column-shortest-serialization.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"/> +<meta name="assert" content="grid-column computed value should be the shortest serialization possible"/> +<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("grid-column", "auto / auto", "auto"); +test_computed_value("grid-column", "auto", "auto"); +test_computed_value("grid-column", "10 / auto", "10"); +test_computed_value("grid-column", "10", "10"); +test_computed_value("grid-column", "-10 / auto", "-10"); +test_computed_value("grid-column", "-10", "-10"); +test_computed_value("grid-column", "first / first", "first"); +test_computed_value("grid-column", "first", "first"); +test_computed_value("grid-column", "span 2 / auto", "span 2"); +test_computed_value("grid-column", "span 2", "span 2"); +test_computed_value("grid-column", "2 first / auto", "2 first"); +test_computed_value("grid-column", "2 first", "2 first"); +test_computed_value("grid-column", "span first / auto", "span first"); +test_computed_value("grid-column", "span first", "span first"); +test_computed_value("grid-column", "span 2 first / auto", "span 2 first"); +test_computed_value("grid-column", "span 2 first", "span 2 first"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-column-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-column-shorthand.html new file mode 100644 index 0000000000..b60db55dc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-column-shorthand.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"> +<meta name="assert" content="grid-column should set values for grid-column-start and grid-column-end"> +<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("grid-column", "auto / auto", { + "grid-column-start": "auto", + "grid-column-end": "auto" +}); +test_shorthand_value("grid-column", "auto", { + "grid-column-start": "auto", + "grid-column-end": "auto" +}); + +test_shorthand_value("grid-column", "10 / auto", { + "grid-column-start": "10", + "grid-column-end": "auto" +}); +test_shorthand_value("grid-column", "10", { + "grid-column-start": "10", + "grid-column-end": "auto" +}); + +test_shorthand_value("grid-column", "-10 / auto", { + "grid-column-start": "-10", + "grid-column-end": "auto" +}); +test_shorthand_value("grid-column", "-10", { + "grid-column-start": "-10", + "grid-column-end": "auto" +}); + +test_shorthand_value("grid-column", "span 2 / auto", { + "grid-column-start": "span 2", + "grid-column-end": "auto" +}); +test_shorthand_value("grid-column", "span 2", { + "grid-column-start": "span 2", + "grid-column-end": "auto" +}); + +test_shorthand_value("grid-column", "3 last / auto", { + "grid-column-start": "3 last", + "grid-column-end": "auto" +}); +test_shorthand_value("grid-column", "3 last", { + "grid-column-start": "3 last", + "grid-column-end": "auto" +}); + +test_shorthand_value("grid-column", "span first / auto", { + "grid-column-start": "span first", + "grid-column-end": "auto" +}); +test_shorthand_value("grid-column", "span first", { + "grid-column-start": "span first", + "grid-column-end": "auto" +}); +test_shorthand_value("grid-column", "span 2 first / auto", { + "grid-column-start": "span 2 first", + "grid-column-end": "auto" +}); +test_shorthand_value("grid-column", "span 2 first", { + "grid-column-start": "span 2 first", + "grid-column-end": "auto" +}); + +test_shorthand_value("grid-column", "last / last", { + "grid-column-start": "last", + "grid-column-end": "last" +}); +test_shorthand_value("grid-column", "last", { + "grid-column-start": "last", + "grid-column-end": "last" +}); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html b/testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html new file mode 100644 index 0000000000..99af0110be --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html @@ -0,0 +1,322 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org"> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=73272"> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/css/support/alignment.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing"> +<meta name="assert" content="Test that setting and getting multiple grid-template-columns and grid-template-rows works as expected"> +<style> +/* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution. */ +.definite { + width: 800px; + height: 600px; +} + +.gridItem { + grid-column: 1; + grid-row: 1; + width: 7px; + height: 16px; +} + +.gridItem2 { + grid-column: 2; + grid-row: 2; + width: 17px; + height: 3px; +} + +.gridWithFixed { + grid-template-columns: 7px 11px; + grid-template-rows: 17px 2px; +} + +.gridWithPercent { + grid-template-columns: 50% 100%; + grid-template-rows: 25% 75%; +} +.gridWithAuto { + grid-template-columns: auto auto; + grid-template-rows: auto auto; +} +.gridWithEM { + grid-template-columns: 10em 12em; + grid-template-rows: 15em 17em; + font: 10px Ahem; +} +.gridWithNoneAndAuto { + grid-template-columns: none auto; + grid-template-rows: none auto; +} +.gridNoneWithAndFixed { + grid-template-columns: none 15px; + grid-template-rows: none 22px; +} +.gridWithThreeItems { + grid-template-columns: 15px auto 10em; + grid-template-rows: 12em 18px auto; + font: 10px Ahem; +} +.gridWithFitContentAndFitAvailable { + grid-template-columns: -webkit-content-available; + grid-template-rows: -webkit-fit-content -webkit-fit-available; +} +.gridWithMinMaxContent { + grid-template-columns: min-content max-content; + grid-template-rows: max-content min-content; +} +.gridWithMinMaxAndFixed { + grid-template-columns: minmax(45px, 30%) 15px; + grid-template-rows: 12em minmax(35%, 10px); + font: 10px Ahem; +} +.gridWithMinMaxAndMinMaxContent { + grid-template-columns: minmax(min-content, 30%) 15px; + grid-template-rows: 12em minmax(35%, max-content); + font: 10px Ahem; +} +.gridWithFractionFraction { + grid-template-columns: 2fr 3fr; + grid-template-rows: 3fr 5fr; +} +.gridWithFractionMinMax { + grid-template-columns: minmax(min-content, 45px) 2fr; + grid-template-rows: 3fr minmax(14px, max-content); +} +.gridWithCalcCalc { + grid-template-columns: calc(200px) calc(10em); + grid-template-rows: calc(15em) calc(75px); + font: 10px Ahem; +} +.gridWithCalcAndFixed { + grid-template-columns: calc(50%) 8em; + grid-template-rows: 88px calc(25%); + font: 10px Ahem; +} +.gridWithCalcAndMinMax { + grid-template-columns: calc(30px + 20%) minmax(min-content, 80px); + grid-template-rows: minmax(25%, max-content) calc(10% - 7px); +} +.gridWithCalcInsideMinMax { + grid-template-columns: minmax(calc(23px + 10%), 400px) 12em; + grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px)); + font: 10px Ahem; +} +.gridWithAutoInsideMinMax { + grid-template-columns: minmax(auto, min-content) 30px; + grid-template-rows: calc(100px + 2em) minmax(10%, auto); +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div> +<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div> +<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"> + <div class="gridItem"></div> +</div> +<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"> + <div class="gridItem2"></div> +</div> +<div class="grid definite gridWithEM" id="gridWithEMElement"></div> +<div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> +<div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> +<div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItems"></div> +<div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div> +<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div> +<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement"> + <div class="gridItem"></div> + <div class="gridItem2"></div> +</div> +<div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> +<div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div> +<div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction"></div> +<div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></div> +<div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div> +<div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div> +<div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div> +<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div> +<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMax"></div> + +<script> +function testGridDefinitionsValues(id, columnValue, rowValue) +{ + test(function(){ + var element = document.getElementById(id); + var readColumnValue = getComputedStyle(element).gridTemplateColumns; + var readRowValue = getComputedStyle(element).gridTemplateRows; + assert_equals(readColumnValue, columnValue); + assert_equals(readRowValue, rowValue); + }, `Test getting grid-template-columns and grid-template-rows set through CSS for element '${id}' : grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`); +} + +function testGridDefinitionsSetJSValues( + columnValue, + rowValue, + computedColumnValue = columnValue, + computedRowValue = rowValue, + jsColumnValue = columnValue, + jsRowValue = rowValue) +{ + test(function(){ + window.element = document.createElement("div"); + document.body.appendChild(element); + element.style.display = "grid"; + element.style.width = "800px"; + element.style.height = "600px"; + element.style.justifyContent = "start"; + element.style.alignContent = "start"; + element.style.font = "10px Ahem"; // Used to resolve em font consistently. + element.style.gridTemplateColumns = columnValue; + element.style.gridTemplateRows = rowValue; + assert_equals(getComputedStyle(element).gridTemplateColumns, computedColumnValue); + assert_equals(element.style.gridTemplateColumns, jsColumnValue); + assert_equals(getComputedStyle(element).gridTemplateRows, computedRowValue); + assert_equals(element.style.gridTemplateRows, jsRowValue); + document.body.removeChild(element); + }, `Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '${computedColumnValue}', element.style.gridTemplateColumns = '${columnValue}', grid-template-rows = '${computedRowValue}', element.style.gridTemplateRows = '${rowValue}'`); +} + +function testGridDefinitionsSetBadJSValues(columnValue, rowValue) +{ + test(function(){ + window.element = document.createElement("div"); + document.body.appendChild(element); + element.style.gridTemplateColumns = columnValue; + element.style.gridTemplateRows = rowValue; + assert_equals(getComputedStyle(element).gridTemplateColumns, "none"); + assert_equals(getComputedStyle(element).gridTemplateRows, "none"); + document.body.removeChild(element); + }, `Test setting bad JS values: grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`); +} + +function testDefaultValue() +{ + test(function(){ + var element = document.createElement("div"); + document.body.appendChild(element); + assert_equals(getComputedStyle(element).gridTemplateColumns, "none"); + assert_equals(getComputedStyle(element).gridTemplateRows, "none"); + document.body.removeChild(element); + }, `Test the default value`); +} + +function testWrongCSSValue() +{ + test(function(){ + var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto"); + assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateColumns, "none"); + assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateRows, "none"); + + var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed"); + assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateColumns, "none"); + assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateRows, "none"); + }, `Test setting wrong/invalid values through CSS`); +} + +function testInherit() +{ + test(function(){ + var parentElement = document.createElement("div"); + document.body.appendChild(parentElement); + parentElement.style.display = "grid"; + parentElement.style.width = "800px"; + parentElement.style.height = "600px"; + parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently. + parentElement.style.gridTemplateColumns = "50px 1fr [last]"; + parentElement.style.gridTemplateRows = "2em [middle] 45px"; + assert_equals(getComputedStyle(parentElement).gridTemplateColumns, "50px 750px [last]"); + assert_equals(getComputedStyle(parentElement).gridTemplateRows, "20px [middle] 45px"); + + element = document.createElement("div"); + parentElement.appendChild(element); + element.style.display = "grid"; + element.style.gridTemplateColumns = "inherit"; + element.style.gridTemplateRows = "inherit"; + assert_equals(getComputedStyle(element).gridTemplateColumns, "50px 0px [last]"); + assert_equals(getComputedStyle(element).gridTemplateRows, "20px [middle] 45px"); + + document.body.removeChild(parentElement); + }, `Test setting grid-template-columns and grid-template-rows to 'inherit' through JS`); +} + +function testInitial() +{ + test(function(){ + element = document.createElement("div"); + document.body.appendChild(element); + element.style.display = "grid"; + element.style.width = "800px"; + element.style.height = "600px"; + element.style.gridTemplateColumns = "150% [middle] 55px"; + element.style.gridTemplateRows = "1fr [line] 2fr [line]"; + assert_equals(getComputedStyle(element).gridTemplateColumns, "1200px [middle] 55px"); + assert_equals(getComputedStyle(element).gridTemplateRows, "200px [line] 400px [line]"); + + element.style.gridTemplateColumns = "initial"; + element.style.gridTemplateRows = "initial"; + assert_equals(getComputedStyle(element).gridTemplateColumns, "none"); + assert_equals(getComputedStyle(element).gridTemplateRows, "none"); + + document.body.removeChild(element); + }, `Test setting grid-template-columns and grid-template-rows to 'initial' through JS`); +} + +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + testGridDefinitionsValues("gridWithFixedElement", "7px 11px", "17px 2px"); + testGridDefinitionsValues("gridWithPercentElement", "400px 800px", "150px 450px"); + // This test failing in Firefox is caused by https://bugzilla.mozilla.org/show_bug.cgi?id=1481876 + testGridDefinitionsValues("gridWithPercentWithoutSize", "3.5px 7px", "4px 12px"); + testGridDefinitionsValues("gridWithAutoElement", "0px 17px", "0px 3px"); + testGridDefinitionsValues("gridWithEMElement", "100px 120px", "150px 170px"); + testGridDefinitionsValues("gridWithThreeItems", "15px 0px 100px", "120px 18px 0px"); + testGridDefinitionsValues("gridWithFitContentAndFitAvailable", "none", "none"); + testGridDefinitionsValues("gridWithMinMaxContent", "0px 0px", "0px 0px"); + testGridDefinitionsValues("gridWithMinMaxContentWithChildrenElement", "7px 17px", "16px 3px"); + testGridDefinitionsValues("gridWithMinMaxAndFixed", "240px 15px", "120px 210px"); + testGridDefinitionsValues("gridWithMinMaxAndMinMaxContent", "240px 15px", "120px 210px"); + testGridDefinitionsValues("gridWithFractionFraction", "320px 480px", "225px 375px"); + testGridDefinitionsValues("gridWithFractionMinMax", "45px 755px", "586px 14px"); + testGridDefinitionsValues("gridWithCalcCalc", "200px 100px", "150px 75px"); + testGridDefinitionsValues("gridWithCalcAndFixed", "400px 80px", "88px 150px"); + testGridDefinitionsValues("gridWithCalcAndMinMax", "190px 80px", "150px 53px"); + testGridDefinitionsValues("gridWithCalcInsideMinMax", "400px 120px", "150px 175px"); + testGridDefinitionsValues("gridWithAutoInsideMinMax", "0px 30px", "132px 60px"); + + testGridDefinitionsSetJSValues("18px 22px", "66px 70px"); + testGridDefinitionsSetJSValues("55% 80%", "40% 63%", "440px 640px", "240px 378px"); + testGridDefinitionsSetJSValues("auto auto", "auto auto", "0px 0px", "0px 0px"); + testGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "0px 160px 22px", "336px 100px 0px"); + testGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px 20px", "90px 0px"); + testGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 640px", "600px 0px"); + testGridDefinitionsSetJSValues("calc(25px) calc(2em)", "auto calc(10%)", "25px 20px", "0px 60px", "calc(25px) calc(2em)", "auto calc(10%)"); + // This test failing in Chromium is caused by https://bugs.chromium.org/p/chromium/issues/detail?id=1050968 + testGridDefinitionsSetJSValues("calc(25px + 40%) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto", "345px 92px", "100px 0px", "calc(40% + 25px) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto"); + + testWrongCSSValue(); + + testGridDefinitionsSetBadJSValues("none auto", "none auto"); + testGridDefinitionsSetBadJSValues("none 16em", "none 56%"); + testGridDefinitionsSetBadJSValues("none none", "none none"); + testGridDefinitionsSetBadJSValues("auto none", "auto none"); + testGridDefinitionsSetBadJSValues("auto none 16em", "auto 18em none"); + testGridDefinitionsSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available"); + // Negative values are not allowed. + testGridDefinitionsSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw"); + testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 10vw"); + // Invalid expressions with calc + testGridDefinitionsSetBadJSValues("10px calc(16px 30px)", "calc(25px + auto) 2em"); + testGridDefinitionsSetBadJSValues("minmax(min-content, calc() 250px", "calc(2em("); + + testInherit(); + + testDefaultValue() + + testInitial(); + + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html b/testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html new file mode 100644 index 0000000000..411687abdb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html @@ -0,0 +1,386 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=392200"> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/css/support/alignment.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing"> +<meta name="assert" content="Checks resolution of content sized grid columns and verifies that items are processed by ascending span to compute column breadths"> +<style> +.grid { + font: 10px/1 Ahem; + } +.gridWidth300 { + width: 300px; +} +.gridMinContentFixedAndAuto { + grid-template-columns: minmax(min-content, 15px) auto; +} +.gridMaxContentFixedAndAuto { + grid-template-columns: minmax(max-content, 15px) auto; +} +.gridAutoAndAuto { + grid-template-columns: auto auto; +} +.gridMinContentAndMinContentFixed { + grid-template-columns: min-content minmax(min-content, 30px); +} +.gridMinContentAndMaxContentFixed { + grid-template-columns: min-content minmax(max-content, 30px); +} +.gridMaxContentAndMinContent { + grid-template-columns: max-content min-content; +} +.gridFixedMinContentAndMaxContent { + grid-template-columns: minmax(10px, min-content) max-content; +} +.gridFixedMaxContentAndMinContent { + grid-template-columns: minmax(10px, max-content) min-content; +} +.gridAutoMinContent { + grid-template-columns: auto min-content; +} +.gridAutoMaxContent { + grid-template-columns: auto max-content; +} +.gridMaxContentAndMinContentFixed { + grid-template-columns: max-content minmax(min-content, 35px); +} +.gridMaxContentAndMaxContentFixed { + grid-template-columns: max-content minmax(max-content, 35px); +} +.gridMinContentFixedAndFixedFixedAndAuto { + grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto; +} +.gridAutoAndFixedFixedAndMaxContentFixed { + grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px); +} +.gridMaxContentAndMaxContentFixedAndMaxContent { + grid-template-columns: max-content minmax(max-content, 20px) max-content; +} +.gridAutoAndMinContentFixedAndMinContent { + grid-template-columns: auto minmax(min-content, 30px) min-content; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAuto"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixed"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContent"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContent"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContent"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixed"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAuto"> + <div class="firstRowBothColumn">XXXX XXXX</div> + </div> +</div> + +<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContent"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContent"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixed"> + <div class="firstRowBothColumn">XXXX XXXX</div> + </div> +</div> + +<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixed"> + <div class="firstRowBothColumn">XXXX XXXX</div> +</div> + +<!-- Check that items are processed by ascending span instead of going track by track forbidding extra space distribution. --> +<div class="constrainedContainer"> + <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoUnsortedConstrained"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XXXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsortedConstrained"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsortedConstrained"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XX XX XX</div> + <div class="firstRowSecondColumn">XXXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsortedConstrained"> + <div class="firstRowBothColumn">XXX XXX</div> + <div class="firstRowSecondColumn">XXXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsortedConstrained"> + <div class="firstRowBothColumn">XXXXX XX</div> + <div class="firstRowSecondColumn">XXX</div> + <div class="firstRowSecondColumn">XXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsortedConstrained"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">X X</div> + <div class="firstRowSecondColumn">XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsortedConstrained"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XXXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoUnsortedConstrained"> + <div class="firstRowBothColumn">XX XX</div> + <div class="firstRowSecondColumn">XXXX</div> + <div class="firstRowSecondColumn">XXX XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoMinContent" id="gridAutoMinContentUnsortedConstrained"> + <div class="firstRowBothColumn">XX XX XX XX</div> + <div class="firstRowSecondColumn">XXXXXX XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsortedConstrained"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XXX XXX</div> + <div class="firstRowSecondColumn">XXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsortedConstrained"> + <div class="firstRowBothColumn">XXX XXX</div> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsortedConstrained"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XX XX XX XX</div> + <div class="firstRowSecondColumn">XXXXXXX</div> + </div> +</div> + +<!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. --> +<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoUnsorted"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XXXX XXXX</div> +</div> + +<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoUnsorted"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XXX</div> +</div> + +<div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsorted"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XX XX XX XX</div> + <div class="firstRowSecondColumn">XXXX XXXX</div> +</div> + +<div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsorted"> + <div class="firstRowBothColumn">XXX XXX</div> + <div class="firstRowSecondColumn">XXXXXXX</div> +</div> + +<div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsorted"> + <div class="firstRowBothColumn">XXXXX XX</div> + <div class="firstRowSecondColumn">XXX</div> + <div class="firstRowSecondColumn">XXXXX</div> +</div> + +<div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsorted"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">X X</div> + <div class="firstRowSecondColumn">XXXX</div> +</div> + +<div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsorted"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XXXX XXXX</div> +</div> + +<div class="grid gridMaxContentFixedAndAuto justifyContentStart" id="gridMaxContentFixedAndAutoUnsorted"> + <div class="firstRowBothColumn">XX XX</div> + <div class="firstRowSecondColumn">XXXX</div> + <div class="firstRowSecondColumn">XXX XXX</div> +</div> + +<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContentUnsorted"> + <div class="firstRowBothColumn">XX XX XX XX</div> + <div class="firstRowSecondColumn">XXXXXX XXXXXX</div> +</div> + +<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContentUnsorted"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XXX XXX</div> + <div class="firstRowSecondColumn">XXXXX</div> +</div> + +<div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsorted"> + <div class="firstRowBothColumn">XXX XXX</div> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XXXX XXXX</div> + <div class="firstRowSecondColumn">XX</div> +</div> + +<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsorted"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XX XX XX XX</div> + <div class="firstRowSecondColumn">XXXXXXX</div> +</div> + +<!-- The next four force the grid to grow only a particular subset of tracks above the limits --> +<div class="constrainedContainer"> + <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoAboveLimits"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XXXXXXXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoAboveLimits"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinContentFixedAndFixedFixedAndAuto" id="gridMinContentFixedAndFixedFixedAndAuto"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XXXXXXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndFixedFixedAndMaxContentFixed" id="gridAutoAndFixedFixedAndMaxContentFixed"> + <div class="firstRowBothColumn">XXXX XXXX</div> + <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div> + </div> +</div> + +<div class="grid gridMaxContentAndMaxContentFixedAndMaxContent" id="gridMaxContentAndMaxContentFixedAndMaxContent"> + <div style="grid-row: 1; grid-column: 1;">X X X</div> + <div style="grid-row: 1; grid-column: 3;">X X</div> + <div style="grid-row: 1; grid-column: 1 / -1;">XX XX XX XX XX</div> +</div> + +<div class="grid gridAutoAndMinContentFixedAndMinContent justifyContentStart" id="gridAutoAndMinContentFixedAndMinContent"> + <div style="grid-row: 1; grid-column: 1;">XX</div> + <div style="grid-row: 1; grid-column: 1 / -1;">XXXXXXXXXXXXXXX</div> + <div style="grid-row: 1; grid-column: 3;">XXX XXX</div> +</div> + +<script> +function testGridColumnsValues(id, computedColumnValue) { + test(function(){ + var div = document.getElementById(id); + var readValue = getComputedStyle(div).gridTemplateColumns; + assert_equals(readValue, computedColumnValue); + }, `Element '${id}' grid-template-columns value computes to '${computedColumnValue}'`); +} + +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px"); + testGridColumnsValues("gridAutoAndAuto", "45px 45px"); + testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px"); + testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px"); + testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px"); + testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px"); + testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px"); + testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px"); + testGridColumnsValues("gridAutoMinContent", "70px 20px"); + testGridColumnsValues("gridAutoMaxContent", "20px 70px"); + testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px"); + testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px"); + + // Check that items are processed by ascending span to compute track breadths forbidding extra space distribution. + testGridColumnsValues("gridMinContentFixedAndAutoUnsortedConstrained", "0px 40px"); + testGridColumnsValues("gridAutoAndAutoUnsortedConstrained", "10px 30px"); + testGridColumnsValues("gridMinContentAndMinContentFixedUnsortedConstrained", "0px 40px"); + testGridColumnsValues("gridMaxContentAndMinContentUnsortedConstrained", "0px 70px"); + testGridColumnsValues("gridFixedMinContentAndMaxContentUnsortedConstrained", "10px 70px"); + testGridColumnsValues("gridFixedMaxContentAndMinContentUnsortedConstrained", "10px 40px"); + testGridColumnsValues("gridMinContentAndMaxContentFixedUnsortedConstrained", "0px 90px"); + testGridColumnsValues("gridMaxContentFixedAndAutoUnsortedConstrained", "10px 40px"); + testGridColumnsValues("gridAutoMinContentUnsortedConstrained", "0px 60px"); + testGridColumnsValues("gridAutoMaxContentUnsortedConstrained", "0px 90px"); + testGridColumnsValues("gridMaxContentAndMinContentFixedUnsortedConstrained", "50px 40px"); + testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsortedConstrained", "40px 70px"); + + // Check that items are processed by ascending span to compute track breadths allowing extra space distribution. + testGridColumnsValues("gridMinContentFixedAndAutoUnsorted", "15px 90px"); + testGridColumnsValues("gridAutoAndAutoUnsorted", "60px 30px"); + testGridColumnsValues("gridMinContentAndMinContentFixedUnsorted", "0px 40px"); + testGridColumnsValues("gridMaxContentAndMinContentUnsorted", "0px 70px"); + testGridColumnsValues("gridFixedMinContentAndMaxContentUnsorted", "10px 70px"); + testGridColumnsValues("gridFixedMaxContentAndMinContentUnsorted", "50px 40px"); + testGridColumnsValues("gridMinContentAndMaxContentFixedUnsorted", "0px 90px"); + testGridColumnsValues("gridMaxContentFixedAndAutoUnsorted", "15px 70px"); + testGridColumnsValues("gridAutoMinContentUnsorted", "50px 60px"); + testGridColumnsValues("gridAutoMaxContentUnsorted", "0px 90px"); + testGridColumnsValues("gridMaxContentAndMinContentFixedUnsorted", "50px 40px"); + testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsorted", "40px 70px"); + + // Check that only a subset of tracks grow above track limits. + testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px"); + testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "15px 135px"); + testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 60px"); + testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "110px 20px 20px"); + testGridColumnsValues("gridMaxContentAndMaxContentFixedAndMaxContent", "70px 20px 50px"); + testGridColumnsValues("gridAutoAndMinContentFixedAndMinContent", "55px 30px 65px"); + + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-row-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-row-invalid.html new file mode 100644 index 0000000000..ca7b1d681a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-row-invalid.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"> +<meta name="assert" content="Tests invalid values for grid-row"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> + test_invalid_value("grid-row", "5 8"); + test_invalid_value("grid-row", "5 /"); + test_invalid_value("grid-row", "8 auto"); + test_invalid_value("grid-row", "8 / /"); + test_invalid_value("grid-row", "0 / 6"); + test_invalid_value("grid-row", "8 / 0"); + test_invalid_value("grid-row", "0"); + test_invalid_value("grid-row", "span"); + test_invalid_value("grid-row", "span / span"); + test_invalid_value("grid-row", "span span / span span"); + test_invalid_value("grid-row", "4 4 / 3 span"); + test_invalid_value("grid-row", "first 4 last / 3 span"); + test_invalid_value("grid-row", "4 / first 3 last"); + test_invalid_value("grid-row", "first last / 3 span"); + test_invalid_value("grid-row", "4 / first last"); + test_invalid_value("grid-row", "span 4 4 / 3"); + test_invalid_value("grid-row", "5 span 4 / 3"); + test_invalid_value("grid-row", "span first last / 3"); + test_invalid_value("grid-row", "3 / span first last"); + test_invalid_value("grid-row", "span first last 7 / 3"); + test_invalid_value("grid-row", "3 / span first 5 last"); + test_invalid_value("grid-row", "1 span last 7 / 3"); + test_invalid_value("grid-row", "3 / 5 span first 5"); + test_invalid_value("grid-row", "-3 span / -4"); + test_invalid_value("grid-row", "-3 / span -4"); + test_invalid_value("grid-row", "span 0 / 0"); + test_invalid_value("grid-row", "0 / 0 span"); + test_invalid_value("grid-row", "last -2 span / 1 nav"); + test_invalid_value("grid-row", "2 span first / last"); + test_invalid_value("grid-row", "5 nav / last span 7"); + test_invalid_value("grid-row", "5 / 3 span 3"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-row-shortest-serialization.html b/testing/web-platform/tests/css/css-grid/parsing/grid-row-shortest-serialization.html new file mode 100644 index 0000000000..59558c0ac3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-row-shortest-serialization.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"/> +<meta name="assert" content="grid-row computed value should be the shortest serialization possible"/> +<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("grid-row", "auto / auto", "auto"); + test_computed_value("grid-row", "auto", "auto"); + test_computed_value("grid-row", "10 / auto", "10"); + test_computed_value("grid-row", "10"); + test_computed_value("grid-row", "-10 / auto", "-10"); + test_computed_value("grid-row", "-10"); + test_computed_value("grid-row", "span 2 / auto", "span 2"); + test_computed_value("grid-row", "span 2"); + test_computed_value("grid-row", "3 last / auto", "3 last"); + test_computed_value("grid-row", "3 last"); + test_computed_value("grid-row", "span first / auto", "span first"); + test_computed_value("grid-row", "span first"); + test_computed_value("grid-row", "span 2 first / auto", "span 2 first"); + test_computed_value("grid-row", "span 2 first"); + test_computed_value("grid-row", "last / last", "last"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-row-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-row-shorthand.html new file mode 100644 index 0000000000..505fdb9775 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-row-shorthand.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"> +<meta name="assert" content="grid-row should set values for grid-row-start and grid-row-end"> +<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("grid-row", "auto / auto", { + "grid-row-start": "auto", + "grid-row-end": "auto" +}); +test_shorthand_value("grid-row", "auto", { + "grid-row-start": "auto", + "grid-row-end": "auto" +}); + +test_shorthand_value("grid-row", "10 / auto", { + "grid-row-start": "10", + "grid-row-end": "auto" +}); +test_shorthand_value("grid-row", "10", { + "grid-row-start": "10", + "grid-row-end": "auto" +}); + +test_shorthand_value("grid-row", "-10 / auto", { + "grid-row-start": "-10", + "grid-row-end": "auto" +}); +test_shorthand_value("grid-row", "-10", { + "grid-row-start": "-10", + "grid-row-end": "auto" +}); + +test_shorthand_value("grid-row", "span 2 / auto", { + "grid-row-start": "span 2", + "grid-row-end": "auto" +}); +test_shorthand_value("grid-row", "span 2", { + "grid-row-start": "span 2", + "grid-row-end": "auto" +}); + +test_shorthand_value("grid-row", "3 last / auto", { + "grid-row-start": "3 last", + "grid-row-end": "auto" +}); +test_shorthand_value("grid-row", "3 last", { + "grid-row-start": "3 last", + "grid-row-end": "auto" +}); + +test_shorthand_value("grid-row", "span first / auto", { + "grid-row-start": "span first", + "grid-row-end": "auto" +}); +test_shorthand_value("grid-row", "span first", { + "grid-row-start": "span first", + "grid-row-end": "auto" +}); +test_shorthand_value("grid-row", "span 2 first / auto", { + "grid-row-start": "span 2 first", + "grid-row-end": "auto" +}); +test_shorthand_value("grid-row", "span 2 first", { + "grid-row-start": "span 2 first", + "grid-row-end": "auto" +}); + +test_shorthand_value("grid-row", "last / last", { + "grid-row-start": "last", + "grid-row-end": "last" +}); +test_shorthand_value("grid-row", "last", { + "grid-row-start": "last", + "grid-row-end": "last" +}); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html new file mode 100644 index 0000000000..e5dbe7821c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing 'grid' with invalid values</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid"> +<meta name="assert" content="grid-template supports only the grammar `<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`."> +<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", 'none none'); +test_invalid_value("grid", 'none []'); +test_invalid_value("grid", '10px'); +test_invalid_value("grid", '20%'); +test_invalid_value("grid", '5fr'); +test_invalid_value("grid", '[a]'); +test_invalid_value("grid", '[a] 10px'); +test_invalid_value("grid", '[a] 10px []'); +test_invalid_value("grid", '[]'); +test_invalid_value("grid", '10px "a"'); +test_invalid_value("grid", '[] 10px "a"'); +test_invalid_value("grid", '10px [] "a"'); +test_invalid_value("grid", '[] [] "a"'); +test_invalid_value("grid", '"a" none'); +test_invalid_value("grid", '"a" 10px 10px'); +test_invalid_value("grid", '"a" [a] 10px'); +test_invalid_value("grid", '"a" [a] 10px [a]'); +test_invalid_value("grid", '"a" [a] [a] 10px'); +test_invalid_value("grid", '"a" 10px [a] [a]'); +test_invalid_value("grid", '"a" [a] [a]'); +test_invalid_value("grid", '[a] "a" [a] [a]'); +test_invalid_value("grid", '"a" "a" [a] [a]'); +test_invalid_value("grid", '"a" [a] [a] / none'); +test_invalid_value("grid", '"a" "a" [a] [a] / none'); +test_invalid_value("grid", 'none / "a"'); +test_invalid_value("grid", '"a" / none'); +test_invalid_value("grid", 'none / [] "a"'); +test_invalid_value("grid", 'none / "a" []'); +test_invalid_value("grid", 'none / "a" [] 10px'); +test_invalid_value("grid", 'auto-flow 100px'); +test_invalid_value("grid", 'auto-flow / auto-flow'); +test_invalid_value("grid", 'auto-flow 1fr / auto-flow 1fr'); +test_invalid_value("grid", 'dense auto-flow / dense auto-flow'); +test_invalid_value("grid", 'auto / auto-flow foo()'); +// FIXME: add more values to test full syntax + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html new file mode 100644 index 0000000000..7751fd883b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: only serialize 'grid' when the value can roundtrip</title> +<link rel="author" title="Daniel Libby" href="mailto:dlibby@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid"> +<meta name="assert" content="grid shorthand must not serialize when the value cannot roundtrip."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> + function test_shorthand_roundtrip(cssText, properties, declarations) { + var div = document.createElement('div'); + div.style.cssText = cssText; + + for (let property of Object.keys(properties).sort()) { + test(function(){ + const readValue = div.style[property]; + if (Array.isArray(properties[property])) { + assert_in_array(readValue, properties[property], property + " serialization should be sound"); + } else { + assert_equals(readValue, properties[property], property + " serialization should be canonical"); + } + + if (readValue != "") { + div.style[property] = ""; + div.style[property] = readValue; + assert_equals(div.style[property], readValue, "serialization should round-trip"); + } + }, "e.style.cssText = " + cssText + " should set " + property); + } + + if (declarations) { + let cssText = div.style.cssText; + declarations.forEach(decl => { + test(function(){ + assert_true(cssText.indexOf(decl) !== -1, `cssText ('${cssText}') must contain '${decl}'`); + }, `cssText ('${cssText}') must contain '${decl}'`); + }); + } + } + + test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px', + { + 'grid': 'none / 100px 100px', + 'grid-template-areas': 'none' + }); + + test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four"', + { + 'grid': '', + 'grid-template-areas': '"one two" "three four"', + 'grid-auto-flow': 'row', + 'grid-auto-rows': 'auto' + }); + + test_shorthand_roundtrip('grid: 30px 40px / 50px 60px; grid-auto-flow: column', + { + 'grid': '', + 'grid-template': '30px 40px / 50px 60px', + 'grid-auto-flow': 'column', + }, [ + 'grid-template: 30px 40px / 50px 60px;', + 'grid-auto-rows: auto;', + 'grid-auto-columns: auto;', + 'grid-auto-flow: column;' + ]); + + test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: 20px', + { + 'grid': '20px / 10px', + 'grid-template': '20px / 10px' + }, [ + 'grid: 20px / 10px;' + ]); + + test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-flow: inherit', { 'grid': '' }); + test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-flow: row', { 'grid': '1px / 2px' }); + test_shorthand_roundtrip('grid: none / 2px; grid-auto-flow: row', { 'grid': 'none / 2px' }); + test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-columns: auto', { 'grid': '1px / 2px' }); + test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-rows: auto', { 'grid': '1px / 2px' }); + test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: auto', { 'grid': '1px / auto-flow 2px' }); + test_shorthand_roundtrip('grid: 1px / auto-flow; grid-auto-columns: auto', { 'grid': '1px / auto-flow' }); + test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: auto', { 'grid': 'auto-flow 1px / 2px' }); + test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-auto-columns: auto', { 'grid': 'auto-flow 1px / none' }); + test_shorthand_roundtrip('grid: auto-flow dense / 2px; grid-auto-rows: auto', { 'grid': 'auto-flow dense / 2px' }); + + test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: 3px', + { + 'grid': '', + 'grid-auto-columns': '3px', + 'grid-auto-rows': '1px', + 'grid-auto-flow': 'row', + 'grid-template-columns': '2px', + 'grid-template-rows': 'none' + }); + test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: 3px', + { + 'grid': '', + 'grid-auto-columns': '2px', + 'grid-auto-rows': '3px', + 'grid-auto-flow': 'column', + 'grid-template-columns': 'none', + 'grid-template-rows': '1px' + }); + test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: 3px', + { + 'grid': '', + 'grid-auto-columns': '1px', + 'grid-auto-rows': 'auto', + 'grid-auto-flow': 'column', + 'grid-template-columns': '3px', + 'grid-template-rows': 'none' + }); + test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: 3px', + { + 'grid': '', + 'grid-auto-columns': 'auto', + 'grid-auto-rows': '1px', + 'grid-auto-flow': 'row', + 'grid-template-columns': 'none', + 'grid-template-rows': '3px' + }); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html new file mode 100644 index 0000000000..8d546a8212 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing 'grid' with valid values</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid"> +<meta name="assert" content="grid-template supports the grammar `<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + +// <'grid-template'> values +test_valid_value("grid", 'none'); +test_valid_value("grid", 'none / none', 'none'); +test_valid_value("grid", 'auto / auto'); +test_valid_value("grid", 'none / [a] 0px'); +test_valid_value("grid", 'none / [] 0px', 'none / 0px'); +test_valid_value("grid", '[a] 10px / auto'); +test_valid_value("grid", '[a] 10px / none'); +test_valid_value("grid", '[] 10px [] / [] auto []', '10px / auto'); +test_valid_value("grid", '[a] "a" 10px'); +test_valid_value("grid", '[a] "a" 10px []', '[a] "a" 10px'); +test_valid_value("grid", '"a" 10px'); +test_valid_value("grid", '[] "a" 10px', '"a" 10px'); +test_valid_value("grid", '[a] "a" 10px [a]'); +test_valid_value("grid", '"a"'); +test_valid_value("grid", '"a" auto', '"a"'); +test_valid_value("grid", '"a a a"', '"a a a"'); +test_valid_value("grid", '"a" / 10px'); +test_valid_value("grid", '"a" / 20%'); +test_valid_value("grid", '"a" / 5fr'); +test_valid_value("grid", '[a] "a"'); +test_valid_value("grid", '[a] "a" [a]'); +test_valid_value("grid", '[] "a"', '"a"'); +test_valid_value("grid", '"a" [] [] "b"', '"a" "b"'); +test_valid_value("grid", '"a" [] "b"', '"a" "b"'); +test_valid_value("grid", '"a" [a] [b] "b"', '"a" [a b] "b"'); +test_valid_value("grid", '"a" [a] "b"'); +test_valid_value("grid", '"a" / 0', '"a" / 0px'); +test_valid_value("grid", '"a" 10px / 10px'); +test_valid_value("grid", '"a" [a] "b" 10px'); +test_valid_value("grid", '"a" [a] "b" 10px [a]'); +test_valid_value("grid", '"a" [a] [a] "b" 10px', '"a" [a a] "b" 10px'); +test_valid_value("grid", '"a" [a] [] "b" 10px', '"a" [a] "b" 10px'); +test_valid_value("grid", '"a" 10px [a] "b" [a]'); +test_valid_value("grid", '"a" [a] "b" [a]'); +test_valid_value("grid", '[a] "a" [a] "b" [a]'); +test_valid_value("grid", '"a" "a" [a] "b" [a]'); +test_valid_value("grid", '"a" [a] "b" [a] / 0', '"a" [a] "b" [a] / 0px'); +test_valid_value("grid", '"a" "a" [a] [a] "b" / auto', '"a" "a" [a a] "b" / auto'); +test_valid_value("grid", '100px / auto-flow dense 100px'); +test_valid_value("grid", 'auto-flow dense 1fr / 100px'); +test_valid_value("grid", '100px / dense auto-flow 100px', '100px / auto-flow dense 100px'); +test_valid_value("grid", 'dense auto-flow 1fr / 100px', 'auto-flow dense 1fr / 100px'); +test_valid_value("grid", '100px / auto-flow 100px'); +test_valid_value("grid", 'auto-flow 1fr / 100px'); +test_valid_value("grid", 'none / auto-flow 100px'); +test_valid_value("grid", 'auto-flow 1fr / none'); +test_valid_value("grid", 'auto / auto-flow 100px'); +test_valid_value("grid", 'auto-flow 1fr / auto'); +test_valid_value("grid", '1fr / 1fr'); + +// FIXME: add more values to test full syntax + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html new file mode 100644 index 0000000000..9293d27631 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-shorthand"> +<meta name="assert" content="grid supports the full grammar '<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +// <grid-template> +test_shorthand_value('grid', 'none', { + 'grid-template-rows': 'none', + 'grid-template-columns': 'none', + 'grid-template-areas': 'none', + + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +test_shorthand_value('grid', '10px / 20%', { + 'grid-template-rows': '10px', + 'grid-template-columns': '20%', + 'grid-template-areas': 'none', + + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +// This could theoretically be serialized as "auto-flow / 10px", +// but spec mandates the 'grid-template-*' form when the +// 'grid-auto-*' properties are all initial. +test_shorthand_value('grid', 'none / 10px', { + 'grid-template-rows': 'none', + 'grid-template-columns': '10px', + 'grid-template-areas': 'none', + + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +test_shorthand_value('grid', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', { + 'grid-template-rows': 'fit-content(calc(-0.5em + 10px))', + 'grid-template-columns': 'fit-content(calc(0.5em + 10px))', + 'grid-template-areas': 'none', + + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +test_shorthand_value('grid', + '[header-top] "a a a" [header-bottom]' + + ' [main-top] "b b b" 1fr [main-bottom]' + + ' / auto 1fr auto', { + 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]', + 'grid-template-columns': 'auto 1fr auto', + 'grid-template-areas': '"a a a" "b b b"', + + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +test_shorthand_value('grid', + ' "a a a"' + + ' "b b b" 1fr' + + '/ auto 1fr auto', { + 'grid-template-rows': 'auto 1fr', + 'grid-template-columns': 'auto 1fr auto', + 'grid-template-areas': '"a a a" "b b b"', + + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +test_shorthand_value('grid', + ' [] "a a a" []' + + ' [] "b b b" 1fr []' + + ' / [] auto 1fr [] auto []', { + 'grid-template-rows': 'auto 1fr', + 'grid-template-columns': 'auto 1fr auto', + 'grid-template-areas': '"a a a" "b b b"', + + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +// <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? +test_shorthand_value('grid', + '10px' + + ' / auto-flow dense' + + ' 20px', { + 'grid-template-rows': '10px', + 'grid-template-columns': 'none', + 'grid-template-areas': 'none', + + 'grid-auto-rows': 'auto', + 'grid-auto-columns': '20px', + 'grid-auto-flow': 'column dense' +}); + +// [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> +test_shorthand_value('grid', + 'auto-flow dense' + + ' 30px /' + + ' 40px', { + 'grid-template-rows': 'none', + 'grid-template-columns': '40px', + 'grid-template-areas': 'none', + + 'grid-auto-rows': '30px', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'dense' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html new file mode 100644 index 0000000000..8290a40088 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateAreas</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas"> +<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("grid-template-areas", "none"); +test_computed_value("grid-template-areas", '"first"'); +test_computed_value("grid-template-areas", '"first second"'); +test_computed_value("grid-template-areas", '"1st 2nd 3rd"'); +test_computed_value("grid-template-areas", '"first second" "third fourth"'); +test_computed_value("grid-template-areas", '"first second" "third ." "1st 2nd" "3rd 4th"'); + +// https://github.com/w3c/csswg-drafts/issues/3261 +test_computed_value("grid-template-areas", '" a \t b "', '"a b"'); +test_computed_value("grid-template-areas", '"c\td"', '"c d"'); +test_computed_value("grid-template-areas", '"first ..."', '"first ."'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html new file mode 100644 index 0000000000..b0e60962cf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-template-areas with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas"> +<meta name="assert" content="grid-template-areas supports only the grammar 'none | <string>+'."> +<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-template-areas", "auto"); +test_invalid_value("grid-template-areas", 'none "first"'); +test_invalid_value("grid-template-areas", '"first" none'); +test_invalid_value("grid-template-areas", '""'); +test_invalid_value("grid-template-areas", '" "'); +test_invalid_value("grid-template-areas", '"." ""'); +test_invalid_value("grid-template-areas", '"." " "'); +test_invalid_value("grid-template-areas", '"first" ""'); +test_invalid_value("grid-template-areas", '"first" "" "second"'); +test_invalid_value("grid-template-areas", '"first" " "'); +test_invalid_value("grid-template-areas", '"" none'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html new file mode 100644 index 0000000000..dc341bc35d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>grid-template-areas must define at least one cell</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> +<link rel=help href="https://www.w3.org/TR/css-grid-1/#grid-template-areas-property"> +<meta name=assert content="grid-template-areas must define at least one cell to be valid."> + +<script> +function testValidGta(val) { + test(()=>{ + const root = document.children[0]; + root.style.gridTemplateAreas = ""; + root.style.gridTemplateAreas = val; + assert_not_equals(root.style.gridTemplateAreas, ""); + }, `"grid-template-areas: ${val};" should be valid.`); +} +function testInvalidGta(val) { + test(()=>{ + const root = document.children[0]; + root.style.gridTemplateAreas = ""; + root.style.gridTemplateAreas = val; + assert_equals(root.style.gridTemplateAreas, ""); + }, `"grid-template-areas: ${val};" should be invalid.`); +} + +testValidGta("'a'"); +testValidGta("'.'"); + +testInvalidGta("''"); +testInvalidGta("'' ''"); +testInvalidGta("'$'"); +testInvalidGta("' '"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html new file mode 100644 index 0000000000..9c9bd47ec8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-template-areas with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas"> +<meta name="assert" content="grid-template-areas supports the full grammar 'none | <string>+'."> +<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-template-areas", "none"); +test_valid_value("grid-template-areas", '"first"'); +test_valid_value("grid-template-areas", '"first second"'); +test_valid_value("grid-template-areas", '"1st 2nd 3rd"'); +test_valid_value("grid-template-areas", '"first second" "third fourth"'); +test_valid_value("grid-template-areas", '"first second" "third ." "1st 2nd" "3rd 4th"'); + +// https://github.com/w3c/csswg-drafts/issues/3261 +test_valid_value("grid-template-areas", '" a \t b "', '"a b"'); +test_valid_value("grid-template-areas", '"c\td"', '"c d"'); +test_valid_value("grid-template-areas", '"first ..."', '"first ."'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html new file mode 100644 index 0000000000..98d9efa573 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing"> +<meta name="assert" content="Checks the resolved value of grid-template-columns on a grid container with a leading implicit track."> +<style> +#target { + display: grid; + width: 1px; + font-size: 1px; +} +#item { + grid-column: auto / 1; + width: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="target"> + <div id="item"></div> +</div> +<script> +// Can't use the test_computed_value from computed-testcommon.js +// because grid-template-columns doesn't round-trip in this test. +function grid_template_columns(specified, computed) { + test(() => { + const target = document.getElementById('target'); + target.style.gridTemplateColumns = ''; + target.style.gridTemplateColumns = specified; + assert_equals(getComputedStyle(target).gridTemplateColumns, computed); + }, `Property grid-template-columns value '${specified}' computes to '${computed}'`); +} + +grid_template_columns("none", "10px"); +grid_template_columns("1px", "10px 1px"); +grid_template_columns("1px [a]", "10px 1px [a]"); +grid_template_columns("1px [a] 2px", "10px 1px [a] 2px"); +grid_template_columns("[a] 1px", "10px [a] 1px"); +grid_template_columns("[a] 1px [b]", "10px [a] 1px [b]"); +grid_template_columns("1px repeat(1, 2px) 3px", "10px 1px 2px 3px"); +grid_template_columns("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px"); +grid_template_columns("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px"); +grid_template_columns("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px"); +grid_template_columns("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px"); +grid_template_columns("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px"); +grid_template_columns("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px"); +grid_template_columns("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px"); +grid_template_columns("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px"); +grid_template_columns("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); +grid_template_columns("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); +grid_template_columns("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); +grid_template_columns("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px"); +grid_template_columns("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px"); +grid_template_columns("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px"); +grid_template_columns("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); +grid_template_columns("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); +grid_template_columns("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html new file mode 100644 index 0000000000..b1f80a728c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing"> +<meta name="assert" content="Checks the resolved value of grid-template-columns on an element which is not a grid container."> +<style> +#target { + display: block; + height: 1px; + font-size: 1px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> +test_computed_value("grid-template-columns", "none"); +test_computed_value("grid-template-columns", "1px"); +test_computed_value("grid-template-columns", "1px [a]"); +test_computed_value("grid-template-columns", "1px [a] 2px"); +test_computed_value("grid-template-columns", "[a] 1px"); +test_computed_value("grid-template-columns", "[a] 1px [b]"); +test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px"); +test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px"); +test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px"); +test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px"); +test_computed_value("grid-template-columns", "1px [a] repeat(2, 2px 3px) [b] 4px"); +test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px"); +test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px"); +test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px"); +test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px"); +test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px"); +test_computed_value("grid-template-columns", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-columns", "[a] 1px 4px [d]"); +test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) [d] 4px"); +test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%"); +test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%"); +test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%"); +test_computed_value("grid-template-columns", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-columns", "repeat(1, 2px [a] 3px) [b] repeat(auto-fill, [c] 200% [d]) [e] 300%"); +test_computed_value("grid-template-columns", "[a] repeat(auto-fill, [b] 200% [c]) repeat(1, 2px [d] 3px) [e] 300%"); +test_computed_value("grid-template-columns", "repeat(1, [a] 2px [b] 3px) [b] repeat(auto-fill, [c] 200% [d]) [e] 300%"); +test_computed_value("grid-template-columns", "[a] repeat(auto-fill, [b] 200% [c]) repeat(1, 2px [d] 3px [e]) [f] 300%"); +test_computed_value("grid-template-columns", "[a] 1px [b c] repeat(auto-fill, [d] 200% [e f]) [g] 2px repeat(1, 3px [d e] 4px [e f]) [g] 300% [h]"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html new file mode 100644 index 0000000000..a550b84e05 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + display: grid; + font-size: 40px; + min-width: 200px; + width: 300px; + max-width: 400px; + min-height: 500px; + height: 600px; + max-height: 700px; + } + #child { + min-width: 20px; + width: 30px; + max-width: 40px; + min-height: 50px; + height: 60px; + max-height: 70px; + } +</style> +</head> +<body> +<div id="container"> + <div id="target"> + <div id="child"></div> + </div> +</div> +<script> +test_computed_value("grid-template-columns", 'none', '300px'); // "none" without #child + +// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto +test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width +test_computed_value("grid-template-columns", 'calc(-0.5em + 10px)', '0px'); +test_computed_value("grid-template-columns", 'calc(0.5em + 10px)', '30px'); +test_computed_value("grid-template-columns", 'calc(30% + 40px)', '130px'); // 30% * width + 40px +test_computed_value("grid-template-columns", '5fr', '300px'); // width +test_computed_value("grid-template-columns", 'min-content', '30px'); +test_computed_value("grid-template-columns", 'max-content', '30px'); +test_computed_value("grid-template-columns", 'auto', '300px'); // width + +// track-size minmax( <inflexible-breadth> , <track-breadth> ) +test_computed_value("grid-template-columns", 'minmax(10px, auto)', '300px'); // width +test_computed_value("grid-template-columns", 'minmax(20%, max-content)', '60px'); // 20% * width +test_computed_value("grid-template-columns", 'minmax(min-content, calc(-0.5em + 10px))', '30px'); +test_computed_value("grid-template-columns", 'minmax(auto, 0)', '30px'); + +// track-size fit-content( <length-percentage> ) +test_computed_value("grid-template-columns", 'fit-content(70px)', '30px'); +test_computed_value("grid-template-columns", 'fit-content(20%)', '30px'); +test_computed_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))', '30px'); + +// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ) +test_computed_value("grid-template-columns", 'repeat(1, 10px)', '10px'); +test_computed_value("grid-template-columns", 'repeat(1, [one two] 20%)', '[one two] 60px'); +test_computed_value("grid-template-columns", 'repeat(2, minmax(10px, auto))', '160px 140px'); + +test_computed_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])', + '30px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]'); + +// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? +test_computed_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))', + '30px 54px 54px 54px 54px 54px'); +test_computed_value("grid-template-columns", '[] 150px [] 1fr []', '150px 150px'); + +// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) +test_computed_value("grid-template-columns", 'repeat(auto-fill, 200px)', '200px'); +test_computed_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)', + '[one] 60px [one] 0px [one] 0px [one] 0px [one] 0px'); +test_computed_value("grid-template-columns", 'repeat(auto-fill, minmax(100px, 5fr) [two])', + '100px [two] 100px [two] 100px [two]'); +test_computed_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])', + '[three] 240px [four]'); +test_computed_value('grid-template-columns', '[a] 21px [b] repeat(auto-fill, [c] 22px [d] 23px [e]) [f] 24px [g]', + '[a] 21px [b c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e f] 24px [g]'); +test_computed_value('grid-template-columns', '[a] 21px [b c] repeat(auto-fill, [d e] 22px [f g h] 23px [i j k l]) [m n] 24px [o]', + '[a] 21px [b c d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l m n] 24px [o]'); +test_computed_value('grid-template-columns', '[a] repeat(2, [b] 20px [c d] 21px [e f g]) [h i] repeat(auto-fit, [j] 22px [k l m] 23px [n o p q]) [r s]', + '[a b] 20px [c d] 21px [e f g b] 20px [c d] 21px [e f g h i j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q r s]'); + +// <auto-track-list> = +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? +// <auto-repeat> +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? + +test_computed_value("grid-template-columns", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]', + '[one] 50px 50px [two] 30px [three] 10px 40px [four five] 200px 200px [six]'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html new file mode 100644 index 0000000000..54380ef455 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing"> +<meta name="assert" content="Checks the resolved value of grid-template-columns on a grid container."> +<style> +#target { + display: grid; + width: 1px; + font-size: 1px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> +test_computed_value("grid-template-columns", "none"); +test_computed_value("grid-template-columns", "1px"); +test_computed_value("grid-template-columns", "1px [a]"); +test_computed_value("grid-template-columns", "1px [a] 2px"); +test_computed_value("grid-template-columns", "[a] 1px"); +test_computed_value("grid-template-columns", "[a] 1px [b]"); +test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px", "1px 2px 3px"); +test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px"); +test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px"); +test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px"); +test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px"); +test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px"); +test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px"); +test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px"); +test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px"); +test_computed_value("grid-template-columns", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]"); +test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]"); +test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "[a] 1px 0px [b] 0px 4px [d]"); +test_computed_value("grid-template-columns", "100% [a] repeat(1, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px"); +test_computed_value("grid-template-columns", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px"); +test_computed_value("grid-template-columns", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "1px [a b] 0px [c d] 3px"); +test_computed_value("grid-template-columns", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]"); +test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]"); +test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px 0px [b] 0px 4px [d]"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-crash.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-crash.html new file mode 100644 index 0000000000..61bdfd8177 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1214890"> +<body></body> +<script> +let value = ''; +for (let i = 0; i < 100000; ++i) { + value += ` repeat(1000, ${i}px)`; +} +document.body.style.gridTemplateColumns = value; +document.body.textContent = 'PASS'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html new file mode 100644 index 0000000000..5a79ea13d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-template-columns with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<meta name="assert" content="grid-template-columns supports only the grammar 'none | <track-list> | <auto-track-list>'."> +<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-template-columns", '-10px'); +test_invalid_value("grid-template-columns", '-20%'); +test_invalid_value("grid-template-columns", '-5fr'); +test_invalid_value("grid-template-columns", 'minmax(5fr, calc(0.5em + 10px))'); +test_invalid_value("grid-template-columns", 'minmax(-10px, auto)'); +test_invalid_value("grid-template-columns", 'minmax(-20%, max-content)'); +test_invalid_value("grid-template-columns", 'minmax(min-content, -20%)'); +test_invalid_value("grid-template-columns", 'fit-content(-10px)'); +test_invalid_value("grid-template-columns", 'fit-content(-20%)'); +test_invalid_value("grid-template-columns", '[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]'); +test_invalid_value("grid-template-columns", '[one]'); +test_invalid_value("grid-template-columns", '[one] 10px [two] [three]'); +test_invalid_value("grid-template-columns", 'repeat(auto-fill, -10px)'); +test_invalid_value("grid-template-columns", 'repeat(auto-fill, 10px) repeat(auto-fit, 20%)'); +test_invalid_value("grid-template-columns", '[auto] 1px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html new file mode 100644 index 0000000000..6bf2e7bce6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-template-columns with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<meta name="assert" content="grid-template-columns supports the full grammar 'none | <track-list> | <auto-track-list>'."> +<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-template-columns", "none"); + +// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto +test_valid_value("grid-template-columns", '10px'); +test_valid_value("grid-template-columns", '20%'); +test_valid_value("grid-template-columns", 'calc(-0.5em + 10px)'); +test_valid_value("grid-template-columns", 'calc(0.5em + 10px)'); +test_valid_value("grid-template-columns", 'calc(30% + 40vw)'); +test_valid_value("grid-template-columns", '5fr'); +test_valid_value("grid-template-columns", 'min-content'); +test_valid_value("grid-template-columns", 'max-content'); +test_valid_value("grid-template-columns", 'auto'); + +// track-size minmax( <inflexible-breadth> , <track-breadth> ) +test_valid_value("grid-template-columns", 'minmax(10px, auto)'); +test_valid_value("grid-template-columns", 'minmax(20%, max-content)'); +test_valid_value("grid-template-columns", 'minmax(calc(-0.5em + 10px), min-content)'); +test_valid_value("grid-template-columns", 'minmax(calc(0.5em + 10px), 5fr)'); +test_valid_value("grid-template-columns", 'minmax(calc(30% + 40vw), 10px)'); +test_valid_value("grid-template-columns", 'minmax(min-content, 20%)'); +test_valid_value("grid-template-columns", 'minmax(max-content, calc(-0.5em + 10px))'); +test_valid_value("grid-template-columns", 'minmax(auto, calc(0.5em + 10px))'); + +// track-size fit-content( <length-percentage> ) +test_valid_value("grid-template-columns", 'fit-content(10px)'); +test_valid_value("grid-template-columns", 'fit-content(20%)'); +test_valid_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))'); +test_valid_value("grid-template-columns", 'fit-content(calc(0.5em + 10px))'); +test_valid_value("grid-template-columns", 'fit-content(calc(30% + 40vw))'); + +// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ) + +// 'repeat(1, [] 10px)' in Blink +// 'repeat(1, 10px)' in Firefox +// '[] 10px' in Safari +// '10px' in Edge 18 +test_valid_value("grid-template-columns", 'repeat(1, [] 10px [])', 'repeat(1, 10px)'); + +// 'repeat(1, [one two] 20%)' in Blink, Firefox +// '[one two] 20%' in Safari, Edge 18 +test_valid_value("grid-template-columns", 'repeat(1, [one two] 20%)'); + +// 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18 +// 'minmax(10px, auto) minmax(10px, auto)' in Safari +test_valid_value("grid-template-columns", 'repeat(2, minmax(10px, auto))'); + +test_valid_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])'); + +// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? +test_valid_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))'); +test_valid_value("grid-template-columns", '[] 150px [] 1fr []', '150px 1fr'); + +// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) +test_valid_value("grid-template-columns", 'repeat(auto-fill, 10px)'); +test_valid_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)'); +test_valid_value("grid-template-columns", 'repeat(auto-fill, minmax(30px, 5fr) [two])'); +test_valid_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])'); + +// <auto-track-list> = +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? +// <auto-repeat> +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? + +test_valid_value("grid-template-columns", '[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-node-not-connected.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-node-not-connected.html new file mode 100644 index 0000000000..89bee03a11 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-node-not-connected.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=261421"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<meta name="assert" content="test should not crash and grid-template for child should be the empty string after disconnecting the element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<style> +#child { + grid-template: 10px / 10px; +} +</style> +<div> + <div id="child"></div> +</div> +<script> +test(() => { + let styleDeclaration = window.getComputedStyle(document.getElementById("child")); + document.querySelector("body > div:nth-child(1)").textContent = ""; + assert_equals(styleDeclaration.gridTemplate, ""); +}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html new file mode 100644 index 0000000000..c18f296abc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/css-grid/support/grid-child-utils.js"></script> +<style> + +#target { + display: grid; + width: 32px; + height: 10px; +}; + +</style> +</head> +<body> +<div id="container"> + <div id="target"> + <div></div> + <div></div> + <div id="child"></div> + <div style="grid-column: 7"></div> + <div></div> + </div> +</div> +<script> + +let autoFitTester = new GridChildHelper(gridChildHelperCol, + "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] "); + +let autoFillTester = new GridChildHelper(gridChildHelperCol, + "[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] "); + +// Auto-fit +autoFitTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]"); +autoFitTester.runTest(4, "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]"); +autoFitTester.runTest(5, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]"); +autoFitTester.runTest(6, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 0px [g] 4px [h i] 5px [k] 6px [l m]"); +autoFitTester.runTest("4 / 5", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]"); +autoFitTester.runTest("4 / 6", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]"); +autoFitTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]"); +// Auto-fill. These tests are semi-redundant, but should still pass. +autoFillTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); +autoFillTester.runTest(4, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); +autoFillTester.runTest(5, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); +autoFillTester.runTest("4 / 7", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); +autoFillTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html new file mode 100644 index 0000000000..8cb9209cee --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/css-grid/support/grid-child-utils.js"></script> +<style> + +#target { + display: grid; + width: 54px; + height: 32px; +}; + +</style> +</head> +<body> +<div id="container"> + <div id="target"> + <div></div> + <div></div> + <div style="grid-column: 4"></div> + <div id="child"></div> + <div style="grid-column: 10"></div> + <div></div> + </div> +</div> +<script> + +// Style with 3 repeat tracks. +let style3 = + "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]"; +let col3Tester = new GridChildHelper(gridChildHelperCol, style3); +let rowTester = new GridChildHelper(gridChildHelperRow, style3); + +// Style with 2 repeat tracks. +let style2 = + "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]"; +let col2Tester = new GridChildHelper(gridChildHelperCol, style2); + +rowTester.runTest(3, + "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h] 0px [i j k] 7px [k] 8px [l m]"); +rowTester.runTest(5, + "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h] 5px [i j k] 7px [k] 8px [l m]"); +rowTester.runTest("3 / 8", + "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); +rowTester.runTest("4 / span 2", + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); +rowTester.runTest("4 / 5", + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j k] 7px [k] 8px [l m]"); + +col3Tester.runTest(3, + "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); +col3Tester.runTest(6, + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); +col3Tester.runTest("3 / 8", + "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); +col3Tester.runTest("5 / span 2", + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); +col3Tester.runTest("7 / span 2", + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); +col3Tester.runTest("5 / 8", + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); +col3Tester.runTest("8 / 10", + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 5px [i j e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); + +col2Tester.runTest(3, + "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); +col2Tester.runTest(6, + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); +col2Tester.runTest("3 / 8", + "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); +col2Tester.runTest("6 / span 2", + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); +col2Tester.runTest("5 / 10", + "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html new file mode 100644 index 0000000000..7ed3110c76 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing"> +<meta name="assert" content="Checks the resolved value of grid-template-rows on a grid container with a leading implicit track."> +<style> +#target { + display: grid; + height: 1px; + font-size: 1px; +} +#item { + grid-row: auto / 1; + height: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="target"> + <div id="item"></div> +</div> +<script> +// Can't use the test_computed_value from computed-testcommon.js +// because grid-template-rows doesn't round-trip in this test. +function grid_template_rows(specified, computed) { + test(() => { + const target = document.getElementById('target'); + target.style.gridTemplateRows = ''; + target.style.gridTemplateRows = specified; + assert_equals(getComputedStyle(target).gridTemplateRows, computed); + }, `Property grid-template-rows value '${specified}' computes to '${computed}'`); +} + +grid_template_rows("none", "10px"); +grid_template_rows("1px", "10px 1px"); +grid_template_rows("1px [a]", "10px 1px [a]"); +grid_template_rows("1px [a] 2px", "10px 1px [a] 2px"); +grid_template_rows("[a] 1px", "10px [a] 1px"); +grid_template_rows("[a] 1px [b]", "10px [a] 1px [b]"); +grid_template_rows("1px repeat(1, 2px) 3px", "10px 1px 2px 3px"); +grid_template_rows("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px"); +grid_template_rows("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px"); +grid_template_rows("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px"); +grid_template_rows("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px"); +grid_template_rows("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px"); +grid_template_rows("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px"); +grid_template_rows("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px"); +grid_template_rows("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px"); +grid_template_rows("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); +grid_template_rows("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); +grid_template_rows("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); +grid_template_rows("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px"); +grid_template_rows("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px"); +grid_template_rows("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px"); +grid_template_rows("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); +grid_template_rows("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); +grid_template_rows("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html new file mode 100644 index 0000000000..057a7fa061 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing"> +<meta name="assert" content="Checks the resolved value of grid-template-rows on an element which is not a grid container."> +<style> +#target { + display: block; + height: 1px; + font-size: 1px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> +test_computed_value("grid-template-rows", "none"); +test_computed_value("grid-template-rows", "1px"); +test_computed_value("grid-template-rows", "1px [a]"); +test_computed_value("grid-template-rows", "1px [a] 2px"); +test_computed_value("grid-template-rows", "[a] 1px"); +test_computed_value("grid-template-rows", "[a] 1px [b]"); +test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px"); +test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px"); +test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px"); +test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px"); +test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px"); +test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px"); +test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px"); +test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px"); +test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px"); +test_computed_value("grid-template-rows", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%"); +test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%"); +test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%"); +test_computed_value("grid-template-rows", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]"); +test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html new file mode 100644 index 0000000000..693cf338c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows"> +<meta name="assert" content="grid-template-rows computed value is the keyword none or a computed track list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + display: grid; + font-size: 40px; + min-width: 200px; + width: 300px; + max-width: 400px; + min-height: 500px; + height: 600px; + max-height: 700px; + } + #child { + min-width: 20px; + width: 30px; + max-width: 40px; + min-height: 50px; + height: 60px; + max-height: 70px; + } +</style> +</head> +<body> +<div id="container"> + <div id="target"> + <div id="child"></div> + </div> +</div> +<script> +test_computed_value("grid-template-rows", 'none', '600px'); // "none" without #child + +// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto +test_computed_value("grid-template-rows", '20%', '120px'); // 20% * height +test_computed_value("grid-template-rows", 'calc(-0.5em + 10px)', '0px'); +test_computed_value("grid-template-rows", 'calc(0.5em + 10px)', '30px'); +test_computed_value("grid-template-rows", 'calc(30% + 40px)', '220px'); // 30% * height + 40px +test_computed_value("grid-template-rows", '5fr', '600px'); // height +test_computed_value("grid-template-rows", 'min-content', '60px'); +test_computed_value("grid-template-rows", 'max-content', '60px'); +test_computed_value("grid-template-rows", 'auto', '600px'); // height + +// track-size minmax( <inflexible-breadth> , <track-breadth> ) +test_computed_value("grid-template-rows", 'minmax(10px, auto)', '600px'); // height +test_computed_value("grid-template-rows", 'minmax(20%, max-content)', '120px'); // 20% * height +test_computed_value("grid-template-rows", 'minmax(min-content, calc(-0.5em + 10px))', '60px'); +test_computed_value("grid-template-rows", 'minmax(auto, 0)', '60px'); + +// track-size fit-content( <length-percentage> ) +test_computed_value("grid-template-rows", 'fit-content(70px)', '60px'); +test_computed_value("grid-template-rows", 'fit-content(20%)', '60px'); +test_computed_value("grid-template-rows", 'fit-content(calc(-0.5em + 10px))', '60px'); + +// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ) +test_computed_value("grid-template-rows", 'repeat(1, 10px)', '10px'); +test_computed_value("grid-template-rows", 'repeat(1, [one two] 20%)', '[one two] 120px'); +test_computed_value("grid-template-rows", 'repeat(2, minmax(10px, auto))', '325px 275px'); + +test_computed_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])', + '60px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]'); + +// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? +test_computed_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))', + '60px 108px 108px 108px 108px 108px'); +test_computed_value("grid-template-rows", '[] 150px [] 1fr []', '150px 450px'); + +// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) +test_computed_value("grid-template-rows", 'repeat(auto-fill, 200px)', '200px 200px 200px'); +test_computed_value("grid-template-rows", 'repeat(auto-fit, [one] 20%)', + '[one] 120px [one] 0px [one] 0px [one] 0px [one] 0px'); +test_computed_value("grid-template-rows", 'repeat(auto-fill, minmax(100px, 5fr) [two])', + '100px [two] 100px [two] 100px [two] 100px [two] 100px [two] 100px [two]'); +test_computed_value("grid-template-rows", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])', + '[three] 240px [four three] 0px [four]'); + +// <auto-track-list> = +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? +// <auto-repeat> +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? + +test_computed_value("grid-template-rows", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]', + '[one] 50px 50px [two] 30px [three] 10px 10px 10px 40px [four five] 200px 200px [six]'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html new file mode 100644 index 0000000000..b7584e1954 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing"> +<meta name="assert" content="Checks the resolved value of grid-template-rows on a grid container."> +<style> +#target { + display: grid; + height: 1px; + font-size: 1px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> +test_computed_value("grid-template-rows", "none"); +test_computed_value("grid-template-rows", "1px"); +test_computed_value("grid-template-rows", "1px [a]"); +test_computed_value("grid-template-rows", "1px [a] 2px"); +test_computed_value("grid-template-rows", "[a] 1px"); +test_computed_value("grid-template-rows", "[a] 1px [b]"); +test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px", "1px 2px 3px"); +test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px"); +test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px"); +test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px"); +test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px"); +test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px"); +test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px"); +test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px"); +test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px"); +test_computed_value("grid-template-rows", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]"); +test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]"); +test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "[a] 1px 0px [b] 0px 4px [d]"); +test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px"); +test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px"); +test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "1px [a b] 0px [c d] 3px"); +test_computed_value("grid-template-rows", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]"); +test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]"); +test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px 0px [b] 0px 4px [d]"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html new file mode 100644 index 0000000000..24008e65e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-template-rows with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows"> +<meta name="assert" content="grid-template-rows supports only the grammar 'none | <track-list> | <auto-track-list>'."> +<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-template-rows", '-10px'); +test_invalid_value("grid-template-rows", '-20%'); +test_invalid_value("grid-template-rows", '-5fr'); +test_invalid_value("grid-template-rows", 'minmax(5fr, calc(0.5em + 10px))'); +test_invalid_value("grid-template-rows", 'minmax(-10px, auto)'); +test_invalid_value("grid-template-rows", 'minmax(-20%, max-content)'); +test_invalid_value("grid-template-rows", 'minmax(min-content, -20%)'); +test_invalid_value("grid-template-rows", 'fit-content(-10px)'); +test_invalid_value("grid-template-rows", 'fit-content(-20%)'); +test_invalid_value("grid-template-rows", '[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]'); +test_invalid_value("grid-template-rows", '[one]'); +test_invalid_value("grid-template-rows", '[one] 10px [two] [three]'); +test_invalid_value("grid-template-rows", 'repeat(auto-fill, -10px)'); +test_invalid_value("grid-template-rows", 'repeat(auto-fill, 10px) repeat(auto-fit, 20%)'); +test_invalid_value("grid-template-rows", '[auto] 1px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html new file mode 100644 index 0000000000..2d3a1ed804 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-template-rows with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows"> +<meta name="assert" content="grid-template-rows supports the full grammar 'none | <track-list> | <auto-track-list>'."> +<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-template-rows", "none"); + +// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto +test_valid_value("grid-template-rows", '10px'); +test_valid_value("grid-template-rows", '20%'); +test_valid_value("grid-template-rows", 'calc(-0.5em + 10px)'); +test_valid_value("grid-template-rows", 'calc(0.5em + 10px)'); +test_valid_value("grid-template-rows", 'calc(30% + 40vw)'); +test_valid_value("grid-template-rows", '5fr'); +test_valid_value("grid-template-rows", 'min-content'); +test_valid_value("grid-template-rows", 'max-content'); +test_valid_value("grid-template-rows", 'auto'); + +// track-size minmax( <inflexible-breadth> , <track-breadth> ) +test_valid_value("grid-template-rows", 'minmax(10px, auto)'); +test_valid_value("grid-template-rows", 'minmax(20%, max-content)'); +test_valid_value("grid-template-rows", 'minmax(calc(-0.5em + 10px), min-content)'); +test_valid_value("grid-template-rows", 'minmax(calc(0.5em + 10px), 5fr)'); +test_valid_value("grid-template-rows", 'minmax(calc(30% + 40vw), 10px)'); +test_valid_value("grid-template-rows", 'minmax(min-content, 20%)'); +test_valid_value("grid-template-rows", 'minmax(max-content, calc(-0.5em + 10px))'); +test_valid_value("grid-template-rows", 'minmax(auto, calc(0.5em + 10px))'); + +// track-size fit-content( <length-percentage> ) +test_valid_value("grid-template-rows", 'fit-content(10px)'); +test_valid_value("grid-template-rows", 'fit-content(20%)'); +test_valid_value("grid-template-rows", 'fit-content(calc(-0.5em + 10px))'); +test_valid_value("grid-template-rows", 'fit-content(calc(0.5em + 10px))'); +test_valid_value("grid-template-rows", 'fit-content(calc(30% + 40vw))'); + +// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ) + +test_valid_value("grid-template-rows", 'repeat(1, [] 10px [])', 'repeat(1, 10px)'); + +// 'repeat(1, [one two] 20%)' in Blink, Firefox +// '[one two] 20%' in Safari, Edge 18 +test_valid_value("grid-template-rows", 'repeat(1, [one two] 20%)'); + +// 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18 +// 'minmax(10px, auto) minmax(10px, auto)' in Safari +test_valid_value("grid-template-rows", 'repeat(2, minmax(10px, auto))'); + +test_valid_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])'); + +// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? +test_valid_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))'); +test_valid_value("grid-template-rows", '[] 150px [] 1fr []', '150px 1fr'); + +// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) +test_valid_value("grid-template-rows", 'repeat(auto-fill, 10px)'); +test_valid_value("grid-template-rows", 'repeat(auto-fit, [one] 20%)'); +test_valid_value("grid-template-rows", 'repeat(auto-fill, minmax(30px, 5fr) [two])'); +test_valid_value("grid-template-rows", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])'); + +// <auto-track-list> = +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? +// <auto-repeat> +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? + +test_valid_value("grid-template-rows", '[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html new file mode 100644 index 0000000000..2d2b2433a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid-template and grid-template-areas</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template"> +<meta name=assert content="grid-template and grid-template-areas parsing is valid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> + +function testValidGridTemplate(valueGridTemplate, valueGridAreas, serializedGridTemplateValue) { + if (arguments.length < 3) + serializedGridTemplateValue = valueGridTemplate; + + test(()=>{ + const root = document.children[0]; + root.style.gridTemplate = ""; + root.style.gridTemplate = valueGridTemplate; + root.style.gridTemplateAreas = ""; + root.style.gridTemplateAreas = valueGridAreas; + assert_equals(root.style.gridTemplate, serializedGridTemplateValue); + assert_equals(root.style.gridTemplateAreas, valueGridAreas); + }, `grid-template: ${valueGridTemplate} and "grid-template-areas: ${valueGridAreas};" should be valid.`); +} + +testValidGridTemplate("none / 1px", "\"a\"", ""); +testValidGridTemplate("none / none", "\"a\"", ""); +testValidGridTemplate("auto / 1px", "\"a a a\"", "\"a a a\" / 1px"); +testValidGridTemplate("auto / auto", "\"a a a\"", "\"a a a\" / auto"); +testValidGridTemplate("10px 20px 30px / 40px 50px 60px 70px", + "\"a . b .\" \"c d . e\" \"f g h .\"", + "\"a . b .\" 10px \"c d . e\" 20px \"f g h .\" 30px / 40px 50px 60px 70px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html new file mode 100644 index 0000000000..366cdf4d88 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-template with invalid values</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template"> +<meta name="assert" content="grid-template supports only the grammar `none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`."> +<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-template", 'auto'); +test_invalid_value("grid-template", 'none none'); +test_invalid_value("grid-template", 'none []'); +test_invalid_value("grid-template", '10px'); +test_invalid_value("grid-template", '20%'); +test_invalid_value("grid-template", '5fr'); +test_invalid_value("grid-template", '[a]'); +test_invalid_value("grid-template", '[a] 10px'); +test_invalid_value("grid-template", '[a] 10px []'); +test_invalid_value("grid-template", '[]'); +test_invalid_value("grid-template", '10px "a"'); +test_invalid_value("grid-template", '[] 10px "a"'); +test_invalid_value("grid-template", '10px [] "a"'); +test_invalid_value("grid-template", '[] [] "a"'); +test_invalid_value("grid-template", '"a" none'); +test_invalid_value("grid-template", '"a" 10px 10px'); +test_invalid_value("grid-template", '"a" [a] 10px'); +test_invalid_value("grid-template", '"a" [a] 10px [a]'); +test_invalid_value("grid-template", '"a" [a] [a] 10px'); +test_invalid_value("grid-template", '"a" 10px [a] [a]'); +test_invalid_value("grid-template", '"a" [a] [a]'); +test_invalid_value("grid-template", '[a] "a" [a] [a]'); +test_invalid_value("grid-template", '"a" "a" [a] [a]'); +test_invalid_value("grid-template", '"a" [a] [a] / none'); +test_invalid_value("grid-template", '"a" "a" [a] [a] / none'); +test_invalid_value("grid-template", 'none / "a"'); +test_invalid_value("grid-template", '"a" / none'); +test_invalid_value("grid-template", 'none / [] "a"'); +test_invalid_value("grid-template", 'none / "a" []'); +test_invalid_value("grid-template", 'none / "a" [] 10px'); + +// FIXME: add more values to test full syntax + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html new file mode 100644 index 0000000000..f26ef33067 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing grid-template with valid values</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template"> +<meta name="assert" content="grid-template supports the grammar `none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`."> +<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-template", 'none'); +test_valid_value("grid-template", 'none / none', 'none'); +test_valid_value("grid-template", 'auto / auto'); +test_valid_value("grid-template", 'none / [a] 0px'); +test_valid_value("grid-template", 'none / [] 0px', 'none / 0px'); +test_valid_value("grid-template", '[a] 10px / auto'); +test_valid_value("grid-template", '[a] 10px / none'); +test_valid_value("grid-template", '[] 10px [] / [] auto []', '10px / auto'); +test_valid_value("grid-template", '[a] "a" 10px'); +test_valid_value("grid-template", '[a] "a" 10px []', '[a] "a" 10px'); +test_valid_value("grid-template", '"a" 10px'); +test_valid_value("grid-template", '[] "a" 10px', '"a" 10px'); +test_valid_value("grid-template", '[a] "a" 10px [a]'); +test_valid_value("grid-template", '"a"'); +test_valid_value("grid-template", '"a" auto', '"a"'); +test_valid_value("grid-template", '"a a a"', '"a a a"'); +test_valid_value("grid-template", '"a" / 10px'); +test_valid_value("grid-template", '"a" / 20%'); +test_valid_value("grid-template", '"a" / 5fr'); +test_valid_value("grid-template", '[a] "a"'); +test_valid_value("grid-template", '[a] "a" [a]'); +test_valid_value("grid-template", '[] "a"', '"a"'); +test_valid_value("grid-template", '"a" [] [] "b"', '"a" "b"'); +test_valid_value("grid-template", '"a" [] "b"', '"a" "b"'); +test_valid_value("grid-template", '"a" [a] [b] "b"', '"a" [a b] "b"'); +test_valid_value("grid-template", '"a" [a] "b"'); +test_valid_value("grid-template", '"a" / 0', '"a" / 0px'); +test_valid_value("grid-template", '"a" 10px / 10px'); +test_valid_value("grid-template", '"a" calc(100% - 10px) / calc(10px)'); +test_valid_value("grid-template", '"a" [a] "b" 10px'); +test_valid_value("grid-template", '"a" [a] "b" 10px [a]'); +test_valid_value("grid-template", '"a" [a] [a] "b" 10px', '"a" [a a] "b" 10px'); +test_valid_value("grid-template", '"a" [a] [] "b" 10px', '"a" [a] "b" 10px'); +test_valid_value("grid-template", '"a" 10px [a] "b" [a]'); +test_valid_value("grid-template", '"a" [a] "b" [a]'); +test_valid_value("grid-template", '[a] "a" [a] "b" [a]'); +test_valid_value("grid-template", '"a" "a" [a] "b" [a]'); +test_valid_value("grid-template", '"a" [a] "b" [a] / 0', '"a" [a] "b" [a] / 0px'); +test_valid_value("grid-template", '"a" "a" [a] [a] "b" / auto', '"a" "a" [a a] "b" / auto'); +test_valid_value("grid-template", '"a" auto [a] "b" auto [b] / 10px', '"a" [a] "b" [b] / 10px'); + +// FIXME: add more values to test full syntax + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html new file mode 100644 index 0000000000..b9165359a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid-template sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template"> +<meta name="assert" content="grid-template supports the full grammar 'none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?'."> +<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('grid-template', 'none', { + 'grid-template-rows': 'none', + 'grid-template-columns': 'none', + 'grid-template-areas': 'none' +}); + +// <grid-template-rows> / <grid-template-columns> +test_shorthand_value('grid-template', '10px / 20%', { + 'grid-template-rows': '10px', + 'grid-template-columns': '20%', + 'grid-template-areas': 'none' +}); + +test_shorthand_value('grid-template', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', { + 'grid-template-rows': 'fit-content(calc(-0.5em + 10px))', + 'grid-template-columns': 'fit-content(calc(0.5em + 10px))', + 'grid-template-areas': 'none' +}); + +// [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? +test_shorthand_value('grid-template', + '[header-top] "a a a" [header-bottom]' + + ' [main-top] "b b b" 1fr [main-bottom]' + + ' / auto 1fr auto', { + 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]', + 'grid-template-columns': 'auto 1fr auto', + 'grid-template-areas': '"a a a" "b b b"' +}); + +test_shorthand_value('grid-template', + ' "a a a"' + + ' "b b b" 1fr' + + '/ auto 1fr auto', { + 'grid-template-rows': 'auto 1fr', + 'grid-template-columns': 'auto 1fr auto', + 'grid-template-areas': '"a a a" "b b b"' +}); + +test_shorthand_value('grid-template', + ' [] "a a a" []' + + ' [] "b b b" 1fr []' + + ' / [] auto 1fr [] auto []', { + 'grid-template-rows': 'auto 1fr', + 'grid-template-columns': 'auto 1fr auto', + 'grid-template-areas': '"a a a" "b b b"' +}); +</script> +</body> +</html> |