Create compositor animation for clip-path
Changes made:
- Updated configuration to make CSS clip-path property compositable.
- Create compositor animation for clip-path property.
- Initial updates towards interpolation of clip-path during paint on
ClipPathPaintWorklet. Currently the interpolation results are hard
coded to either first or last keyframe.
Bug: 1223975
Change-Id: I3ee86d570b27c87a36b013cc86049bfc5d013057
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2994869
Commit-Queue: Olga Gerchikov <gerchiko@microsoft.com>
Reviewed-by: Xida Chen <xidachen@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#910065}
diff --git a/css/css-masking/clip-path/animations/clip-path-animation-ref.html b/css/css-masking/clip-path/animations/clip-path-animation-ref.html
new file mode 100644
index 0000000..587226f
--- /dev/null
+++ b/css/css-masking/clip-path/animations/clip-path-animation-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+.container {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ clip-path: circle(20% at 20% 20%);
+}
+</style>
+<body>
+<div class="container"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/css/css-masking/clip-path/animations/clip-path-animation.html b/css/css-masking/clip-path/animations/clip-path-animation.html
new file mode 100644
index 0000000..1f0225a
--- /dev/null
+++ b/css/css-masking/clip-path/animations/clip-path-animation.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
+<link rel="match" href="clip-path-animation-ref.html">
+<meta name=fuzzy content="0-255;0-2">
+<style>
+.container {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ clip-path: ellipse(50% 40% at 50% 50%);
+ /* Use a long animation that start at 50% progress where the slope of the
+ selected timing function is zero. By setting up the animation in this way,
+ we accommodate lengthy delays in running the test without a potential drift
+ in the animated property value. This is important for avoiding flakes,
+ especially on debug builds. The screenshots are taken as soon as the
+ animation is ready, thus the long animation duration has no bearing on
+ the actual duration of the test. */
+ animation: clippath 1000000s cubic-bezier(0,1,1,0) -500000s;
+}
+@keyframes clippath {
+ 0% { clip-path: circle(50% at 50% 50%); }
+ 30% { clip-path: circle(20% at 20% 20%); }
+ 100% { clip-path: circle(20% at 20% 20%); }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<body>
+<div class="container"></div>
+
+<script>
+document.getAnimations()[0].ready.then(() => {
+ takeScreenshot();
+});
+</script>
+</body>
+</html>
\ No newline at end of file
