Skip to content

Commit

Permalink
CSS: WPT for scroll-padding computed value
Browse files Browse the repository at this point in the history 
Computed value is per side, either the keyword auto or a computed
<length-percentage> value.

https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding

Change-Id: Id3200ae8a8af9a2e8ee87e675d14f3a6965ea841
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1619454
Auto-Submit: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#661303}
  • Loading branch information
@ericwilligers @chromium-wpt-export-bot
ericwilligers authored and chromium-wpt-export-bot committed May 22, 2019
1 parent 19f0619 commit 0f00529
Show file tree
Hide file tree
Showing 6 changed files with 235 additions and 0 deletions.
48 changes: 48 additions & 0 deletions css/css-scroll-snap/parsing/scroll-padding-block-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap: getComputedValue().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>
29 changes: 29 additions & 0 deletions css/css-scroll-snap/parsing/scroll-padding-block-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!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>
71 changes: 71 additions & 0 deletions css/css-scroll-snap/parsing/scroll-padding-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap: getComputedValue().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>
48 changes: 48 additions & 0 deletions css/css-scroll-snap/parsing/scroll-padding-inline-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap: getComputedValue().scrollPaddingInline</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-inline">
<meta name="assert" content="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-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-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>
29 changes: 29 additions & 0 deletions css/css-scroll-snap/parsing/scroll-padding-inline-invalid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Scroll Snap Test: scroll-padding-inline with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-inline">
<meta name="assert" content="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-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-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", "none");
test_invalid_value("scroll-padding-inline", "-10px");
test_invalid_value("scroll-padding-inline", "10px 20px 30px 40px 50px");
</script>
</body>
</html>
10 changes: 10 additions & 0 deletions css/css-scroll-snap/parsing/scroll-padding-invalid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,32 @@
<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-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-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-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", "20");
test_invalid_value("scroll-padding", "-20px");
test_invalid_value("scroll-padding", "none");
test_invalid_value("scroll-padding", "10px 20px 30px 40px 50px");
</script>
</body>
</html>

0 comments on commit 0f00529

Please sign in to comment.