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

CSS: WPT for scroll-padding computed value

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: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#661303}
parent ecc849f3
This is a testharness.js-based test.
PASS Property scroll-padding-block-start value 'auto' computes to 'auto'
PASS Property scroll-padding-block-start value '10px' computes to '10px'
PASS Property scroll-padding-block-start value '20%' computes to '20%'
PASS Property scroll-padding-block-start value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-block-start value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-block-start value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding-block-end value 'auto' computes to 'auto'
PASS Property scroll-padding-block-end value '10px' computes to '10px'
PASS Property scroll-padding-block-end value '20%' computes to '20%'
PASS Property scroll-padding-block-end value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-block-end value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-block-end value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding-block value 'auto' computes to 'auto'
PASS Property scroll-padding-block value '10px' computes to '10px'
PASS Property scroll-padding-block value '20%' computes to '20%'
PASS Property scroll-padding-block value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-block value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-block value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding-block value '1px 2px' computes to '1px 2px'
FAIL Property scroll-padding-block value '1px auto' computes to '1px auto' assert_equals: expected "1px auto" but got "auto"
PASS Property scroll-padding-block value 'auto auto' computes to 'auto'
Harness: the test ran to completion.
<!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>
<!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>
This is a testharness.js-based test.
PASS Property scroll-padding-top value 'auto' computes to 'auto'
PASS Property scroll-padding-top value '0' computes to '0px'
PASS Property scroll-padding-top value '10px' computes to '10px'
PASS Property scroll-padding-top value '20%' computes to '20%'
PASS Property scroll-padding-top value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-top value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-top value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding-right value 'auto' computes to 'auto'
PASS Property scroll-padding-right value '0' computes to '0px'
PASS Property scroll-padding-right value '10px' computes to '10px'
PASS Property scroll-padding-right value '20%' computes to '20%'
PASS Property scroll-padding-right value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-right value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-right value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding-bottom value 'auto' computes to 'auto'
PASS Property scroll-padding-bottom value '0' computes to '0px'
PASS Property scroll-padding-bottom value '10px' computes to '10px'
PASS Property scroll-padding-bottom value '20%' computes to '20%'
PASS Property scroll-padding-bottom value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-bottom value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-bottom value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding-left value 'auto' computes to 'auto'
PASS Property scroll-padding-left value '0' computes to '0px'
PASS Property scroll-padding-left value '10px' computes to '10px'
PASS Property scroll-padding-left value '20%' computes to '20%'
PASS Property scroll-padding-left value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-left value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-left value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding value 'auto' computes to 'auto'
PASS Property scroll-padding value '10px' computes to '10px'
PASS Property scroll-padding value '0' computes to '0px'
PASS Property scroll-padding value '20%' computes to '20%'
PASS Property scroll-padding value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding value '1px 2px' computes to '1px 2px'
PASS Property scroll-padding value '1px 2px 3%' computes to '1px 2px 3%'
PASS Property scroll-padding value '1px 2px 3% 4px' computes to '1px 2px 3% 4px'
FAIL Property scroll-padding value '1px auto' computes to '1px auto' assert_equals: expected "1px auto" but got "auto"
PASS Property scroll-padding value '0 0 0 0' computes to '0px'
PASS Property scroll-padding value 'auto auto auto auto' computes to 'auto'
Harness: the test ran to completion.
<!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>
This is a testharness.js-based test.
PASS Property scroll-padding-inline-start value 'auto' computes to 'auto'
PASS Property scroll-padding-inline-start value '10px' computes to '10px'
PASS Property scroll-padding-inline-start value '20%' computes to '20%'
PASS Property scroll-padding-inline-start value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-inline-start value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-inline-start value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding-inline-end value 'auto' computes to 'auto'
PASS Property scroll-padding-inline-end value '10px' computes to '10px'
PASS Property scroll-padding-inline-end value '20%' computes to '20%'
PASS Property scroll-padding-inline-end value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-inline-end value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-inline-end value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding-inline value 'auto' computes to 'auto'
PASS Property scroll-padding-inline value '10px' computes to '10px'
PASS Property scroll-padding-inline value '20%' computes to '20%'
PASS Property scroll-padding-inline value 'calc(10px + 0.5em)' computes to '30px'
PASS Property scroll-padding-inline value 'calc(10px - 0.5em)' computes to '0px'
PASS Property scroll-padding-inline value 'calc(50% + 60px)' computes to 'calc(50% + 60px)'
PASS Property scroll-padding-inline value '1px 2px' computes to '1px 2px'
FAIL Property scroll-padding-inline value '1px auto' computes to '1px auto' assert_equals: expected "1px auto" but got "auto"
PASS Property scroll-padding-inline value 'auto auto' computes to 'auto'
Harness: the test ran to completion.
<!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>
<!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>
......@@ -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>
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