Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-28 04:35:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1499879 [wpt PR 13583] - [css-properties-values-api] Test that interpolated values reach worklet., a=testonly

Browse Source 
Automatic update from web-platform-tests[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}

--

wpt-commits: 4b1465879f1439b31dc7627b3f5bb285775ccaa3
wpt-pr: 13583
This commit is contained in:
Anders Hartvoll Ruud 2018-10-29 17:17:23 +00:00 committed by James Graham
parent 773696c011
commit fab89c1718
11 changed files with 327 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-001.https.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;angle&gt; 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>

25
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-002.https.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;color&gt; 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>

25
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-003.https.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;integer&gt; 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>

25
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-004.https.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;length-percentage&gt; 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>

35
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-005.https.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;length&gt; 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>

25
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-006.https.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;number&gt; 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>

25
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-007.https.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;percentage&gt; 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>

25
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-008.https.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;resolution&gt; 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>

25
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-009.https.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Interpolated &lt;time&gt; 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>

33
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-010.https.html Normal file
View File

@ -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>

59
testing/web-platform/tests/css/css-paint-api/resources/utils.js Normal file
View File

@ -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 });
}