Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-27 20:25:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1503698 [wpt PR 13822] - [css-properties-values-api] Invalidate paint worklet on registration., a=testonly

Browse Source 
Automatic update from web-platform-tests[css-properties-values-api] Invalidate paint worklet on registration.

Due to how initial values of registered custom properties used to be
handled, the style diff function for custom paint could not discover that
the computed value for some property changed due to a new property
registration.

This meant that, if you used the property '--x' in your paint worklet
(without applying '--x' on any element in the document), and _then_
registered the property '--x' (giving it an initial value), the worklet
would not repaint even though the computed value of --x changed from
"nothing" to the registered initial value.

Now that initial values are returned from ::GetRegisteredVariable, simply
compare those values when diffing for custom paint invalidation.

Note that the second test in this CL is already passing before this CL,
but I'm including it anyway since that case is also mentioned in the bug.

R=ikilpatrick@chromium.org

Bug: 657706
Change-Id: I2b7707d48d73693a70b100fe1121bd7f977b4db1
Reviewed-on: https://chromium-review.googlesource.com/c/1309788
Commit-Queue: Anders Ruud <andruud@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#604607}

--

wpt-commits: 2a5673603f719fed9b3dce2f6bde705057b90599
wpt-pr: 13822
This commit is contained in:
Anders Hartvoll Ruud 2018-11-09 16:58:48 +00:00 committed by moz-wptsync-bot
parent 973d06230f
commit a59d54df31
3 changed files with 112 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
testing/web-platform/tests/common/worklet-reftest.js
View File

@ -14,6 +14,15 @@ function importWorklet(worklet, code) {
return worklet.addModule(url);
}
async function animationFrames(frames) {
for (let i = 0; i < frames; i++)
await new Promise(requestAnimationFrame);
}
async function workletPainted() {
await animationFrames(2);
}
// To make sure that we take the snapshot at the right time, we do double
// requestAnimationFrame. In the second frame, we take a screenshot, that makes
// sure that we already have a full frame.
@ -24,10 +33,6 @@ async function importWorkletAndTerminateTestAfterAsyncPaint(worklet, code) {
}
await importWorklet(worklet, code);
requestAnimationFrame(function() {
requestAnimationFrame(function() {
takeScreenshot();
});
});
await workletPainted();
takeScreenshot();
}

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

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Registering a property causes invalidation for initial value</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>
<body>
<style>
#target {
background: paint(geometry);
width: 100px;
height: 100px;
}
</style>
<div id="target"></div>
<script id="code" type="text/worklet">
registerPaint('geometry', class {
static get inputProperties() { return ['--color']; }
paint(ctx, geom, styleMap) {
ctx.strokeStyle = styleMap.get('--color').toString();
ctx.lineWidth = 4;
ctx.strokeRect(0, 0, geom.width, geom.height);
}
});
</script>
<script>
async function test() {
getComputedStyle(target);
let code = document.getElementById('code').textContent;
await importWorklet(CSS.paintWorklet, code);
await workletPainted();
CSS.registerProperty({
name: '--color',
syntax: '<color>',
initialValue: 'green',
inherits: false
});
await workletPainted();
takeScreenshot();
}
test();
</script>
</body>
</html>

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

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Registering a property causes invalidation for applied value</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>
<body>
<style>
#target {
background: paint(geometry);
width: 100px;
height: 100px;
--length: 100px;
}
</style>
<div id="target"></div>
<script id="code" type="text/worklet">
registerPaint('geometry', class {
static get inputProperties() { return ['--length']; }
paint(ctx, geom, styleMap) {
let value = styleMap.get('--length');
let pass = value.value === 100 && value.unit === 'px';
ctx.strokeStyle = pass ? 'green' : 'red';
ctx.lineWidth = 4;
ctx.strokeRect(0, 0, geom.width, geom.height);
}
});
</script>
<script>
async function test() {
getComputedStyle(target);
let code = document.getElementById('code').textContent;
await importWorklet(CSS.paintWorklet, code);
await workletPainted();
CSS.registerProperty({
name: '--length',
syntax: '<length>',
initialValue: '0px',
inherits: false
});
await workletPainted();
takeScreenshot();
}
test();
</script>
</body>
</html>