Bug 1567542 [wpt PR 17938] - [OT-PW] Animation integration with new CC impl, a=testonly
authorXida Chen <xidachen@chromium.org>
Mon, 19 Aug 2019 10:40:23 +0000
changeset 553448 5e1a86aaf9ebfac25d0ec278e93396830d68b2d7
parent 553447 21105524b4bd1b21b0ae49bd02da248cce08fd54
child 553449 85e0d1df53413ebbeadebb0496da852b039b5dc4
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1567542, 17938, 956650, 1614120, 687049
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1567542 [wpt PR 17938] - [OT-PW] Animation integration with new CC impl, a=testonly Automatic update from web-platform-tests [OT-PW] Animation integration with new CC impl This CL is for Off-thread PaintWorklet animation integration described in this design doc: https://docs.google.com/document/d/1a7gO6cBxsJhn53akuJuieUiXvB74vvEmFDyKww8NKdw/edit# Right now this CL handles composited custom property animations only, handling native properties should be simpler. Also, right now we only support custom properties that represent numerical values. Here is a summary of the main changes: A new class AnimatedPaintWorkletTracker is created and LTHI keeps an instance of it. The new class maintains a hashmap such that when CC animation ticks, LTHI is able to update the custom property values for corresponding PaintWorkletInput. And also that when LTHI needs to dispatch paint job to the worklet thread, it is able to identify which paint worklets are dirty. Other changes are mostly plumbing needs associated with the above changes. Bug: 956650 Change-Id: If27d6d21cf8fab31e0a2719d81b61cae3d4f3268 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1614120 Commit-Queue: Xida Chen <xidachen@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Reviewed-by: Khushal <khushalsagar@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#687049} -- wpt-commits: 31d0510ee0d8995a294a4e4365a8307607dfa474 wpt-pr: 17938
testing/web-platform/tests/css/css-paint-api/custom-property-animation-on-main-thread.https.html
testing/web-platform/tests/css/css-paint-api/one-custom-property-animation-ref.html
testing/web-platform/tests/css/css-paint-api/one-custom-property-animation.https.html
testing/web-platform/tests/css/css-paint-api/two-custom-property-animation-ref.html
testing/web-platform/tests/css/css-paint-api/two-custom-property-animation.https.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-paint-api/custom-property-animation-on-main-thread.https.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
+<link rel="match" href="one-custom-property-animation-ref.html">
+<style>
+.container {
+  width: 100px;
+  height: 100px;
+  animation: expand 5s;
+}
+@keyframes expand {
+  0% { --foo: 0; }
+  0.01% { --foo: 50; }
+  99% { --foo: 50; }
+  100% { --foo: 100; }
+}
+
+#canvas-geometry {
+  background-color: blue;
+  background-image: paint(geometry);
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<body>
+<div id="canvas-geometry" class="container"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('geometry', class {
+  static get inputProperties() { return ['--foo']; }
+  paint(ctx, geom, properties) {
+    let fooValue = parseFloat(properties.get('--foo').toString());
+    ctx.fillStyle = 'green';
+    ctx.fillRect(0, 0, fooValue, fooValue);
+  }
+});
+</script>
+
+<script>
+CSS.registerProperty({
+  name: '--foo',
+  syntax: '<number>',
+  initialValue: '0',
+  inherits: false
+});
+</script>
+
+<script>
+// The test is designed to make sure that when the custom property animation is
+// running on the compositor thread, we are getting the right value.
+// The "importWorkletAndTerminateTestAfterAsyncPaint" has the logic to rAF
+// two frames before taking a screenshot. So the animation is designed to
+// be stable after two frames. That is, the 0.01% of 5s is much less than
+// two frames, and thus after two frames, the value of --foo should be stable.
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-paint-api/one-custom-property-animation-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var context = canvas.getContext("2d");
+context.fillStyle = 'blue';
+context.fillRect(0, 0, 100, 100);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 50, 50);
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-paint-api/one-custom-property-animation.https.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
+<link rel="match" href="one-custom-property-animation-ref.html">
+<style>
+.container {
+  width: 100px;
+  height: 100px;
+  animation: expand 5s;
+  /* TODO(crbug.com/987969): the will-change: transform should not be needed. */
+  will-change: transform;
+}
+@keyframes expand {
+  0% { --foo: 0; }
+  0.01% { --foo: 50; }
+  99% { --foo: 50; }
+  100% { --foo: 100; }
+}
+
+#canvas-geometry {
+  background-color: blue;
+  background-image: paint(geometry);
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<body>
+<div id="canvas-geometry" class="container"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('geometry', class {
+  static get inputProperties() { return ['--foo']; }
+  paint(ctx, geom, properties) {
+    let fooValue = parseFloat(properties.get('--foo').toString());
+    ctx.fillStyle = 'green';
+    ctx.fillRect(0, 0, fooValue, fooValue);
+  }
+});
+</script>
+
+<script>
+CSS.registerProperty({
+  name: '--foo',
+  syntax: '<number>',
+  initialValue: '0',
+  inherits: false
+});
+</script>
+
+<script>
+// The test is designed to make sure that when the custom property animation is
+// running on the compositor thread, we are getting the right value.
+// The "importWorkletAndTerminateTestAfterAsyncPaint" has the logic to rAF
+// two frames before taking a screenshot. So the animation is designed to
+// be stable after two frames. That is, the 0.01% of 5s is much less than
+// two frames, and thus after two frames, the value of --foo should be stable.
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-paint-api/two-custom-property-animation-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var context = canvas.getContext("2d");
+context.fillStyle = 'blue';
+context.fillRect(0, 0, 100, 100);
+context.fillStyle = '#9876c8';
+context.fillRect(0, 0, 50, 50);
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-paint-api/two-custom-property-animation.https.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
+<link rel="match" href="two-custom-property-animation-ref.html">
+<style>
+.container {
+  width: 100px;
+  height: 100px;
+  animation: expand 5s, clr 5s;
+  /* TODO(crbug.com/987969): the will-change: transform should not be needed. */
+  will-change: transform;
+}
+@keyframes expand {
+  0% { --foo: 0; }
+  0.01% { --foo: 50; }
+  99% { --foo: 50; }
+  100% { --foo: 100; }
+}
+@keyframes clr {
+  0% { --bar: 0; }
+  0.01% { --bar: 200; }
+  99% { --bar: 200; }
+  100% { --bar: 255; }
+}
+
+#canvas-geometry {
+  background-color: blue;
+  background-image: paint(geometry);
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<body>
+<div id="canvas-geometry" class="container"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('geometry', class {
+  static get inputProperties() { return ['--foo', '--bar']; }
+  paint(ctx, geom, properties) {
+    let fooValue = parseFloat(properties.get('--foo').toString());
+    let barValue = parseFloat(properties.get('--bar').toString());
+    let barString = barValue.toString(16);
+    if (barString.length == 1)
+      barString = '0' + barString;
+    ctx.fillStyle = '#9876' + barString;
+    ctx.fillRect(0, 0, fooValue, fooValue);
+  }
+});
+</script>
+
+<script>
+CSS.registerProperty({
+  name: '--foo',
+  syntax: '<number>',
+  initialValue: '0',
+  inherits: false
+});
+CSS.registerProperty({
+  name: '--bar',
+  syntax: '<number>',
+  initialValue: '0',
+  inherits: false
+});
+</script>
+
+<script>
+// The test is designed to make sure that when the custom property animation is
+// running on the compositor thread, we are getting the right value.
+// The "importWorkletAndTerminateTestAfterAsyncPaint" has the logic to rAF
+// two frames before taking a screenshot. So the animation is designed to
+// be stable after two frames. That is, the 0.01% of 5s is much less than
+// two frames, and thus after two frames, the value of --foo should be stable.
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
+</script>
+</body>
+</html>