1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!DOCTYPE html>
<html class="reftest-wait reftest-no-flush">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!--
A test case for a transform animation frame is positioned by specifying
left property (i.e. not transform property) so that if we didn't factor the
offset (from the reference frame) in the jank mechanism, the animation will
jank at wrong positions.
-->
<style>
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
}
@keyframes anim {
0% { transform: translateX(0px); animation-timing-function: step-end; }
/* After 1s, translate to a position where it's still inside the pre-render */
/* area. */
/* The right edge of the pre-render area is 1162.5px (see below for the */
/* calculation) and there is `left: -200px` property, which mean */
/* translateX(-162.5px) is the point where a jank happens. But we don't */
/* want to cause a jank at the edge since it results blurry boundary */
/* between green and blue areas because the jank will happen at a point */
/* very close to -162.5px, e.g. -162.4px. */
/* So what we try to do here is that, compositing where jank will never */
/* happen with the left property value, then trying to composite where a */
/* jank will happen if the left (-200px) value is not properly handled in */
/* the jank mechanism because the horizontal pre-render range is */
/* [37.5px, 1162.5px] (see below the calculation) */
1% { transform: translateX(-150px); animation-timing-function: step-end; }
/* We have 100ms margin to avoid skipping this very keyframe */
1.1% { transform: translateX(-150px); animation-timing-function: step-start; }
/* Back to the original position where jank should NEVER happen if the left */
/* property is handled in the jank mechanism, jank should happen if the */
/* property is NOT handled */
100% { transform: translateX(0px); }
}
#target {
width: 1600px;
height: 1000px;
position: absolute;
left: -200px;
transform: translateX(0px);
}
</style>
<div id="target">
<!--
Put an SVG element so that the transform display item has a blob on
WebRender which means this test properly fails without the proper fix.
The pre-render area width is 1125px, thus the expanded area outside of the
visible area is 325px. The 325px width is expaned to both directions,
leftward and rightward. Meanwhile, the horizontal visible frame range is
[200px, 1000px] because of `left: -200px`, so the left edge of the
pre-render area is 37.5px (= 200 - 325/2), the right edge is 1162.5px
(= 1000 + 325/2).
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">
<rect fill="green" x="0" width="800" height="1000"></rect>
<rect fill="blue" x="800" width="362.5" height="1000"></rect>
<rect fill="red" x="1162.5" width="837.5" height="1000"></rect>
</svg>
</div>
<script>
document.addEventListener("MozReftestInvalidate", () => {
// We don't specify 1s delay here since the @keyframes rule has already
// a kind of like delay with step-end timing function, which means even if
// the animation was painted at 0.1s position due to a lag on the main-thread
// (it quite often happens on our CIs!), the initial animation value on the
// compositor should be still the first value translateX(0px).
target.style.animation = "anim 100s";
target.addEventListener("animationstart", () => {
// Wait two seconds to make sure we tried to composite translateX(0px).
setTimeout(() => {
document.documentElement.classList.remove("reftest-wait");
}, 2000);
});
}, { once: true });
</script>
</html>
|
