Skip to content

GitLab

T
tangled
Commit 594e5522 authored by Xida Chen's avatar Xida Chen Committed by Commit Bot
Browse files
Options

Port clip-path interpolation to wpt 

Bug: 900581
Change-Id: I9d1c84c30f630eae5001abef60af03d827436512
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1831261Reviewed-by: default avatarYi Gu <yigu@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#701122}
parent 416cfd4d
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 129 deletions
third_party/blink/web_tests/animations/interpolation/clip-path-interpolation.html
View file @ 594e5522
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
clip-path: circle(80% at 30% 10%);
}
.target {
clip-path: circle(60% at 10% 30%);
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
/* TODO: add inset test once blend() works for it */
assertInterpolation({
property: 'clip-path',
from: neutralKeyframe,
to: 'circle(40% at 20% 20%)',
}, [
{at: -0.3, is: 'circle(66% at 7% 33%)'},
{at: 0, is: 'circle(60% at 10% 30%)'},
{at: 0.3, is: 'circle(54% at 13% 27%)'},
{at: 0.6, is: 'circle(48% at 16% 24%)'},
{at: 1, is: 'circle(40% at 20% 20%)'},
{at: 1.5, is: 'circle(30% at 25% 15%)'},
]);
assertNoInterpolation({
property: 'clip-path',
from: 'initial',
to: 'circle(40% at 20% 20%)',
});
assertInterpolation({
property: 'clip-path',
from: 'inherit',
to: 'circle(40% at 20% 20%)',
}, [
{at: -0.3, is: 'circle(92% at 33% 7%)'},
{at: 0, is: 'circle(80% at 30% 10%)'},
{at: 0.3, is: 'circle(68% at 27% 13%)'},
{at: 0.6, is: 'circle(56% at 24% 16%)'},
{at: 1, is: 'circle(40% at 20% 20%)'},
{at: 1.5, is: 'circle(20% at 15% 25%)'},
]);
assertNoInterpolation({
property: 'clip-path',
from: 'unset',
to: 'circle(40% at 20% 20%)',
});
assertInterpolation({
property: 'clip-path',
from: 'circle(100% at 0% 0%)',
to: 'circle(50% at 25% 25%)',
}, [
{at: -0.3, is: 'circle(115% at -7.5% -7.5%)'},
{at: 0, is: 'circle(100% at 0% 0%)'},
{at: 0.3, is: 'circle(85% at 7.5% 7.5%)'},
{at: 0.6, is: 'circle(70% at 15% 15%)'},
{at: 1, is: 'circle(50% at 25% 25%)'},
{at: 1.5, is: 'circle(25% at 37.5% 37.5%)'}
]);
assertInterpolation({
property: 'clip-path',
from: 'ellipse(100% 100% at 0% 0%)',
to: 'ellipse(50% 50% at 25% 25%)',
}, [
{at: -0.3, is: 'ellipse(115% 115% at -7.5% -7.5%)'},
{at: 0, is: 'ellipse(100% 100% at 0% 0%)'},
{at: 0.3, is: 'ellipse(85% 85% at 7.5% 7.5%)'},
{at: 0.6, is: 'ellipse(70% 70% at 15% 15%)'},
{at: 1, is: 'ellipse(50% 50% at 25% 25%)'},
{at: 1.5, is: 'ellipse(25% 25% at 37.5% 37.5%)'}
]);
assertInterpolation({
property: 'clip-path',
from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)',
to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
}, [
{at: -0.3, is: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'},
{at: 0, is: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'},
{at: 0.3, is: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'},
{at: 0.6, is: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'},
{at: 1, is: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'},
{at: 1.5, is: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'}
]);
assertNoInterpolation({
property: 'clip-path',
from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)',
to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
});
assertInterpolation({
property: 'clip-path',
from: 'inset(100%)',
to: 'inset(120%)',
}, [
{at: -0.3, is: 'inset(94%)'},
{at: 0, is: 'inset(100%)'},
{at: 0.3, is: 'inset(106%)'},
{at: 0.6, is: 'inset(112%)'},
{at: 1, is: 'inset(120%)'},
{at: 1.5, is: 'inset(130%)'},
]);
assertNoInterpolation({
property: 'clip-path',
from: 'none',
to: 'ellipse(100% 100% at 0% 0%)',
});
assertInterpolation({
property: 'clip-path',
from: 'circle(25% at right 5% bottom 15px)',
to: 'circle(45% at right 25% bottom 35px)',
}, [
{at: 0.25, is: 'circle(30% at 90% calc(-20px + 100%))'},
{at: 0.5, is: 'circle(35% at 85% calc(-25px + 100%))'},
{at: 0.75, is: 'circle(40% at 80% calc(-30px + 100%))'},
]);
// Regression test for crbug.com/920122.
assertInterpolation({
property: 'clip-path',
......@@ -134,13 +12,6 @@ assertInterpolation({
{at: 3.40282e+38, is: 'inset(calc(3.40282e+38% + -3.40282e+38px))'},
]);
assertNoInterpolation({
property: 'clip-path',
from: 'url("/clip-source")',
to: 'ellipse(100% 100% at 0% 0%)',
});
// clip-path <geometry-box> support is not yet implemented in Blink.
// crbug.com/694218
......
third_party/blink/web_tests/external/wpt/css/css-masking/animations/clip-path-interpolation.html 0 → 100644
View file @ 594e5522
<!DOCTYPE html>
<meta charset="UTF-8">
<title>clip-path interpolation</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
<meta name="assert" content="clip-path supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
clip-path: circle(80% at 30% 10%);
}
.target {
clip-path: circle(60% at 10% 30%);
}
</style>
<body>
<script>
test_interpolation({
property: 'clip-path',
from: neutralKeyframe,
to: 'circle(40% at 20% 20%)',
}, [
{at: -0.3, expect: 'circle(66% at 7% 33%)'},
{at: 0, expect: 'circle(60% at 10% 30%)'},
{at: 0.3, expect: 'circle(54% at 13% 27%)'},
{at: 0.6, expect: 'circle(48% at 16% 24%)'},
{at: 1, expect: 'circle(40% at 20% 20%)'},
{at: 1.5, expect: 'circle(30% at 25% 15%)'},
]);
test_no_interpolation({
property: 'clip-path',
from: 'initial',
to: 'circle(40% at 20% 20%)',
});
test_interpolation({
property: 'clip-path',
from: 'inherit',
to: 'circle(40% at 20% 20%)',
}, [
{at: -0.3, expect: 'circle(92% at 33% 7%)'},
{at: 0, expect: 'circle(80% at 30% 10%)'},
{at: 0.3, expect: 'circle(68% at 27% 13%)'},
{at: 0.6, expect: 'circle(56% at 24% 16%)'},
{at: 1, expect: 'circle(40% at 20% 20%)'},
{at: 1.5, expect: 'circle(20% at 15% 25%)'},
]);
test_no_interpolation({
property: 'clip-path',
from: 'unset',
to: 'circle(40% at 20% 20%)',
});
test_interpolation({
property: 'clip-path',
from: 'circle(100% at 0% 0%)',
to: 'circle(50% at 25% 25%)',
}, [
{at: -0.3, expect: 'circle(115% at -7.5% -7.5%)'},
{at: 0, expect: 'circle(100% at 0% 0%)'},
{at: 0.3, expect: 'circle(85% at 7.5% 7.5%)'},
{at: 0.6, expect: 'circle(70% at 15% 15%)'},
{at: 1, expect: 'circle(50% at 25% 25%)'},
{at: 1.5, expect: 'circle(25% at 37.5% 37.5%)'}
]);
test_interpolation({
property: 'clip-path',
from: 'ellipse(100% 100% at 0% 0%)',
to: 'ellipse(50% 50% at 25% 25%)',
}, [
{at: -0.3, expect: 'ellipse(115% 115% at -7.5% -7.5%)'},
{at: 0, expect: 'ellipse(100% 100% at 0% 0%)'},
{at: 0.3, expect: 'ellipse(85% 85% at 7.5% 7.5%)'},
{at: 0.6, expect: 'ellipse(70% 70% at 15% 15%)'},
{at: 1, expect: 'ellipse(50% 50% at 25% 25%)'},
{at: 1.5, expect: 'ellipse(25% 25% at 37.5% 37.5%)'}
]);
test_interpolation({
property: 'clip-path',
from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)',
to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
}, [
{at: -0.3, expect: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'},
{at: 0, expect: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'},
{at: 0.3, expect: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'},
{at: 0.6, expect: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'},
{at: 1, expect: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'},
{at: 1.5, expect: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'}
]);
test_no_interpolation({
property: 'clip-path',
from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)',
to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
});
test_interpolation({
property: 'clip-path',
from: 'inset(100%)',
to: 'inset(120%)',
}, [
{at: -0.3, expect: 'inset(94%)'},
{at: 0, expect: 'inset(100%)'},
{at: 0.3, expect: 'inset(106%)'},
{at: 0.6, expect: 'inset(112%)'},
{at: 1, expect: 'inset(120%)'},
{at: 1.5, expect: 'inset(130%)'},
]);
test_no_interpolation({
property: 'clip-path',
from: 'none',
to: 'ellipse(100% 100% at 0% 0%)',
});
test_interpolation({
property: 'clip-path',
from: 'circle(25% at right 5% bottom 15px)',
to: 'circle(45% at right 25% bottom 35px)',
}, [
{at: 0.25, expect: 'circle(30% at 90% calc(-20px + 100%))'},
{at: 0.5, expect: 'circle(35% at 85% calc(-25px + 100%))'},
{at: 0.75, expect: 'circle(40% at 80% calc(-30px + 100%))'},
]);
test_no_interpolation({
property: 'clip-path',
from: 'url("/clip-source")',
to: 'ellipse(100% 100% at 0% 0%)',
});
</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