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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<title>Test for css-animations running on the compositor thread with
scroll-timeline and right to left writing mode</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<script src="/tests/gfx/layers/apz/test/mochitest/apz_test_utils.js"></script>
<script type="application/javascript" src="animation_utils.js"></script>
<style type="text/css">
@keyframes transform_anim {
from { transform: translateX(-100px) }
to { transform: translateX(-200px) }
}
html {
min-width: 100%;
padding-left: 100px;
direction: rtl;
}
.target {
/* The animation target needs geometry in order to qualify for OMTA */
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="display"></div>
<pre id="test"></pre>
</body>
<script type="application/javascript">
"use strict";
// Global state
var gDiv = null;
// Shortcut omta_is and friends by filling in the initial 'elem' argument
// with gDiv.
[ 'omta_is', 'omta_todo_is', 'omta_is_approx' ].forEach(function(fn) {
var origFn = window[fn];
window[fn] = function() {
var args = Array.from(arguments);
if (!(args[0] instanceof Element)) {
args.unshift(gDiv);
}
return origFn.apply(window, args);
};
});
// Shortcut new_div and done_div to update gDiv
var originalNewDiv = window.new_div;
window.new_div = function(style) {
[ gDiv ] = originalNewDiv(style);
};
var originalDoneDiv = window.done_div;
window.done_div = function() {
originalDoneDiv();
gDiv = null;
};
// Bind the ok and todo to the opener, and close this window when we finish.
var ok = opener.ok.bind(opener);
var todo = opener.todo.bind(opener);
function finish() {
var o = opener;
self.close();
o.SimpleTest.finish();
}
waitUntilApzStable().then(() => {
runOMTATest(function() {
var onAbort = function() {
if (gDiv) {
done_div();
}
};
runAllAsyncAnimTests(onAbort).then(finish);
}, finish);
});
//----------------------------------------------------------------------
//
// Test cases
//
//----------------------------------------------------------------------
// transform property with scroll-driven animations. The writing mode is from
// right to left, so we have to use the negative scroll offset.
addAsyncAnimTest(async function() {
new_div("animation: transform_anim 1s linear scroll(horizontal root);");
await waitForPaintsFlushed();
const root = document.scrollingElement;
const maxScroll = root.scrollWidth - root.clientWidth;
root.scrollLeft = -0.5 * maxScroll;
await waitForPaintsFlushed();
omta_is_approx("transform", { tx: -150 }, 0.1, RunningOn.Compositor,
"scroll transform animations should runs on compositor " +
"thread");
root.scrollLeft = 0;
done_div();
});
</script>
</html>
|
