Commit eaee4be5 authored by Eric Willigers's avatar Eric Willigers Committed by Commit Bot

CSS: Consolidate block/inline tests for scroll-margin, scroll-padding

Tests for scroll-padding-inline-start, scroll-padding-block-start,
scroll-padding-inline-end, scroll-padding-block-end now appear
together.

Tests for scroll-margin-block-start, scroll-margin-inline-start,
scroll-margin-block-end, scroll-margin-inline-end now appear
together.

Added tests that calc(auto) is rejected.

Change-Id: I06759db50dd21e2654df494255a4e41233cdcae6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1771486
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: default avatarMajid Valipour <majidvp@chromium.org>
Cr-Commit-Position: refs/heads/master@{#690905}
parent 7e415593
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap: getComputedStyle().scrollMarginBlock</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-block">
<meta name="assert" content="scroll-margin-block 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-block", "10px");
test_computed_value("scroll-margin-block", "calc(10px - 0.5em)", "-10px");
test_computed_value("scroll-margin-block", "1px 2px");
</script>
</body>
</html>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Scroll Snap: getComputedStyle().scrollMarginInline</title> <title>CSS Scroll Snap: getComputedStyle().scrollMarginBlock / scrollMarginInline</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-inline"> <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical">
<meta name="assert" content="scroll-margin-inline computed value is absolute length."> <meta name="assert" content="scroll-margin-block, scroll-margin-inline computed value is absolute length.">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script> <script src="/css/support/computed-testcommon.js"></script>
...@@ -17,17 +17,25 @@ ...@@ -17,17 +17,25 @@
} }
</style> </style>
<script> <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", "10px");
test_computed_value("scroll-margin-inline-start", "calc(10px - 0.5em)", "-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", "10px");
test_computed_value("scroll-margin-inline-end", "calc(10px - 0.5em)", "-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", "10px");
test_computed_value("scroll-margin-inline", "calc(10px - 0.5em)", "-10px"); test_computed_value("scroll-margin-inline", "calc(10px - 0.5em)", "-10px");
test_computed_value("scroll-margin-inline", "1px 2px"); test_computed_value("scroll-margin-inline", "1px 2px");
</script> </script>
</body> </body>
......
...@@ -2,27 +2,41 @@ ...@@ -2,27 +2,41 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Scroll Snap Test: scroll-margin-inline with invalid values</title> <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/#propdef-scroll-margin-inline"> <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical">
<meta name="assert" content="scroll-margin-inline supports only the grammar '<length>{1,2}'."> <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/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script> <script src="/css/support/parsing-testcommon.js"></script>
</head> </head>
<body> <body>
<script> <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", "auto");
test_invalid_value("scroll-margin-inline-start", "20%"); test_invalid_value("scroll-margin-inline-start", "20%");
test_invalid_value("scroll-margin-inline-start", "-30%"); test_invalid_value("scroll-margin-inline-start", "-30%");
test_invalid_value("scroll-margin-inline-start", "1px 2px"); test_invalid_value("scroll-margin-inline-start", "1px 2px");
test_invalid_value("scroll-margin-inline-end", "auto"); test_invalid_value("scroll-margin-inline-end", "auto");
test_invalid_value("scroll-margin-inline-end", "20%"); test_invalid_value("scroll-margin-inline-end", "20%");
test_invalid_value("scroll-margin-inline-end", "-30%"); test_invalid_value("scroll-margin-inline-end", "-30%");
test_invalid_value("scroll-margin-inline-end", "1px 2px"); 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", "auto");
test_invalid_value("scroll-margin-inline", "20%"); test_invalid_value("scroll-margin-inline", "20%");
test_invalid_value("scroll-margin-inline", "-30%"); test_invalid_value("scroll-margin-inline", "-30%");
......
...@@ -2,23 +2,32 @@ ...@@ -2,23 +2,32 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Scroll Snap Test: scroll-margin-inline with valid values</title> <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/#propdef-scroll-margin-inline"> <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical">
<meta name="assert" content="scroll-margin-inline supports the full grammar '<length>{1,2}'."> <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/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script> <script src="/css/support/parsing-testcommon.js"></script>
</head> </head>
<body> <body>
<script> <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", "-10px");
test_valid_value("scroll-margin-inline-start", "calc(2em + 3ex)"); 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", "-10px");
test_valid_value("scroll-margin-inline-end", "calc(2em + 3ex)"); 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", "-10px");
test_valid_value("scroll-margin-inline", "calc(2em + 3ex)"); test_valid_value("scroll-margin-inline", "calc(2em + 3ex)");
test_valid_value("scroll-margin-inline", "1px 2px"); test_valid_value("scroll-margin-inline", "1px 2px");
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap Test: scroll-margin-block with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-block">
<meta name="assert" content="scroll-margin-block supports 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-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");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap Test: scroll-margin-block with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-block">
<meta name="assert" content="scroll-margin-block supports 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-block", "-10px");
test_valid_value("scroll-margin-block", "calc(2em + 3ex)");
test_valid_value("scroll-margin-block", "1px 2px");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap: getComputedStyle().scrollPaddingBlock</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-block">
<meta name="assert" content="scroll-padding-block 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-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");
</script>
</body>
</html>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Scroll Snap: getComputedStyle().scrollPaddingInline</title> <title>CSS Scroll Snap: getComputedStyle().scrollPaddingBlock / scrollPaddingInline</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-inline"> <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical">
<meta name="assert" content="scroll-padding-inline computed value is per side, either the keyword auto or a computed <length-percentage> value."> <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/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script> <script src="/css/support/computed-testcommon.js"></script>
...@@ -17,6 +17,20 @@ ...@@ -17,6 +17,20 @@
} }
</style> </style>
<script> <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", "auto");
test_computed_value("scroll-padding-inline-start", "10px"); test_computed_value("scroll-padding-inline-start", "10px");
test_computed_value("scroll-padding-inline-start", "20%"); test_computed_value("scroll-padding-inline-start", "20%");
...@@ -24,7 +38,6 @@ test_computed_value("scroll-padding-inline-start", "calc(10px + 0.5em)", "30px") ...@@ -24,7 +38,6 @@ 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(10px - 0.5em)", "0px");
test_computed_value("scroll-padding-inline-start", "calc(50% + 60px)"); 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", "auto");
test_computed_value("scroll-padding-inline-end", "10px"); test_computed_value("scroll-padding-inline-end", "10px");
test_computed_value("scroll-padding-inline-end", "20%"); test_computed_value("scroll-padding-inline-end", "20%");
...@@ -33,13 +46,22 @@ test_computed_value("scroll-padding-inline-end", "calc(10px - 0.5em)", "0px"); ...@@ -33,13 +46,22 @@ 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-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", "auto");
test_computed_value("scroll-padding-inline", "10px"); test_computed_value("scroll-padding-inline", "10px");
test_computed_value("scroll-padding-inline", "20%"); 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)", "30px");
test_computed_value("scroll-padding-inline", "calc(10px - 0.5em)", "0px"); 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", "calc(50% + 60px)");
test_computed_value("scroll-padding-inline", "1px 2px"); test_computed_value("scroll-padding-inline", "1px 2px");
test_computed_value("scroll-padding-inline", "1px auto"); test_computed_value("scroll-padding-inline", "1px auto");
test_computed_value("scroll-padding-inline", "auto auto", "auto"); test_computed_value("scroll-padding-inline", "auto auto", "auto");
......
...@@ -2,28 +2,53 @@ ...@@ -2,28 +2,53 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Scroll Snap Test: scroll-padding-inline with invalid values</title> <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/#propdef-scroll-padding-inline"> <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical">
<meta name="assert" content="scroll-padding-inline supports only the grammar '[ auto | <length-percentage> ]{1,2}'."> <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/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script> <script src="/css/support/parsing-testcommon.js"></script>
</head> </head>
<body> <body>
<script> <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", "none");
test_invalid_value("scroll-padding-inline-start", "-10px"); test_invalid_value("scroll-padding-inline-start", "-10px");
test_invalid_value("scroll-padding-inline-start", "10px 20%"); 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", "none");
test_invalid_value("scroll-padding-inline-end", "-10px"); test_invalid_value("scroll-padding-inline-end", "-10px");
test_invalid_value("scroll-padding-inline-end", "10px 20%"); 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", "none");
test_invalid_value("scroll-padding-inline", "-10px"); 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", "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> </script>
</body> </body>
</html> </html>
...@@ -2,22 +2,33 @@ ...@@ -2,22 +2,33 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Scroll Snap Test: scroll-padding-inline with valid values</title> <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/#propdef-scroll-padding-inline"> <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical">
<meta name="assert" content="scroll-padding-inline supports the full grammar '[ auto | <length-percentage> ]{1,2}'."> <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/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script> <script src="/css/support/parsing-testcommon.js"></script>
</head> </head>
<body> <body>
<script> <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", "auto");
test_valid_value("scroll-padding-inline-start", "10px"); test_valid_value("scroll-padding-inline-start", "10px");
test_valid_value("scroll-padding-inline-start", "20%"); 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(2em + 3ex)");
test_valid_value("scroll-padding-inline-start", "calc(50% + 60px)"); 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", "auto");
test_valid_value("scroll-padding-inline-end", "10px"); test_valid_value("scroll-padding-inline-end", "10px");
test_valid_value("scroll-padding-inline-end", "20%"); test_valid_value("scroll-padding-inline-end", "20%");
...@@ -25,12 +36,20 @@ test_valid_value("scroll-padding-inline-end", "calc(2em + 3ex)"); ...@@ -25,12 +36,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-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", "auto");
test_valid_value("scroll-padding-inline", "10px"); test_valid_value("scroll-padding-inline", "10px");
test_valid_value("scroll-padding-inline", "20%"); test_valid_value("scroll-padding-inline", "20%");
test_valid_value("scroll-padding-inline", "calc(2em + 3ex)"); test_valid_value("scroll-padding-inline", "calc(2em + 3ex)");
test_valid_value("scroll-padding-inline", "calc(50% + 60px)"); test_valid_value("scroll-padding-inline", "calc(50% + 60px)");
test_valid_value("scroll-padding-inline", "1px 2px"); test_valid_value("scroll-padding-inline", "1px 2px");
test_valid_value("scroll-padding-inline", "1px auto"); test_valid_value("scroll-padding-inline", "1px auto");
test_valid_value("scroll-padding-inline", "auto auto", "auto"); test_valid_value("scroll-padding-inline", "auto auto", "auto");
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap Test: scroll-padding-block with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-block">
<meta name="assert" content="scroll-padding-block 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-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", "none");
test_invalid_value("scroll-padding-block", "-10px");
test_invalid_value("scroll-padding-block", "10px 20px 30px 40px 50px");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap Test: scroll-padding-block with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-block">
<meta name="assert" content="scroll-padding-block 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-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");
</script>
</body>
</html>
...@@ -15,30 +15,38 @@ test_invalid_value("scroll-padding-top", "20"); ...@@ -15,30 +15,38 @@ test_invalid_value("scroll-padding-top", "20");
test_invalid_value("scroll-padding-top", "-20px"); test_invalid_value("scroll-padding-top", "-20px");
test_invalid_value("scroll-padding-top", "none"); test_invalid_value("scroll-padding-top", "none");
test_invalid_value("scroll-padding-top", "10px 20%"); 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", "20");
test_invalid_value("scroll-padding-right", "-20px"); test_invalid_value("scroll-padding-right", "-20px");
test_invalid_value("scroll-padding-right", "none"); test_invalid_value("scroll-padding-right", "none");
test_invalid_value("scroll-padding-right", "10px 20%"); 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", "20");
test_invalid_value("scroll-padding-bottom", "-20px"); test_invalid_value("scroll-padding-bottom", "-20px");
test_invalid_value("scroll-padding-bottom", "none"); test_invalid_value("scroll-padding-bottom", "none");
test_invalid_value("scroll-padding-bottom", "10px 20%"); 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", "20");
test_invalid_value("scroll-padding-left", "-20px"); test_invalid_value("scroll-padding-left", "-20px");
test_invalid_value("scroll-padding-left", "none"); test_invalid_value("scroll-padding-left", "none");
test_invalid_value("scroll-padding-left", "10px 20%"); 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", "20");
test_invalid_value("scroll-padding", "-20px"); test_invalid_value("scroll-padding", "-20px");
test_invalid_value("scroll-padding", "none"); 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", "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> </script>
</body> </body>
</html> </html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment