Skip to content

GitLab

T
tangled
Commit 59e0f00d authored by haozhe's avatar haozhe Committed by Commit Bot
Browse files
Options

Port motion related composition tests to external 

Chrome passes all the tests
Firefox failed the offset-position composition(https://bugzilla.mozilla.org/show_bug.cgi?id=1559232)

Bug: 1034538
Change-Id: I245a6d8e9da8252aed7f5d76ddfbadd052813fcd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1974690Reviewed-by: default avatarXida Chen <xidachen@chromium.org>
Commit-Queue: Hao Sheng <haozhes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#727767}
parent 9c7193d2
Hide whitespace changes
Inline Side-by-side
Showing with 449 additions and 200 deletions
third_party/blink/web_tests/animations/composition/offset-anchor-composition.html deleted 100644 → 0
View file @ 9c7193d2
<!DOCTYPE html>
<style>
.target {
width: 200px;
height: 200px;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'offset-anchor',
underlying: '40px 60px',
addFrom: '60px 40px',
addTo: '160px 140px',
}, [
{at: -0.25, is: '75px 75px'},
{at: 0, is: '100px 100px'},
{at: 0.25, is: '125px 125px'},
{at: 0.5, is: '150px 150px'},
{at: 0.75, is: '175px 175px'},
{at: 1, is: '200px 200px'},
{at: 1.25, is: '225px 225px'},
]);
assertComposition({
property: 'offset-anchor',
underlying: 'top 20% left 40%',
addFrom: 'left 60% top 80%',
addTo: 'right 80% bottom 40%',
}, [
{at: -0.25, is: '110% 105%'},
{at: 0, is: '100% 100%'},
{at: 0.25, is: '90% 95%'},
{at: 0.5, is: '80% 90%'},
{at: 0.75, is: '70% 85%'},
{at: 1, is: '60% 80%'},
{at: 1.25, is: '50% 75%'},
]);
assertComposition({
property: 'offset-anchor',
underlying: '40px 60px',
replaceFrom: '100px 200px',
addTo: '160px 40px',
}, [
{at: -0.25, is: '75px 225px'},
{at: 0, is: '100px 200px'},
{at: 0.25, is: '125px 175px'},
{at: 0.5, is: '150px 150px'},
{at: 0.75, is: '175px 125px'},
{at: 1, is: '200px 100px'},
{at: 1.25, is: '225px 75px'},
]);
assertComposition({
property: 'offset-anchor',
underlying: '40px 60px',
addFrom: '60px 140px',
replaceTo: '200px 100px',
}, [
{at: -0.25, is: '75px 225px'},
{at: 0, is: '100px 200px'},
{at: 0.25, is: '125px 175px'},
{at: 0.5, is: '150px 150px'},
{at: 0.75, is: '175px 125px'},
{at: 1, is: '200px 100px'},
{at: 1.25, is: '225px 75px'},
]);
</script>
</body>
third_party/blink/web_tests/animations/composition/offset-distance-composition.html deleted 100644 → 0
View file @ 9c7193d2
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'offset-distance',
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: 'offset-distance',
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'},
]);
assertComposition({
property: 'offset-distance',
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: 'offset-distance',
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/offset-position-composition.html deleted 100644 → 0
View file @ 9c7193d2
<!DOCTYPE html>
<style>
.target {
width: 200px;
height: 200px;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'offset-position',
underlying: '40px 60px',
addFrom: '60px 40px',
addTo: '160px 140px',
}, [
{at: -0.25, is: '75px 75px'},
{at: 0, is: '100px 100px'},
{at: 0.25, is: '125px 125px'},
{at: 0.5, is: '150px 150px'},
{at: 0.75, is: '175px 175px'},
{at: 1, is: '200px 200px'},
{at: 1.25, is: '225px 225px'},
]);
assertComposition({
property: 'offset-position',
underlying: 'top 20% left 40%',
addFrom: 'left 60% top 80%',
addTo: 'right 80% bottom 40%',
}, [
{at: -0.25, is: '110% 105%'},
{at: 0, is: '100% 100%'},
{at: 0.25, is: '90% 95%'},
{at: 0.5, is: '80% 90%'},
{at: 0.75, is: '70% 85%'},
{at: 1, is: '60% 80%'},
{at: 1.25, is: '50% 75%'},
]);
assertComposition({
property: 'offset-position',
underlying: '40px 60px',
replaceFrom: '100px 200px',
addTo: '160px 40px',
}, [
{at: -0.25, is: '75px 225px'},
{at: 0, is: '100px 200px'},
{at: 0.25, is: '125px 175px'},
{at: 0.5, is: '150px 150px'},
{at: 0.75, is: '175px 125px'},
{at: 1, is: '200px 100px'},
{at: 1.25, is: '225px 75px'},
]);
assertComposition({
property: 'offset-position',
underlying: '40px 60px',
addFrom: '60px 140px',
replaceTo: '200px 100px',
}, [
{at: -0.25, is: '75px 225px'},
{at: 0, is: '100px 200px'},
{at: 0.25, is: '125px 175px'},
{at: 0.5, is: '150px 150px'},
{at: 0.75, is: '175px 125px'},
{at: 1, is: '200px 100px'},
{at: 1.25, is: '225px 75px'},
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/motion/animation/offset-anchor-composition.html 0 → 100644
View file @ 59e0f00d
<!DOCTYPE html>
<meta charset="utf-8">
<title>offset-anchor composition</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
<meta name="assert" content="offset-anchor supports animation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
width: 200px;
height: 200px;
}
</style>
<body>
<script>
test_composition({
property: 'offset-anchor',
underlying: '40px 60px',
addFrom: '60px 40px',
addTo: '160px 140px',
}, [
{at: -0.25, expect: '75px 75px'},
{at: 0, expect: '100px 100px'},
{at: 0.25, expect: '125px 125px'},
{at: 0.5, expect: '150px 150px'},
{at: 0.75, expect: '175px 175px'},
{at: 1, expect: '200px 200px'},
{at: 1.25, expect: '225px 225px'},
]);
test_composition({
property: 'offset-anchor',
underlying: 'top 20% left 40%',
addFrom: 'left 60% top 80%',
addTo: 'right 80% bottom 40%',
}, [
{at: -0.25, expect: '110% 105%'},
{at: 0, expect: '100% 100%'},
{at: 0.25, expect: '90% 95%'},
{at: 0.5, expect: '80% 90%'},
{at: 0.75, expect: '70% 85%'},
{at: 1, expect: '60% 80%'},
{at: 1.25, expect: '50% 75%'},
]);
test_composition({
property: 'offset-anchor',
underlying: '40px 60px',
replaceFrom: '100px 200px',
addTo: '160px 40px',
}, [
{at: -0.25, expect: '75px 225px'},
{at: 0, expect: '100px 200px'},
{at: 0.25, expect: '125px 175px'},
{at: 0.5, expect: '150px 150px'},
{at: 0.75, expect: '175px 125px'},
{at: 1, expect: '200px 100px'},
{at: 1.25, expect: '225px 75px'},
]);
test_composition({
property: 'offset-anchor',
underlying: '40px 60px',
addFrom: '60px 140px',
replaceTo: '200px 100px',
}, [
{at: -0.25, expect: '75px 225px'},
{at: 0, expect: '100px 200px'},
{at: 0.25, expect: '125px 175px'},
{at: 0.5, expect: '150px 150px'},
{at: 0.75, expect: '175px 125px'},
{at: 1, expect: '200px 100px'},
{at: 1.25, expect: '225px 75px'},
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/motion/animation/offset-distance-composition.html 0 → 100644
View file @ 59e0f00d
<!DOCTYPE html>
<meta charset="UTF-8">
<title>offset-distance composition</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
<meta name="assert" content="offset-distance supports animation.">
<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: 'offset-distance',
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: 'offset-distance',
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'},
]);
test_composition({
property: 'offset-distance',
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: 'offset-distance',
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/animations/composition/offset-path-composition.html → third_party/blink/web_tests/external/wpt/css/motion/animation/offset-path-composition.html
View file @ 59e0f00d
<!DOCTYPE html>
<meta charset="utf-8">
<title>offset-distance composition</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
<meta name="assert" content="offset-distance supports animation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
// TODO(ericwilligers) Support additive animation for path strings crbug.com/699308
// Ray paths compose.
assertComposition({
test_composition({
property: 'offset-path',
underlying: 'ray(20deg sides)',
addFrom: 'ray(10deg sides)',
addTo: 'ray(20deg sides)',
}, [
{at: -0.3, is: 'ray(27deg sides)'},
{at: 0, is: 'ray(30deg sides)'},
{at: 0.3, is: 'ray(33deg sides)'},
{at: 0.6, is: 'ray(36deg sides)'},
{at: 1, is: 'ray(40deg sides)'},
{at: 1.5, is: 'ray(45deg sides)'},
{at: -0.3, expect: 'ray(27deg sides)'},
{at: 0, expect: 'ray(30deg sides)'},
{at: 0.3, expect: 'ray(33deg sides)'},
{at: 0.6, expect: 'ray(36deg sides)'},
{at: 1, expect: 'ray(40deg sides)'},
{at: 1.5, expect: 'ray(45deg sides)'},
]);
// Ray paths without contain don't compose with underlying contain.
assertComposition({
test_composition({
property: 'offset-path',
underlying: 'ray(20deg closest-corner contain)',
addFrom: 'ray(10deg closest-corner)',
addTo: 'ray(20deg closest-corner)',
}, [
{at: -0.3, is: 'ray(7deg closest-corner)'},
{at: 0, is: 'ray(10deg closest-corner)'},
{at: 0.3, is: 'ray(13deg closest-corner)'},
{at: 0.6, is: 'ray(16deg closest-corner)'},
{at: 1, is: 'ray(20deg closest-corner)'},
{at: 1.5, is: 'ray(25deg closest-corner)'},
{at: -0.3, expect: 'ray(7deg closest-corner)'},
{at: 0, expect: 'ray(10deg closest-corner)'},
{at: 0.3, expect: 'ray(13deg closest-corner)'},
{at: 0.6, expect: 'ray(16deg closest-corner)'},
{at: 1, expect: 'ray(20deg closest-corner)'},
{at: 1.5, expect: 'ray(25deg closest-corner)'},
]);
// Ray paths don't compose when underlying has different size.
assertComposition({
test_composition({
property: 'offset-path',
underlying: 'ray(20deg closest-side)',
addFrom: 'ray(10deg closest-corner)',
addTo: 'ray(20deg closest-corner)',
}, [
{at: -0.3, is: 'ray(7deg closest-corner)'},
{at: 0, is: 'ray(10deg closest-corner)'},
{at: 0.3, is: 'ray(13deg closest-corner)'},
{at: 0.6, is: 'ray(16deg closest-corner)'},
{at: 1, is: 'ray(20deg closest-corner)'},
{at: 1.5, is: 'ray(25deg closest-corner)'},
{at: -0.3, expect: 'ray(7deg closest-corner)'},
{at: 0, expect: 'ray(10deg closest-corner)'},
{at: 0.3, expect: 'ray(13deg closest-corner)'},
{at: 0.6, expect: 'ray(16deg closest-corner)'},
{at: 1, expect: 'ray(20deg closest-corner)'},
{at: 1.5, expect: 'ray(25deg closest-corner)'},
]);
// Ray contain paths compose with underlying contain.
assertComposition({
test_composition({
property: 'offset-path',
underlying: 'ray(20deg farthest-side contain)',
addFrom: 'ray(190deg farthest-side contain)',
addTo: 'ray(20deg farthest-side contain)',
}, [
{at: -0.3, is: 'ray(261deg farthest-side contain)'},
{at: 0, is: 'ray(210deg farthest-side contain)'},
{at: 0.3, is: 'ray(159deg farthest-side contain)'},
{at: 0.6, is: 'ray(108deg farthest-side contain)'},
{at: 1, is: 'ray(40deg farthest-side contain)'},
{at: 1.5, is: 'ray(-45deg farthest-side contain)'},
{at: -0.3, expect: 'ray(261deg farthest-side contain)'},
{at: 0, expect: 'ray(210deg farthest-side contain)'},
{at: 0.3, expect: 'ray(159deg farthest-side contain)'},
{at: 0.6, expect: 'ray(108deg farthest-side contain)'},
{at: 1, expect: 'ray(40deg farthest-side contain)'},
{at: 1.5, expect: 'ray(-45deg farthest-side contain)'},
]);
// When we can't interpolate, we can't compose.
assertComposition({
test_composition({
property: 'offset-path',
underlying: 'ray(20deg farthest-corner)',
addFrom: 'ray(190deg farthest-corner contain)',
addTo: 'ray(20deg farthest-corner)',
}, [
{at: -0.3, is: 'ray(190deg farthest-corner contain)'},
{at: 0, is: 'ray(190deg farthest-corner contain)'},
{at: 0.3, is: 'ray(190deg farthest-corner contain)'},
{at: 0.6, is: 'ray(40deg farthest-corner)'},
{at: 1, is: 'ray(40deg farthest-corner)'},
{at: 1.5, is: 'ray(40deg farthest-corner)'},
{at: -0.3, expect: 'ray(190deg farthest-corner contain)'},
{at: 0, expect: 'ray(190deg farthest-corner contain)'},
{at: 0.3, expect: 'ray(190deg farthest-corner contain)'},
{at: 0.6, expect: 'ray(40deg farthest-corner)'},
{at: 1, expect: 'ray(40deg farthest-corner)'},
{at: 1.5, expect: 'ray(40deg farthest-corner)'},
]);
assertComposition({
test_composition({
property: 'offset-path',
underlying: 'ray(20deg sides)',
replaceFrom: 'ray(190deg sides contain)',
addTo: 'ray(20deg sides)',
}, [
{at: -0.3, is: 'ray(190deg sides contain)'},
{at: 0, is: 'ray(190deg sides contain)'},
{at: 0.3, is: 'ray(190deg sides contain)'},
{at: 0.6, is: 'ray(40deg sides)'},
{at: 1, is: 'ray(40deg sides)'},
{at: 1.5, is: 'ray(40deg sides)'},
{at: -0.3, expect: 'ray(190deg sides contain)'},
{at: 0, expect: 'ray(190deg sides contain)'},
{at: 0.3, expect: 'ray(190deg sides contain)'},
{at: 0.6, expect: 'ray(40deg sides)'},
{at: 1, expect: 'ray(40deg sides)'},
{at: 1.5, expect: 'ray(40deg sides)'},
]);
// Ray paths compose with underlying.
assertComposition({
test_composition({
property: 'offset-path',
underlying: 'ray(20deg closest-side)',
addFrom: 'ray(10deg closest-side)',
replaceTo: 'ray(10deg closest-side)',
}, [
{at: -0.3, is: 'ray(36deg closest-side)'},
{at: 0, is: 'ray(30deg closest-side)'},
{at: 0.3, is: 'ray(24deg closest-side)'},
{at: 0.6, is: 'ray(18deg closest-side)'},
{at: 1, is: 'ray(10deg closest-side)'},
{at: 1.5, is: 'ray(0deg closest-side)'},
{at: -0.3, expect: 'ray(36deg closest-side)'},
{at: 0, expect: 'ray(30deg closest-side)'},
{at: 0.3, expect: 'ray(24deg closest-side)'},
{at: 0.6, expect: 'ray(18deg closest-side)'},
{at: 1, expect: 'ray(10deg closest-side)'},
{at: 1.5, expect: 'ray(0deg closest-side)'},
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/motion/animation/offset-position-composition.html 0 → 100644
View file @ 59e0f00d
<!DOCTYPE html>
<meta charset="utf-8">
<title>offset-position composition</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
<meta name="assert" content="offset-position supports <position> animation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
width: 200px;
height: 200px;
}
</style>
<body>
<script>
test_composition({
property: 'offset-position',
underlying: '40px 60px',
addFrom: '60px 40px',
addTo: '160px 140px',
}, [
{at: -0.25, expect: '75px 75px'},
{at: 0, expect: '100px 100px'},
{at: 0.25, expect: '125px 125px'},
{at: 0.5, expect: '150px 150px'},
{at: 0.75, expect: '175px 175px'},
{at: 1, expect: '200px 200px'},
{at: 1.25, expect: '225px 225px'},
]);
test_composition({
property: 'offset-position',
underlying: 'top 20% left 40%',
addFrom: 'left 60% top 80%',
addTo: 'right 80% bottom 40%',
}, [
{at: -0.25, expect: '110% 105%'},
{at: 0, expect: '100% 100%'},
{at: 0.25, expect: '90% 95%'},
{at: 0.5, expect: '80% 90%'},
{at: 0.75, expect: '70% 85%'},
{at: 1, expect: '60% 80%'},
{at: 1.25, expect: '50% 75%'},
]);
test_composition({
property: 'offset-position',
underlying: '40px 60px',
replaceFrom: '100px 200px',
addTo: '160px 40px',
}, [
{at: -0.25, expect: '75px 225px'},
{at: 0, expect: '100px 200px'},
{at: 0.25, expect: '125px 175px'},
{at: 0.5, expect: '150px 150px'},
{at: 0.75, expect: '175px 125px'},
{at: 1, expect: '200px 100px'},
{at: 1.25, expect: '225px 75px'},
]);
test_composition({
property: 'offset-position',
underlying: '40px 60px',
addFrom: '60px 140px',
replaceTo: '200px 100px',
}, [
{at: -0.25, expect: '75px 225px'},
{at: 0, expect: '100px 200px'},
{at: 0.25, expect: '125px 175px'},
{at: 0.5, expect: '150px 150px'},
{at: 0.75, expect: '175px 125px'},
{at: 1, expect: '200px 100px'},
{at: 1.25, expect: '225px 75px'},
]);
</script>
</body>
third_party/blink/web_tests/animations/composition/offset-rotate-composition.html → third_party/blink/web_tests/external/wpt/css/motion/animation/offset-rotate-composition.html
View file @ 59e0f00d
<!DOCTYPE html>
<meta charset="utf-8">
<title>offset-rotate composition</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
<meta name="assert" content="offset-rotate supports animation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
// Angle rotations compose.
assertComposition({
test_composition({
property: 'offset-rotate',
underlying: '20deg',
addFrom: '10deg',
addTo: '20deg',
}, [
{at: -0.3, is: '27deg'},
{at: 0, is: '30deg'},
{at: 0.3, is: '33deg'},
{at: 0.6, is: '36deg'},
{at: 1, is: '40deg'},
{at: 1.5, is: '45deg'},
{at: -0.3, expect: '27deg'},
{at: 0, expect: '30deg'},
{at: 0.3, expect: '33deg'},
{at: 0.6, expect: '36deg'},
{at: 1, expect: '40deg'},
{at: 1.5, expect: '45deg'},
]);
// Angle rotations don't compose with underlying 'auto'.
assertComposition({
test_composition({
property: 'offset-rotate',
underlying: 'auto 20deg',
addFrom: '10deg',
addTo: '20deg',
}, [
{at: -0.3, is: '7deg'},
{at: 0, is: '10deg'},
{at: 0.3, is: '13deg'},
{at: 0.6, is: '16deg'},
{at: 1, is: '20deg'},
{at: 1.5, is: '25deg'},
{at: -0.3, expect: '7deg'},
{at: 0, expect: '10deg'},
{at: 0.3, expect: '13deg'},
{at: 0.6, expect: '16deg'},
{at: 1, expect: '20deg'},
{at: 1.5, expect: '25deg'},
]);
// Auto rotations compose with underlying 'auto'.
assertComposition({
test_composition({
property: 'offset-rotate',
underlying: 'auto 20deg',
addFrom: 'reverse 10deg',
addTo: 'auto 20deg',
}, [
{at: -0.3, is: 'auto 261deg'},
{at: 0, is: 'auto 210deg'},
{at: 0.3, is: 'auto 159deg'},
{at: 0.6, is: 'auto 108deg'},
{at: 1, is: 'auto 40deg'},
{at: 1.5, is: 'auto -45deg'},
{at: -0.3, expect: 'auto 261deg'},
{at: 0, expect: 'auto 210deg'},
{at: 0.3, expect: 'auto 159deg'},
{at: 0.6, expect: 'auto 108deg'},
{at: 1, expect: 'auto 40deg'},
{at: 1.5, expect: 'auto -45deg'},
]);
// When we can't interpolate, we can't compose.
assertComposition({
test_composition({
property: 'offset-rotate',
underlying: '20deg',
addFrom: 'reverse 10deg',
addTo: '20deg',
}, [
{at: -0.3, is: 'auto 190deg'},
{at: 0, is: 'auto 190deg'},
{at: 0.3, is: 'auto 190deg'},
{at: 0.6, is: '40deg'},
{at: 1, is: '40deg'},
{at: 1.5, is: '40deg'},
{at: -0.3, expect: 'auto 190deg'},
{at: 0, expect: 'auto 190deg'},
{at: 0.3, expect: 'auto 190deg'},
{at: 0.6, expect: '40deg'},
{at: 1, expect: '40deg'},
{at: 1.5, expect: '40deg'},
]);
assertComposition({
test_composition({
property: 'offset-rotate',
underlying: '20deg',
replaceFrom: 'reverse 10deg',
addTo: '20deg',
}, [
{at: -0.3, is: 'auto 190deg'},
{at: 0, is: 'auto 190deg'},
{at: 0.3, is: 'auto 190deg'},
{at: 0.6, is: '40deg'},
{at: 1, is: '40deg'},
{at: 1.5, is: '40deg'},
{at: -0.3, expect: 'auto 190deg'},
{at: 0, expect: 'auto 190deg'},
{at: 0.3, expect: 'auto 190deg'},
{at: 0.6, expect: '40deg'},
{at: 1, expect: '40deg'},
{at: 1.5, expect: '40deg'},
]);
// Angle rotations compose with underlying angle.
assertComposition({
test_composition({
property: 'offset-rotate',
underlying: '20deg',
addFrom: '10deg',
replaceTo: '10deg',
}, [
{at: -0.3, is: '36deg'},
{at: 0, is: '30deg'},
{at: 0.3, is: '24deg'},
{at: 0.6, is: '18deg'},
{at: 1, is: '10deg'},
{at: 1.5, is: '0deg'},
{at: -0.3, expect: '36deg'},
{at: 0, expect: '30deg'},
{at: 0.3, expect: '24deg'},
{at: 0.6, expect: '18deg'},
{at: 1, expect: '10deg'},
{at: 1.5, expect: '0deg'},
]);
</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