Skip to content

GitLab

T
tangled
Commit 294b36db authored by Anders Hartvoll Ruud's avatar Anders Hartvoll Ruud Committed by Commit Bot
Browse files
Options

[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/1283018Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Anders Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#600698}
parent 9b00eebc
Hide whitespace changes
Inline Side-by-side
Showing with 327 additions and 0 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-001.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-002.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-003.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-004.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-005.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-006.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-007.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-008.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-009.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/registered-property-interpolation-010.https.html 0 → 100644
View file @ 294b36db
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-paint-api/resources/utils.js 0 → 100644
View file @ 294b36db
// 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 });
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment