Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 21:31:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1804284 [wpt PR 37355] - VT: Ensure all layers that recalculate their draw props push props too, a=testonly

Browse Source 
Automatic update from web-platform-tests
VT: Ensure all layers that recalculate their draw props push props too

This patch is a more comprehensive fix for the referenced bug.
Previously, we've only addressed opacity animations, but the same bug
is present for transform animations as well. The problem with
transforms is that to detect changes in the matrix, we need to do
a lot of float comparisons. It seems better to just unconditionally
say that if we recalculated draw properties, then that layer needs
to push properties as well.

Note for picture layer impls, this is still a no-op, since they
always push their properties.

R=pdr@chromium.org

Bug: 1385432
Change-Id: I6df15e6e344507f26336698e4bf890728690da52
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4081632
Reviewed-by: Philip Rogers <pdr@chromium.org>
Auto-Submit: Vladimir Levin <vmpstr@chromium.org>
Commit-Queue: Vladimir Levin <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1081505}

--

wpt-commits: 74b130a8568849fbe41898789c19c1382171e931
wpt-pr: 37355
This commit is contained in:
Vladimir Levin 2022-12-11 21:40:29 +00:00 committed by moz-wptsync-bot
parent bd6979fd04
commit 25c2d3eff4
4 changed files with 169 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
testing/web-platform/tests/css/css-transforms/animation/canvas-webgl-translate-in-animation-ref.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>CSS Test: translate webgl canvas in an animation via set current time (ref).</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"/>
<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"/>
<script src="/common/reftest-wait.js"></script>
<style>
canvas {
will-change: transform;
transform: translate(150px);
}
</style>
<canvas id="canvas" width="150" height="150"></canvas>
<script>
async function runReference() {
const gl = canvas.getContext("webgl");
gl.clearColor(0.0, 1.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
requestAnimationFrame(takeScreenshot);
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference));
</script>
</html>

41
testing/web-platform/tests/css/css-transforms/animation/canvas-webgl-translate-in-animation.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>CSS Test: translate webgl canvas in an animation via set current time.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"/>
<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"/>
<link rel="match" href="canvas-webgl-translate-in-animation-ref.html"/>
<meta name="assert" content="canvas is translated by half the total distance"/>
<script src="/common/reftest-wait.js"></script>
<style>
@keyframes move {
to { transform: translate(300px); }
}
canvas {
will-change: transform;
animation: move;
animation-duration: 1s;
animation-timing-function: linear;
animation-play-state: paused;
}
</style>
<canvas id="canvas" width="150" height="150"></canvas>
<script>
async function runTest() {
const gl = canvas.getContext("webgl");
gl.clearColor(0.0, 1.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
requestAnimationFrame(() => {
document.getAnimations().forEach((animation) => {
animation.currentTime = 500;
});
takeScreenshot();
});
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
</script>
</html>

40
testing/web-platform/tests/css/css-view-transitions/set-current-time-transform-ref.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: set current time</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:vmpstr@chromium.org">
<script src="/common/reftest-wait.js"></script>
<style>
@keyframes move {
from {
transform: translate(500px);
}
}
#target {
width: 100px;
height: 100px;
contain: layout;
background: blue;
view-transition-name: target;
position: relative;
left: 100px;
animation-name: move;
animation-duration: 1s;
animation-timing-function: linear;
animation-play-state: paused;
}
</style>
<div id=target></div>
<script>
function runReference() {
document.getAnimations().forEach((animation) => {
animation.currentTime = 500;
});
takeScreenshot();
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference));
</script>

61
testing/web-platform/tests/css/css-view-transitions/set-current-time-transform.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: set current time</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:vmpstr@chromium.org">
<link rel="match" href="set-current-time-transform-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
:root { view-transition-name: unset; }
#target {
width: 100px;
height: 100px;
contain: layout;
background: blue;
view-transition-name: target;
position: relative;
}
.left {
left: 0;
}
.right {
left: 100px;
}
html::view-transition-group(*) {
animation: unset;
}
html::view-transition-old(*) {
animation: unset;
opacity: 0;
}
@keyframes move {
from {
transform: translate(500px);
}
}
html::view-transition-new(target) {
animation-name: move;
animation-duration: 1s;
animation-timing-function: linear;
animation-play-state: paused;
}
</style>
<div id=target class=left></div>
<script>
async function runTest() {
let transition = document.startViewTransition(() => target.classList.replace("left", "right"));
transition.ready.then(() => {
requestAnimationFrame(() => requestAnimationFrame(() => {
document.getAnimations().forEach((animation) => {
animation.currentTime = 500;
});
requestAnimationFrame(takeScreenshot);
}));
});
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
</script>