Skip to content

GitLab

T
tangled
Commit 5b7ac38f authored by haozhe's avatar haozhe Committed by Commit Bot
Browse files
Options

Port css-box related composition tests to external 

Both Chrome and Firefox pass all tests

Bug: 1034538
Change-Id: I796c3ef77c7a4e384b4c82a18876d6630707fbcf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1976555Reviewed-by: default avatarXida Chen <xidachen@chromium.org>
Commit-Queue: Hao Sheng <haozhes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#727581}
parent ae5f50a0
Hide whitespace changes
Inline Side-by-side
Showing with 572 additions and 232 deletions
third_party/blink/web_tests/animations/composition/padding-bottom-composition.html deleted 100644 → 0
View file @ ae5f50a0
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'padding-bottom',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, is: '120px'},
{at: 0, is: '150px'},
{at: 0.5, is: '200px'},
{at: 1, is: '250px'},
{at: 1.5, is: '300px'},
]);
assertComposition({
property: 'padding-bottom',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, is: '114px'},
{at: 0, is: '110px'},
{at: 0.5, is: '106px'},
{at: 1, is: '102px'},
{at: 1.5, is: '98px'}, // Value clamping should happen after composition.
]);
assertComposition({
property: 'padding-bottom',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, is: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'},
{at: 1, is: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'},
]);
assertComposition({
property: 'padding-bottom',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, is: '135px'},
{at: 0, is: '150px'},
{at: 0.5, is: '175px'},
{at: 1, is: '200px'},
{at: 1.5, is: '225px'},
]);
</script>
</body>
third_party/blink/web_tests/animations/composition/padding-left-composition.html deleted 100644 → 0
View file @ ae5f50a0
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'padding-left',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, is: '120px'},
{at: 0, is: '150px'},
{at: 0.5, is: '200px'},
{at: 1, is: '250px'},
{at: 1.5, is: '300px'},
]);
assertComposition({
property: 'padding-left',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, is: '114px'},
{at: 0, is: '110px'},
{at: 0.5, is: '106px'},
{at: 1, is: '102px'},
{at: 1.5, is: '98px'}, // Value clamping should happen after composition.
]);
assertComposition({
property: 'padding-left',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, is: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'},
{at: 1, is: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'},
]);
assertComposition({
property: 'padding-left',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, is: '135px'},
{at: 0, is: '150px'},
{at: 0.5, is: '175px'},
{at: 1, is: '200px'},
{at: 1.5, is: '225px'},
]);
</script>
</body>
third_party/blink/web_tests/animations/composition/padding-right-composition.html deleted 100644 → 0
View file @ ae5f50a0
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'padding-right',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, is: '120px'},
{at: 0, is: '150px'},
{at: 0.5, is: '200px'},
{at: 1, is: '250px'},
{at: 1.5, is: '300px'},
]);
assertComposition({
property: 'padding-right',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, is: '114px'},
{at: 0, is: '110px'},
{at: 0.5, is: '106px'},
{at: 1, is: '102px'},
{at: 1.5, is: '98px'}, // Value clamping should happen after composition.
]);
assertComposition({
property: 'padding-right',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, is: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'},
{at: 1, is: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'},
]);
assertComposition({
property: 'padding-right',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, is: '135px'},
{at: 0, is: '150px'},
{at: 0.5, is: '175px'},
{at: 1, is: '200px'},
{at: 1.5, is: '225px'},
]);
</script>
</body>
third_party/blink/web_tests/animations/composition/padding-top-composition.html deleted 100644 → 0
View file @ ae5f50a0
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'padding-top',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, is: '120px'},
{at: 0, is: '150px'},
{at: 0.5, is: '200px'},
{at: 1, is: '250px'},
{at: 1.5, is: '300px'},
]);
assertComposition({
property: 'padding-top',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, is: '114px'},
{at: 0, is: '110px'},
{at: 0.5, is: '106px'},
{at: 1, is: '102px'},
{at: 1.5, is: '98px'}, // Value clamping should happen after composition.
]);
assertComposition({
property: 'padding-top',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, is: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'},
{at: 1, is: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'},
]);
assertComposition({
property: 'padding-top',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, is: '135px'},
{at: 0, is: '150px'},
{at: 0.5, is: '175px'},
{at: 1, is: '200px'},
{at: 1.5, is: '225px'},
]);
</script>
</body>
third_party/blink/web_tests/animations/composition/margin-bottom-composition.html → third_party/blink/web_tests/external/wpt/css/css-box/animation/margin-bottom-composition.html
View file @ 5b7ac38f
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>margin-bottom composition</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
<meta name="assert" content="margin-bottom supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body> <body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script> <script>
assertComposition({ test_composition({
property: 'margin-bottom', property: 'margin-bottom',
underlying: '50px', underlying: '50px',
addFrom: '100px', addFrom: '100px',
addTo: '200px', addTo: '200px',
}, [ }, [
{at: -0.3, is: '120px'}, {at: -0.3, expect: '120px'},
{at: 0, is: '150px'}, {at: 0, expect: '150px'},
{at: 0.5, is: '200px'}, {at: 0.5, expect: '200px'},
{at: 1, is: '250px'}, {at: 1, expect: '250px'},
{at: 1.5, is: '300px'}, {at: 1.5, expect: '300px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-bottom', property: 'margin-bottom',
underlying: '100px', underlying: '100px',
addFrom: '10px', addFrom: '10px',
addTo: '2px', addTo: '2px',
}, [ }, [
{at: -0.5, is: '114px'}, {at: -0.5, expect: '114px'},
{at: 0, is: '110px'}, {at: 0, expect: '110px'},
{at: 0.5, is: '106px'}, {at: 0.5, expect: '106px'},
{at: 1, is: '102px'}, {at: 1, expect: '102px'},
{at: 1.5, is: '98px'}, {at: 1.5, expect: '98px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-bottom', property: 'margin-bottom',
underlying: '10%', underlying: '10%',
addFrom: '100px', addFrom: '100px',
addTo: '20%', addTo: '20%',
}, [ }, [
{at: -0.3, is: 'calc(130px + 4%)'}, {at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'}, {at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'}, {at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, is: '30%'}, {at: 1, expect: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'}, {at: 1.5, expect: 'calc(-50px + 40%)'},
]); ]);
assertComposition({ test_composition({
property: 'margin-bottom', property: 'margin-bottom',
underlying: '50px', underlying: '50px',
addFrom: '100px', addFrom: '100px',
replaceTo: '200px', replaceTo: '200px',
}, [ }, [
{at: -0.3, is: '135px'}, {at: -0.3, expect: '135px'},
{at: 0, is: '150px'}, {at: 0, expect: '150px'},
{at: 0.5, is: '175px'}, {at: 0.5, expect: '175px'},
{at: 1, is: '200px'}, {at: 1, expect: '200px'},
{at: 1.5, is: '225px'}, {at: 1.5, expect: '225px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-bottom', property: 'margin-bottom',
underlying: '100px', underlying: '100px',
addFrom: '100px', addFrom: '100px',
addTo: 'auto', addTo: 'auto',
}, [ }, [
{at: -0.3, is: '200px'}, {at: -0.3, expect: '200px'},
{at: 0, is: '200px'}, {at: 0, expect: '200px'},
{at: 0.5, is: 'auto'}, {at: 0.5, expect: 'auto'},
{at: 1, is: 'auto'}, {at: 1, expect: 'auto'},
{at: 1.5, is: 'auto'}, {at: 1.5, expect: 'auto'},
]); ]);
</script> </script>
</body> </body>
third_party/blink/web_tests/animations/composition/margin-left-composition.html → third_party/blink/web_tests/external/wpt/css/css-box/animation/margin-left-composition.html
View file @ 5b7ac38f
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>margin-left composition</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
<meta name="assert" content="margin-left supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body> <body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script> <script>
assertComposition({ test_composition({
property: 'margin-left', property: 'margin-left',
underlying: '50px', underlying: '50px',
addFrom: '100px', addFrom: '100px',
addTo: '200px', addTo: '200px',
}, [ }, [
{at: -0.3, is: '120px'}, {at: -0.3, expect: '120px'},
{at: 0, is: '150px'}, {at: 0, expect: '150px'},
{at: 0.5, is: '200px'}, {at: 0.5, expect: '200px'},
{at: 1, is: '250px'}, {at: 1, expect: '250px'},
{at: 1.5, is: '300px'}, {at: 1.5, expect: '300px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-left', property: 'margin-left',
underlying: '100px', underlying: '100px',
addFrom: '10px', addFrom: '10px',
addTo: '2px', addTo: '2px',
}, [ }, [
{at: -0.5, is: '114px'}, {at: -0.5, expect: '114px'},
{at: 0, is: '110px'}, {at: 0, expect: '110px'},
{at: 0.5, is: '106px'}, {at: 0.5, expect: '106px'},
{at: 1, is: '102px'}, {at: 1, expect: '102px'},
{at: 1.5, is: '98px'}, {at: 1.5, expect: '98px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-left', property: 'margin-left',
underlying: '10%', underlying: '10%',
addFrom: '100px', addFrom: '100px',
addTo: '20%', addTo: '20%',
}, [ }, [
{at: -0.3, is: 'calc(130px + 4%)'}, {at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'}, {at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'}, {at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, is: '30%'}, {at: 1, expect: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'}, {at: 1.5, expect: 'calc(-50px + 40%)'},
]); ]);
assertComposition({ test_composition({
property: 'margin-left', property: 'margin-left',
underlying: '50px', underlying: '50px',
addFrom: '100px', addFrom: '100px',
replaceTo: '200px', replaceTo: '200px',
}, [ }, [
{at: -0.3, is: '135px'}, {at: -0.3, expect: '135px'},
{at: 0, is: '150px'}, {at: 0, expect: '150px'},
{at: 0.5, is: '175px'}, {at: 0.5, expect: '175px'},
{at: 1, is: '200px'}, {at: 1, expect: '200px'},
{at: 1.5, is: '225px'}, {at: 1.5, expect: '225px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-left', property: 'margin-left',
underlying: '100px', underlying: '100px',
addFrom: '100px', addFrom: '100px',
addTo: 'auto', addTo: 'auto',
}, [ }, [
{at: -0.3, is: '200px'}, {at: -0.3, expect: '200px'},
{at: 0, is: '200px'}, {at: 0, expect: '200px'},
{at: 0.5, is: 'auto'}, {at: 0.5, expect: 'auto'},
{at: 1, is: 'auto'}, {at: 1, expect: 'auto'},
{at: 1.5, is: 'auto'}, {at: 1.5, expect: 'auto'},
]); ]);
</script> </script>
</body> </body>
third_party/blink/web_tests/animations/composition/margin-right-composition.html → third_party/blink/web_tests/external/wpt/css/css-box/animation/margin-right-composition.html
View file @ 5b7ac38f
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>margin-right composition</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
<meta name="assert" content="margin-right supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body> <body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script> <script>
assertComposition({ test_composition({
property: 'margin-right', property: 'margin-right',
underlying: '50px', underlying: '50px',
addFrom: '100px', addFrom: '100px',
addTo: '200px', addTo: '200px',
}, [ }, [
{at: -0.3, is: '120px'}, {at: -0.3, expect: '120px'},
{at: 0, is: '150px'}, {at: 0, expect: '150px'},
{at: 0.5, is: '200px'}, {at: 0.5, expect: '200px'},
{at: 1, is: '250px'}, {at: 1, expect: '250px'},
{at: 1.5, is: '300px'}, {at: 1.5, expect: '300px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-right', property: 'margin-right',
underlying: '100px', underlying: '100px',
addFrom: '10px', addFrom: '10px',
addTo: '2px', addTo: '2px',
}, [ }, [
{at: -0.5, is: '114px'}, {at: -0.5, expect: '114px'},
{at: 0, is: '110px'}, {at: 0, expect: '110px'},
{at: 0.5, is: '106px'}, {at: 0.5, expect: '106px'},
{at: 1, is: '102px'}, {at: 1, expect: '102px'},
{at: 1.5, is: '98px'}, {at: 1.5, expect: '98px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-right', property: 'margin-right',
underlying: '10%', underlying: '10%',
addFrom: '100px', addFrom: '100px',
addTo: '20%', addTo: '20%',
}, [ }, [
{at: -0.3, is: 'calc(130px + 4%)'}, {at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'}, {at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'}, {at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, is: '30%'}, {at: 1, expect: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'}, {at: 1.5, expect: 'calc(-50px + 40%)'},
]); ]);
assertComposition({ test_composition({
property: 'margin-right', property: 'margin-right',
underlying: '50px', underlying: '50px',
addFrom: '100px', addFrom: '100px',
replaceTo: '200px', replaceTo: '200px',
}, [ }, [
{at: -0.3, is: '135px'}, {at: -0.3, expect: '135px'},
{at: 0, is: '150px'}, {at: 0, expect: '150px'},
{at: 0.5, is: '175px'}, {at: 0.5, expect: '175px'},
{at: 1, is: '200px'}, {at: 1, expect: '200px'},
{at: 1.5, is: '225px'}, {at: 1.5, expect: '225px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-right', property: 'margin-right',
underlying: '100px', underlying: '100px',
addFrom: '100px', addFrom: '100px',
addTo: 'auto', addTo: 'auto',
}, [ }, [
{at: -0.3, is: '200px'}, {at: -0.3, expect: '200px'},
{at: 0, is: '200px'}, {at: 0, expect: '200px'},
{at: 0.5, is: 'auto'}, {at: 0.5, expect: 'auto'},
{at: 1, is: 'auto'}, {at: 1, expect: 'auto'},
{at: 1.5, is: 'auto'}, {at: 1.5, expect: 'auto'},
]); ]);
</script> </script>
</body> </body>
third_party/blink/web_tests/animations/composition/margin-top-composition.html → third_party/blink/web_tests/external/wpt/css/css-box/animation/margin-top-composition.html
View file @ 5b7ac38f
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>margin-top composition</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
<meta name="assert" content="margin-top supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body> <body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script> <script>
assertComposition({ test_composition({
property: 'margin-top', property: 'margin-top',
underlying: '50px', underlying: '50px',
addFrom: '100px', addFrom: '100px',
addTo: '200px', addTo: '200px',
}, [ }, [
{at: -0.3, is: '120px'}, {at: -0.3, expect: '120px'},
{at: 0, is: '150px'}, {at: 0, expect: '150px'},
{at: 0.5, is: '200px'}, {at: 0.5, expect: '200px'},
{at: 1, is: '250px'}, {at: 1, expect: '250px'},
{at: 1.5, is: '300px'}, {at: 1.5, expect: '300px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-top', property: 'margin-top',
underlying: '100px', underlying: '100px',
addFrom: '10px', addFrom: '10px',
addTo: '2px', addTo: '2px',
}, [ }, [
{at: -0.5, is: '114px'}, {at: -0.5, expect: '114px'},
{at: 0, is: '110px'}, {at: 0, expect: '110px'},
{at: 0.5, is: '106px'}, {at: 0.5, expect: '106px'},
{at: 1, is: '102px'}, {at: 1, expect: '102px'},
{at: 1.5, is: '98px'}, {at: 1.5, expect: '98px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-top', property: 'margin-top',
underlying: '10%', underlying: '10%',
addFrom: '100px', addFrom: '100px',
addTo: '20%', addTo: '20%',
}, [ }, [
{at: -0.3, is: 'calc(130px + 4%)'}, {at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'}, {at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'}, {at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, is: '30%'}, {at: 1, expect: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'}, {at: 1.5, expect: 'calc(-50px + 40%)'},
]); ]);
assertComposition({ test_composition({
property: 'margin-top', property: 'margin-top',
underlying: '50px', underlying: '50px',
addFrom: '100px', addFrom: '100px',
replaceTo: '200px', replaceTo: '200px',
}, [ }, [
{at: -0.3, is: '135px'}, {at: -0.3, expect: '135px'},
{at: 0, is: '150px'}, {at: 0, expect: '150px'},
{at: 0.5, is: '175px'}, {at: 0.5, expect: '175px'},
{at: 1, is: '200px'}, {at: 1, expect: '200px'},
{at: 1.5, is: '225px'}, {at: 1.5, expect: '225px'},
]); ]);
assertComposition({ test_composition({
property: 'margin-top', property: 'margin-top',
underlying: '100px', underlying: '100px',
addFrom: '100px', addFrom: '100px',
addTo: 'auto', addTo: 'auto',
}, [ }, [
{at: -0.3, is: '200px'}, {at: -0.3, expect: '200px'},
{at: 0, is: '200px'}, {at: 0, expect: '200px'},
{at: 0.5, is: 'auto'}, {at: 0.5, expect: 'auto'},
{at: 1, is: 'auto'}, {at: 1, expect: 'auto'},
{at: 1.5, is: 'auto'}, {at: 1.5, expect: 'auto'},
]); ]);
</script> </script>
</body> </body>
third_party/blink/web_tests/external/wpt/css/css-box/animation/padding-bottom-composition.html 0 → 100644
View file @ 5b7ac38f
<!DOCTYPE html>
<meta charset="UTF-8">
<title>padding-bottom composition</title>
<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
<meta name="assert" content="padding-bottom 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-bottom',
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-bottom',
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-bottom',
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-bottom',
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>
third_party/blink/web_tests/external/wpt/css/css-box/animation/padding-left-composition.html 0 → 100644
View file @ 5b7ac38f
<!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>
third_party/blink/web_tests/external/wpt/css/css-box/animation/padding-right-composition.html 0 → 100644
View file @ 5b7ac38f
<!DOCTYPE html>
<meta charset="UTF-8">
<title>padding-right composition</title>
<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
<meta name="assert" content="padding-right 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-right',
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-right',
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-right',
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-right',
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>
third_party/blink/web_tests/external/wpt/css/css-box/animation/padding-top-composition.html 0 → 100644
View file @ 5b7ac38f
<!DOCTYPE html>
<meta charset="UTF-8">
<title>padding-top composition</title>
<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
<meta name="assert" content="padding-top 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-top',
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-top',
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-top',
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-top',
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>
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