diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-box/animation/padding-left-composition.html')
-rw-r--r-- | testing/web-platform/tests/css/css-box/animation/padding-left-composition.html | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-box/animation/padding-left-composition.html b/testing/web-platform/tests/css/css-box/animation/padding-left-composition.html new file mode 100644 index 0000000000..417777ae25 --- /dev/null +++ b/testing/web-platform/tests/css/css-box/animation/padding-left-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>padding-left composition</title> +<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand"> +<meta name="assert" content="padding-left supports animation as a list of lengths"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'padding-left', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'padding-left', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'padding-left', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'padding-left', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> |