diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-scroll-snap/parsing | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap/parsing')
25 files changed, 990 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-computed.html new file mode 100644 index 0000000000..3bb0e740ac --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-computed.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollMarginBlock / scrollMarginInline</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical"> +<meta name="assert" content="scroll-margin-block, scroll-margin-inline computed value is absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("scroll-margin-block-start", "10px"); +test_computed_value("scroll-margin-block-start", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("scroll-margin-block-end", "10px"); +test_computed_value("scroll-margin-block-end", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("scroll-margin-inline-start", "10px"); +test_computed_value("scroll-margin-inline-start", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("scroll-margin-inline-end", "10px"); +test_computed_value("scroll-margin-inline-end", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin-block", "10px"); +test_computed_value("scroll-margin-block", "calc(10px - 0.5em)", "-10px"); +test_computed_value("scroll-margin-block", "1px 2px"); + +test_computed_value("scroll-margin-inline", "10px"); +test_computed_value("scroll-margin-inline", "calc(10px - 0.5em)", "-10px"); +test_computed_value("scroll-margin-inline", "1px 2px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-invalid.html new file mode 100644 index 0000000000..b8a70b0d48 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-invalid.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin-block, scroll-margin-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical"> +<meta name="assert" content="scroll-margin-block, scroll-margin-inline support only the grammar '<length>{1,2}'."> +<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("scroll-margin-block-start", "auto"); +test_invalid_value("scroll-margin-block-start", "20%"); +test_invalid_value("scroll-margin-block-start", "-30%"); +test_invalid_value("scroll-margin-block-start", "1px 2px"); + +test_invalid_value("scroll-margin-block-end", "auto"); +test_invalid_value("scroll-margin-block-end", "20%"); +test_invalid_value("scroll-margin-block-end", "-30%"); +test_invalid_value("scroll-margin-block-end", "1px 2px"); + +test_invalid_value("scroll-margin-inline-start", "auto"); +test_invalid_value("scroll-margin-inline-start", "20%"); +test_invalid_value("scroll-margin-inline-start", "-30%"); +test_invalid_value("scroll-margin-inline-start", "1px 2px"); + +test_invalid_value("scroll-margin-inline-end", "auto"); +test_invalid_value("scroll-margin-inline-end", "20%"); +test_invalid_value("scroll-margin-inline-end", "-30%"); +test_invalid_value("scroll-margin-inline-end", "1px 2px"); + + +test_invalid_value("scroll-margin-block", "auto"); +test_invalid_value("scroll-margin-block", "20%"); +test_invalid_value("scroll-margin-block", "-30%"); +test_invalid_value("scroll-margin-block", "1px 2px 3px"); + +test_invalid_value("scroll-margin-inline", "auto"); +test_invalid_value("scroll-margin-inline", "20%"); +test_invalid_value("scroll-margin-inline", "-30%"); +test_invalid_value("scroll-margin-inline", "1px 2px 3px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-shorthand.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-shorthand.html new file mode 100644 index 0000000000..04e1d42864 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin-block, scroll-margin-inline set longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical"> +<meta name="assert" content="scroll-margin-block, scroll-margin-inline support the full grammar '<length>{1,2}'."> +<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('scroll-margin-block', '10px 20px', { + 'scroll-margin-block-start': '10px', + 'scroll-margin-block-end': '20px' +}); + +test_shorthand_value('scroll-margin-block', '30px', { + 'scroll-margin-block-start': '30px', + 'scroll-margin-block-end': '30px' +}); + +test_shorthand_value('scroll-margin-inline', '50px 60px', { + 'scroll-margin-inline-start': '50px', + 'scroll-margin-inline-end': '60px' +}); + +test_shorthand_value('scroll-margin-inline', '-40px', { + 'scroll-margin-inline-start': '-40px', + 'scroll-margin-inline-end': '-40px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-valid.html new file mode 100644 index 0000000000..e675eeb427 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-valid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin-block, scroll-margin-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical"> +<meta name="assert" content="scroll-margin-block, scroll-margin-inline support the full grammar '<length>{1,2}'."> +<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("scroll-margin-block-start", "-10px"); +test_valid_value("scroll-margin-block-start", "calc(2em + 3ex)"); + +test_valid_value("scroll-margin-block-end", "-10px"); +test_valid_value("scroll-margin-block-end", "calc(2em + 3ex)"); + +test_valid_value("scroll-margin-inline-start", "-10px"); +test_valid_value("scroll-margin-inline-start", "calc(2em + 3ex)"); + +test_valid_value("scroll-margin-inline-end", "-10px"); +test_valid_value("scroll-margin-inline-end", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin-block", "-10px"); +test_valid_value("scroll-margin-block", "calc(2em + 3ex)"); +test_valid_value("scroll-margin-block", "1px 2px"); + +test_valid_value("scroll-margin-inline", "-10px"); +test_valid_value("scroll-margin-inline", "calc(2em + 3ex)"); +test_valid_value("scroll-margin-inline", "1px 2px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-computed.html new file mode 100644 index 0000000000..ae7b6de5dd --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-computed.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollMargin</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"> +<meta name="assert" content="scroll-margin computed value is absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("scroll-margin-top", "10px"); +test_computed_value("scroll-margin-top", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin-right", "10px"); +test_computed_value("scroll-margin-right", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin-bottom", "10px"); +test_computed_value("scroll-margin-bottom", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin-left", "10px"); +test_computed_value("scroll-margin-left", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin", "10px"); +test_computed_value("scroll-margin", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("scroll-margin", "1px 2px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-invalid.html new file mode 100644 index 0000000000..97beb0d295 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-invalid.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"> +<meta name="assert" content="scroll-margin supports only the grammar '<length>{1,4}'."> +<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("scroll-margin-top", "auto"); +test_invalid_value("scroll-margin-top", "20%"); +test_invalid_value("scroll-margin-top", "-30%"); +test_invalid_value("scroll-margin-top", "1px 2px"); + + +test_invalid_value("scroll-margin-right", "auto"); +test_invalid_value("scroll-margin-right", "20%"); +test_invalid_value("scroll-margin-right", "-30%"); +test_invalid_value("scroll-margin-right", "1px 2px"); + + +test_invalid_value("scroll-margin-bottom", "auto"); +test_invalid_value("scroll-margin-bottom", "20%"); +test_invalid_value("scroll-margin-bottom", "-30%"); +test_invalid_value("scroll-margin-bottom", "1px 2px"); + + +test_invalid_value("scroll-margin-left", "auto"); +test_invalid_value("scroll-margin-left", "20%"); +test_invalid_value("scroll-margin-left", "-30%"); +test_invalid_value("scroll-margin-left", "1px 2px"); + + +test_invalid_value("scroll-margin", "auto"); +test_invalid_value("scroll-margin", "20%"); +test_invalid_value("scroll-margin", "-30%"); +test_invalid_value("scroll-margin", "1px 2px 3px 4px 5px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-shorthand.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-shorthand.html new file mode 100644 index 0000000000..96a4595226 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"> +<meta name="assert" content="scroll-margin supports the full grammar '<length>{1,4}'."> +<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('scroll-margin', '10px', { + 'scroll-margin-top': '10px', + 'scroll-margin-right': '10px', + 'scroll-margin-bottom': '10px', + 'scroll-margin-left': '10px' +}); + +test_shorthand_value('scroll-margin', '30px 20px', { + 'scroll-margin-top': '30px', + 'scroll-margin-right': '20px', + 'scroll-margin-bottom': '30px', + 'scroll-margin-left': '20px' +}); + +test_shorthand_value('scroll-margin', '1px 2px 3px', { + 'scroll-margin-top': '1px', + 'scroll-margin-right': '2px', + 'scroll-margin-bottom': '3px', + 'scroll-margin-left': '2px' +}); + +test_shorthand_value('scroll-margin', '-1px 2px 3px 0', { + 'scroll-margin-top': '-1px', + 'scroll-margin-right': '2px', + 'scroll-margin-bottom': '3px', + 'scroll-margin-left': '0px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-valid.html new file mode 100644 index 0000000000..be34998691 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-valid.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"> +<meta name="assert" content="scroll-margin supports the full grammar '<length>{1,4}'."> +<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("scroll-margin-top", "0", "0px"); +test_valid_value("scroll-margin-top", "-10px"); +test_valid_value("scroll-margin-top", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin-right", "0", "0px"); +test_valid_value("scroll-margin-right", "-10px"); +test_valid_value("scroll-margin-right", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin-bottom", "0", "0px"); +test_valid_value("scroll-margin-bottom", "-10px"); +test_valid_value("scroll-margin-bottom", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin-left", "0", "0px"); +test_valid_value("scroll-margin-left", "-10px"); +test_valid_value("scroll-margin-left", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin", "0", "0px"); +test_valid_value("scroll-margin", "-10px"); +test_valid_value("scroll-margin", "calc(2em + 3ex)"); + +test_valid_value("scroll-margin", "1px 2px"); +test_valid_value("scroll-margin", "1px 2px 3px"); +test_valid_value("scroll-margin", "1px 2px 3px 4px"); +test_valid_value("scroll-margin", "0 0 0 0", "0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-computed.html new file mode 100644 index 0000000000..6a66110cda --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-computed.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollPaddingBlock / scrollPaddingInline</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical"> +<meta name="assert" content="scroll-padding-block, scroll-padding-inline computed value is per side, either the keyword auto or a computed <length-percentage> value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("scroll-padding-block-start", "auto"); +test_computed_value("scroll-padding-block-start", "10px"); +test_computed_value("scroll-padding-block-start", "20%"); +test_computed_value("scroll-padding-block-start", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-block-start", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-block-start", "calc(50% + 60px)"); + +test_computed_value("scroll-padding-block-end", "auto"); +test_computed_value("scroll-padding-block-end", "10px"); +test_computed_value("scroll-padding-block-end", "20%"); +test_computed_value("scroll-padding-block-end", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-block-end", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-block-end", "calc(50% + 60px)"); + +test_computed_value("scroll-padding-inline-start", "auto"); +test_computed_value("scroll-padding-inline-start", "10px"); +test_computed_value("scroll-padding-inline-start", "20%"); +test_computed_value("scroll-padding-inline-start", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-inline-start", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-inline-start", "calc(50% + 60px)"); + +test_computed_value("scroll-padding-inline-end", "auto"); +test_computed_value("scroll-padding-inline-end", "10px"); +test_computed_value("scroll-padding-inline-end", "20%"); +test_computed_value("scroll-padding-inline-end", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-inline-end", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-inline-end", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding-block", "auto"); +test_computed_value("scroll-padding-block", "10px"); +test_computed_value("scroll-padding-block", "20%"); +test_computed_value("scroll-padding-block", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-block", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-block", "calc(50% + 60px)"); +test_computed_value("scroll-padding-block", "1px 2px"); +test_computed_value("scroll-padding-block", "1px auto"); +test_computed_value("scroll-padding-block", "auto auto", "auto"); + +test_computed_value("scroll-padding-inline", "auto"); +test_computed_value("scroll-padding-inline", "10px"); +test_computed_value("scroll-padding-inline", "20%"); +test_computed_value("scroll-padding-inline", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-inline", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-inline", "calc(50% + 60px)"); +test_computed_value("scroll-padding-inline", "1px 2px"); +test_computed_value("scroll-padding-inline", "1px auto"); +test_computed_value("scroll-padding-inline", "auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-invalid.html new file mode 100644 index 0000000000..da995cfcc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-invalid.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding-block, scroll-padding-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical"> +<meta name="assert" content="scroll-padding-block, scroll-padding-inline supports only the grammar '[ auto | <length-percentage> ]{1,2}'."> +<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("scroll-padding-block-start", "none"); +test_invalid_value("scroll-padding-block-start", "-10px"); +test_invalid_value("scroll-padding-block-start", "10px 20%"); +test_invalid_value("scroll-padding-block-start", "fit-content"); + +test_invalid_value("scroll-padding-block-end", "none"); +test_invalid_value("scroll-padding-block-end", "-10px"); +test_invalid_value("scroll-padding-block-end", "10px 20%"); +test_invalid_value("scroll-padding-block-end", "max-content"); + +test_invalid_value("scroll-padding-inline-start", "none"); +test_invalid_value("scroll-padding-inline-start", "-10px"); +test_invalid_value("scroll-padding-inline-start", "10px 20%"); +test_invalid_value("scroll-padding-inline-start", "min-content"); + +test_invalid_value("scroll-padding-inline-end", "none"); +test_invalid_value("scroll-padding-inline-end", "-10px"); +test_invalid_value("scroll-padding-inline-end", "10px 20%"); +test_invalid_value("scroll-padding-inline-end", "max-content"); + + +test_invalid_value("scroll-padding-block", "none"); +test_invalid_value("scroll-padding-block", "-10px"); +test_invalid_value("scroll-padding-block", "-20%"); +test_invalid_value("scroll-padding-block", "calc(auto)"); +test_invalid_value("scroll-padding-block", "10px 20px 30px 40px 50px"); +test_invalid_value("scroll-padding-block", "fit-content"); +test_invalid_value("scroll-padding-block", "max-content"); +test_invalid_value("scroll-padding-block", "min-content"); + +test_invalid_value("scroll-padding-inline", "none"); +test_invalid_value("scroll-padding-inline", "-10px"); +test_invalid_value("scroll-padding-inline", "-20%"); +test_invalid_value("scroll-padding-inline", "calc(auto)"); +test_invalid_value("scroll-padding-inline", "10px 20px 30px 40px 50px"); +test_invalid_value("scroll-padding-inline", "fit-content"); +test_invalid_value("scroll-padding-inline", "max-content"); +test_invalid_value("scroll-padding-inline", "min-content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-shorthand.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-shorthand.html new file mode 100644 index 0000000000..491cfa9e96 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding-block, scroll-padding-inline set longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical"> +<meta name="assert" content="scroll-padding-block, scroll-padding-inline support the full grammar '[ auto | <length-percentage> ]{1,2}'."> +<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('scroll-padding-block', 'auto 10px', { + 'scroll-padding-block-start': 'auto', + 'scroll-padding-block-end': '10px' +}); + +test_shorthand_value('scroll-padding-block', '20%', { + 'scroll-padding-block-start': '20%', + 'scroll-padding-block-end': '20%' +}); + +test_shorthand_value('scroll-padding-inline', '10px auto', { + 'scroll-padding-inline-start': '10px', + 'scroll-padding-inline-end': 'auto' +}); + +test_shorthand_value('scroll-padding-inline', '0%', { + 'scroll-padding-inline-start': '0%', + 'scroll-padding-inline-end': '0%' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-valid.html new file mode 100644 index 0000000000..a932bb6393 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-valid.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding-block, scroll-padding-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical"> +<meta name="assert" content="scroll-padding-block, scroll-padding-inline supports the full grammar '[ auto | <length-percentage> ]{1,2}'."> +<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("scroll-padding-block-start", "auto"); +test_valid_value("scroll-padding-block-start", "10px"); +test_valid_value("scroll-padding-block-start", "20%"); +test_valid_value("scroll-padding-block-start", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-block-start", "calc(50% + 60px)"); + +test_valid_value("scroll-padding-block-end", "auto"); +test_valid_value("scroll-padding-block-end", "10px"); +test_valid_value("scroll-padding-block-end", "20%"); +test_valid_value("scroll-padding-block-end", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-block-end", "calc(50% + 60px)"); + +test_valid_value("scroll-padding-inline-start", "auto"); +test_valid_value("scroll-padding-inline-start", "10px"); +test_valid_value("scroll-padding-inline-start", "20%"); +test_valid_value("scroll-padding-inline-start", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-inline-start", "calc(50% + 60px)"); + +test_valid_value("scroll-padding-inline-end", "auto"); +test_valid_value("scroll-padding-inline-end", "10px"); +test_valid_value("scroll-padding-inline-end", "20%"); +test_valid_value("scroll-padding-inline-end", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-inline-end", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding-block", "auto"); +test_valid_value("scroll-padding-block", "10px"); +test_valid_value("scroll-padding-block", "20%"); +test_valid_value("scroll-padding-block", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-block", "calc(50% + 60px)"); +test_valid_value("scroll-padding-block", "1px 2px"); +test_valid_value("scroll-padding-block", "1px auto"); +test_valid_value("scroll-padding-block", "auto auto", "auto"); + +test_valid_value("scroll-padding-inline", "auto"); +test_valid_value("scroll-padding-inline", "10px"); +test_valid_value("scroll-padding-inline", "20%"); +test_valid_value("scroll-padding-inline", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-inline", "calc(50% + 60px)"); +test_valid_value("scroll-padding-inline", "1px 2px"); +test_valid_value("scroll-padding-inline", "1px auto"); +test_valid_value("scroll-padding-inline", "auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-computed.html new file mode 100644 index 0000000000..f638138a7f --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-computed.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollPadding</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"> +<meta name="assert" content="scroll-padding computed value is per side, either the keyword auto or a computed <length-percentage> value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("scroll-padding-top", "auto"); +test_computed_value("scroll-padding-top", "0", "0px"); +test_computed_value("scroll-padding-top", "10px"); +test_computed_value("scroll-padding-top", "20%"); +test_computed_value("scroll-padding-top", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-top", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-top", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding-right", "auto"); +test_computed_value("scroll-padding-right", "0", "0px"); +test_computed_value("scroll-padding-right", "10px"); +test_computed_value("scroll-padding-right", "20%"); +test_computed_value("scroll-padding-right", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-right", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-right", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding-bottom", "auto"); +test_computed_value("scroll-padding-bottom", "0", "0px"); +test_computed_value("scroll-padding-bottom", "10px"); +test_computed_value("scroll-padding-bottom", "20%"); +test_computed_value("scroll-padding-bottom", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-bottom", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-bottom", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding-left", "auto"); +test_computed_value("scroll-padding-left", "0", "0px"); +test_computed_value("scroll-padding-left", "10px"); +test_computed_value("scroll-padding-left", "20%"); +test_computed_value("scroll-padding-left", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-left", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-left", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding", "auto"); +test_computed_value("scroll-padding", "10px"); +test_computed_value("scroll-padding", "0", "0px"); +test_computed_value("scroll-padding", "20%"); +test_computed_value("scroll-padding", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding", "calc(10px - 0.5em)", "0px"); + +test_computed_value("scroll-padding", "1px 2px"); +test_computed_value("scroll-padding", "1px 2px 3%"); +test_computed_value("scroll-padding", "1px 2px 3% 4px"); +test_computed_value("scroll-padding", "1px auto"); +test_computed_value("scroll-padding", "0 0 0 0", "0px"); +test_computed_value("scroll-padding", "auto auto auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-invalid.html new file mode 100644 index 0000000000..c805ee2e55 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-invalid.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"> +<meta name="assert" content="scroll-padding supports only the grammar '[ <length-percentage> | auto ]{1,4}'."> +<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("scroll-padding-top", "20"); +test_invalid_value("scroll-padding-top", "-20px"); +test_invalid_value("scroll-padding-top", "none"); +test_invalid_value("scroll-padding-top", "10px 20%"); +test_invalid_value("scroll-padding-top", "fit-content"); + + +test_invalid_value("scroll-padding-right", "20"); +test_invalid_value("scroll-padding-right", "-20px"); +test_invalid_value("scroll-padding-right", "none"); +test_invalid_value("scroll-padding-right", "10px 20%"); +test_invalid_value("scroll-padding-right", "max-content"); + + +test_invalid_value("scroll-padding-bottom", "20"); +test_invalid_value("scroll-padding-bottom", "-20px"); +test_invalid_value("scroll-padding-bottom", "none"); +test_invalid_value("scroll-padding-bottom", "10px 20%"); +test_invalid_value("scroll-padding-bottom", "min-content"); + + +test_invalid_value("scroll-padding-left", "20"); +test_invalid_value("scroll-padding-left", "-20px"); +test_invalid_value("scroll-padding-left", "none"); +test_invalid_value("scroll-padding-left", "10px 20%"); +test_invalid_value("scroll-padding-left", "fit-content"); + + +test_invalid_value("scroll-padding", "20"); +test_invalid_value("scroll-padding", "-20px"); +test_invalid_value("scroll-padding", "none"); +test_invalid_value("scroll-padding", "calc(auto)"); +test_invalid_value("scroll-padding", "10px 20px 30px 40px 50px"); +test_invalid_value("scroll-padding", "fit-content"); +test_invalid_value("scroll-padding", "max-content"); +test_invalid_value("scroll-padding", "min-content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-shorthand.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-shorthand.html new file mode 100644 index 0000000000..2162c7f10d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"> +<meta name="assert" content="scroll-padding supports the full grammar '[ <length-percentage> | auto ]{1,4}'."> +<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('scroll-padding', '10px', { + 'scroll-padding-top': '10px', + 'scroll-padding-right': '10px', + 'scroll-padding-bottom': '10px', + 'scroll-padding-left': '10px' +}); + +test_shorthand_value('scroll-padding', 'auto 20px', { + 'scroll-padding-top': 'auto', + 'scroll-padding-right': '20px', + 'scroll-padding-bottom': 'auto', + 'scroll-padding-left': '20px' +}); + +test_shorthand_value('scroll-padding', '1px 2px 3px', { + 'scroll-padding-top': '1px', + 'scroll-padding-right': '2px', + 'scroll-padding-bottom': '3px', + 'scroll-padding-left': '2px' +}); + +test_shorthand_value('scroll-padding', '1% 2px 3px 0', { + 'scroll-padding-top': '1%', + 'scroll-padding-right': '2px', + 'scroll-padding-bottom': '3px', + 'scroll-padding-left': '0px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-valid.html new file mode 100644 index 0000000000..0e7c86b12b --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-valid.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"> +<meta name="assert" content="scroll-padding supports the full grammar '[ <length-percentage> | auto ]{1,4}'."> +<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("scroll-padding-top", "auto"); +test_valid_value("scroll-padding-top", "0", "0px"); +test_valid_value("scroll-padding-top", "10px"); +test_valid_value("scroll-padding-top", "20%"); +test_valid_value("scroll-padding-top", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-top", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding-right", "auto"); +test_valid_value("scroll-padding-right", "0", "0px"); +test_valid_value("scroll-padding-right", "10px"); +test_valid_value("scroll-padding-right", "20%"); +test_valid_value("scroll-padding-right", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-right", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding-bottom", "auto"); +test_valid_value("scroll-padding-bottom", "0", "0px"); +test_valid_value("scroll-padding-bottom", "10px"); +test_valid_value("scroll-padding-bottom", "20%"); +test_valid_value("scroll-padding-bottom", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-bottom", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding-left", "auto"); +test_valid_value("scroll-padding-left", "0", "0px"); +test_valid_value("scroll-padding-left", "10px"); +test_valid_value("scroll-padding-left", "20%"); +test_valid_value("scroll-padding-left", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-left", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding", "auto"); +test_valid_value("scroll-padding", "10px"); +test_valid_value("scroll-padding", "0", "0px"); +test_valid_value("scroll-padding", "20%"); +test_valid_value("scroll-padding", "calc(2em + 3ex)"); + +test_valid_value("scroll-padding", "1px 2px"); +test_valid_value("scroll-padding", "1px 2px 3%"); +test_valid_value("scroll-padding", "1px 2px 3% 4px"); +test_valid_value("scroll-padding", "1px auto"); +test_valid_value("scroll-padding", "0 0 0 0", "0px"); +test_valid_value("scroll-padding", "auto auto auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-computed.html new file mode 100644 index 0000000000..daed998ef2 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollSnapAlign</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-align"> +<meta name="assert" content="scroll-snap-align computed value is as specified."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("scroll-snap-align", "none"); +test_computed_value("scroll-snap-align", "start"); +test_computed_value("scroll-snap-align", "end"); +test_computed_value("scroll-snap-align", "center"); + +test_computed_value("scroll-snap-align", "start none"); +test_computed_value("scroll-snap-align", "center end"); +test_computed_value("scroll-snap-align", "start start", "start"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-invalid.html new file mode 100644 index 0000000000..9a1eeb77bb --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-align with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-align"> +<meta name="assert" content="scroll-snap-align supports only the grammar '[ none | start | end | center ]{1,2}'."> +<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("scroll-snap-align", "auto"); + +test_invalid_value("scroll-snap-align", "start invalid"); + +test_invalid_value("scroll-snap-align", "start end center"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-valid.html new file mode 100644 index 0000000000..0201448825 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-align with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-align"> +<meta name="assert" content="scroll-snap-align supports the full grammar '[ none | start | end | center ]{1,2}'."> +<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("scroll-snap-align", "none"); +test_valid_value("scroll-snap-align", "start"); +test_valid_value("scroll-snap-align", "end"); +test_valid_value("scroll-snap-align", "center"); + +test_valid_value("scroll-snap-align", "start none"); +test_valid_value("scroll-snap-align", "center end"); +test_valid_value("scroll-snap-align", "start start", "start"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-computed.html new file mode 100644 index 0000000000..49b369a0fe --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollSnapStop</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-stop"> +<meta name="assert" content="scroll-snap-stop computed value is as specified."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("scroll-snap-stop", "normal"); +test_computed_value("scroll-snap-stop", "always"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-invalid.html new file mode 100644 index 0000000000..67feda0ca7 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-stop with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-stop"> +<meta name="assert" content="scroll-snap-stop supports only the grammar 'normal | always'."> +<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("scroll-snap-stop", "auto"); + +test_invalid_value("scroll-snap-stop", "normal always"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-valid.html new file mode 100644 index 0000000000..a59caff396 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-stop with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-stop"> +<meta name="assert" content="scroll-snap-stop supports the full grammar 'normal | always'."> +<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("scroll-snap-stop", "normal"); +test_valid_value("scroll-snap-stop", "always"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-computed.html new file mode 100644 index 0000000000..660a1fee06 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-computed.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollSnapType</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type"> +<meta name="assert" content="scroll-snap-type computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("scroll-snap-type", "none"); + +test_computed_value("scroll-snap-type", "x"); +test_computed_value("scroll-snap-type", "y"); +test_computed_value("scroll-snap-type", "block"); +test_computed_value("scroll-snap-type", "inline"); +test_computed_value("scroll-snap-type", "both"); + +test_computed_value("scroll-snap-type", "y mandatory"); +test_computed_value("scroll-snap-type", "inline proximity", "inline"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-invalid.html new file mode 100644 index 0000000000..6177ff3baf --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-type with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type"> +<meta name="assert" content="scroll-snap-type supports only the grammar 'none | [ x | y | block | inline | both ] [ mandatory | proximity ]?'."> +<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("scroll-snap-type", "auto"); + +test_invalid_value("scroll-snap-type", "x y"); +test_invalid_value("scroll-snap-type", "block mandatory inline"); + +test_invalid_value("scroll-snap-type", "both none"); +test_invalid_value("scroll-snap-type", "mandatory"); +test_invalid_value("scroll-snap-type", "proximity"); +test_invalid_value("scroll-snap-type", "mandatory inline"); +test_invalid_value("scroll-snap-type", "proximity both"); +test_invalid_value("scroll-snap-type", "mandatory x"); +test_invalid_value("scroll-snap-type", "proximity y"); +test_invalid_value("scroll-snap-type", "mandatory block"); +test_invalid_value("scroll-snap-type", "proximity mandatory"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-valid.html new file mode 100644 index 0000000000..ca995770f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-valid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-type with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type"> +<meta name="assert" content="scroll-snap-type supports the full grammar 'none | [ x | y | block | inline | both ] [ mandatory | proximity ]?'."> +<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("scroll-snap-type", "none"); + +test_valid_value("scroll-snap-type", "x"); +test_valid_value("scroll-snap-type", "y"); +test_valid_value("scroll-snap-type", "block"); +test_valid_value("scroll-snap-type", "inline"); +test_valid_value("scroll-snap-type", "both"); + +test_valid_value("scroll-snap-type", "y mandatory"); +test_valid_value("scroll-snap-type", "block mandatory"); +test_valid_value("scroll-snap-type", "both mandatory"); +test_valid_value("scroll-snap-type", "inline proximity", "inline"); // The shortest serialization is preferable +test_valid_value("scroll-snap-type", "x proximity", "x"); +</script> +</body> +</html> |