[css-properties-values-api] Test that interpolated values reach worklet.
R=ikilpatrick@chromium.org
Bug: 641877
Change-Id: Ic0403289f9deaf97369962d6901bafb58dc46931
Reviewed-on: https://chromium-review.googlesource.com/c/1283018
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Anders Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#600698}
diff --git a/css/css-paint-api/registered-property-interpolation-001.https.html b/css/css-paint-api/registered-property-interpolation-001.https.html
new file mode 100644
index 0000000..c6e9302
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-001.https.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated <angle> values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ registerAndInterpolateProperty({
+ on: target, from: '100deg', to: '200deg',
+ name: '--prop', syntax: '<angle>'
+ });
+
+ expectWorkletValue(target, '--prop', '[CSSUnitValue 150deg]');
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/registered-property-interpolation-002.https.html b/css/css-paint-api/registered-property-interpolation-002.https.html
new file mode 100644
index 0000000..cfa9a61
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-002.https.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated <color> values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ registerAndInterpolateProperty({
+ on: target, from: 'rgb(128, 100, 200)', to: 'red',
+ name: '--prop', syntax: '<color>'
+ });
+
+ expectWorkletValue(target, '--prop', '[CSSStyleValue rgb(192, 50, 100)]');
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/registered-property-interpolation-003.https.html b/css/css-paint-api/registered-property-interpolation-003.https.html
new file mode 100644
index 0000000..314d0c0
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-003.https.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated <integer> values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ registerAndInterpolateProperty({
+ on: target, from: '32', to: '64',
+ name: '--prop', syntax: '<integer>'
+ });
+
+ expectWorkletValue(target, '--prop', '[CSSUnitValue 48]');
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/registered-property-interpolation-004.https.html b/css/css-paint-api/registered-property-interpolation-004.https.html
new file mode 100644
index 0000000..1596a93
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-004.https.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated <length-percentage> values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ registerAndInterpolateProperty({
+ on: target, from: '10px', to: '20%',
+ name: '--prop', syntax: '<length-percentage>'
+ });
+
+ expectWorkletValue(target, '--prop', '[CSSMathSum calc(5px + 10%)]');
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/registered-property-interpolation-005.https.html b/css/css-paint-api/registered-property-interpolation-005.https.html
new file mode 100644
index 0000000..807a050
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-005.https.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated <length> values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ target.style.setProperty('font-size', '10px');
+
+ registerAndInterpolateProperty({
+ on: target, from: '10px', to: '20px',
+ name: '--prop-1', syntax: '<length>'
+ });
+
+ registerAndInterpolateProperty({
+ on: target, from: '100px', to: '20em',
+ name: '--prop-2', syntax: '<length>'
+ });
+
+ expectWorkletValues(target, {
+ '--prop-1': '[CSSUnitValue 15px]',
+ '--prop-2': '[CSSUnitValue 150px]'
+ });
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/registered-property-interpolation-006.https.html b/css/css-paint-api/registered-property-interpolation-006.https.html
new file mode 100644
index 0000000..45859a5
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-006.https.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated <number> values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ registerAndInterpolateProperty({
+ on: target, from: '8.5', to: '16.5',
+ name: '--prop', syntax: '<number>'
+ });
+
+ expectWorkletValue(target, '--prop', '[CSSUnitValue 12.5]');
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/registered-property-interpolation-007.https.html b/css/css-paint-api/registered-property-interpolation-007.https.html
new file mode 100644
index 0000000..b3f4f1f
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-007.https.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated <percentage> values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ registerAndInterpolateProperty({
+ on: target, from: '40%', to: '60%',
+ name: '--prop', syntax: '<percentage>'
+ });
+
+ expectWorkletValue(target, '--prop', '[CSSUnitValue 50%]');
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/registered-property-interpolation-008.https.html b/css/css-paint-api/registered-property-interpolation-008.https.html
new file mode 100644
index 0000000..45eb909
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-008.https.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated <resolution> values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ registerAndInterpolateProperty({
+ on: target, from: '100dppx', to: '900dppx',
+ name: '--prop', syntax: '<resolution>'
+ });
+
+ expectWorkletValue(target, '--prop', '[CSSUnitValue 500dppx]');
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/registered-property-interpolation-009.https.html b/css/css-paint-api/registered-property-interpolation-009.https.html
new file mode 100644
index 0000000..e458812
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-009.https.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated <time> values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ registerAndInterpolateProperty({
+ on: target, from: '42s', to: '62s',
+ name: '--prop', syntax: '<time>'
+ });
+
+ expectWorkletValue(target, '--prop', '[CSSUnitValue 52s]');
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/registered-property-interpolation-010.https.html b/css/css-paint-api/registered-property-interpolation-010.https.html
new file mode 100644
index 0000000..d4d1b03
--- /dev/null
+++ b/css/css-paint-api/registered-property-interpolation-010.https.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Interpolated list values reach worklet</title>
+<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
+<link rel="match" href="parse-input-arguments-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script src="./resources/utils.js"></script>
+<body>
+<div id="target"></div>
+<script>
+ try {
+ registerAndInterpolateProperty({
+ on: target, from: '10px 20px', to: '20px 30px',
+ name: '--prop-1', syntax: '<length>+'
+ });
+
+ registerAndInterpolateProperty({
+ on: target, from: '10px', to: '20px',
+ name: '--prop-2', syntax: '<length>+'
+ });
+
+ expectWorkletValues(target, {
+ '--prop-1': ['[CSSUnitValue 15px]', '[CSSUnitValue 25px]'],
+ '--prop-2': '[CSSUnitValue 15px]'
+ });
+ } catch(e) {
+ document.body.textContent = e;
+ takeScreenshot();
+ }
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/resources/utils.js b/css/css-paint-api/resources/utils.js
new file mode 100644
index 0000000..7efe85f
--- /dev/null
+++ b/css/css-paint-api/resources/utils.js
@@ -0,0 +1,59 @@
+
+// Register a property, and interpolate its value to the halfway point.
+function registerAndInterpolateProperty(options) {
+ CSS.registerProperty({
+ name: options.name,
+ syntax: `${options.syntax} | none`,
+ initialValue: 'none',
+ inherits: false
+ });
+ let animation = options.on.animate([
+ { [options.name]: options.from },
+ { [options.name]: options.to }
+ ], 1000);
+ animation.currentTime = 500;
+ animation.pause();
+}
+
+// Apply a paint worklet to 'target' which verifies that the worklet-side value
+// of a set of properties is what we expect.
+//
+// The 'expected' parameter is an object where each key is the name of a
+// property to check, and each corresponding value is an array with the expected
+// (serialized) values for that property.
+function expectWorkletValues(target, expected) {
+ const workletName = 'registered-property-value';
+
+ // Wrap any single values in an array. This makes it possible to omit the
+ // array if there is only one value.
+ const ensureArray = x => x.constructor === Array ? x : [x];
+ expected = Object.entries(expected).map(([k, v]) => [k, ensureArray(v)])
+ .map(x => ({[x[0]]: x[1]}))
+ .reduce((a, b) => Object.assign(a, b), {});
+
+ target.style.setProperty('width', '100px');
+ target.style.setProperty('height', '100px');
+ target.style.setProperty('background-image', `paint(${workletName})`);
+
+ const worklet = `
+ const expectedData = ${JSON.stringify(expected)};
+ const expectedKeys = Object.keys(expectedData).sort();
+ registerPaint('${workletName}', class {
+ static get inputProperties() { return expectedKeys; }
+ paint(ctx, geom, styleMap) {
+ let serialize = (v) => '[' + v.constructor.name + ' ' + v.toString() + ']';
+ let actual = expectedKeys.map(k => styleMap.getAll(k).map(serialize).join(', ')).join(' | ');
+ let expected = expectedKeys.map(k => expectedData[k].join(', ')).join(' | ');
+ ctx.strokeStyle = (actual === expected) ? 'green' : 'red';
+ ctx.lineWidth = 4;
+ ctx.strokeRect(0, 0, geom.width, geom.height);
+ }
+ });`
+
+ importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, worklet);
+}
+
+// Like expectWorkletValues, but can only test a single property.
+function expectWorkletValue(target, property, expected) {
+ expectWorkletValues(target, { [property]: expected });
+}
