mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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

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 коммит произвёл moz-wptsync-bot
Родитель 973d06230f
Коммит a59d54df31
3 изменённых файлов: 112 добавлений и 6 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

17
testing/web-platform/tests/common/worklet-reftest.js
Просмотреть файл

@ -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
Просмотреть файл

@ -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
Просмотреть файл

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