mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-28 04:35:33 +00:00
Bug 1499879 [wpt PR 13583] - [css-properties-values-api] Test that interpolated values reach worklet., a=testonly
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:
parent
773696c011
commit
fab89c1718
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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 });
|
||||
}
|
Loading…
Reference in New Issue
Block a user