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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- TODO update link -->
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/">
<title>Scope view transition capture</title>
</head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css">
.parent {
background-color: lightblue;
height: 200px;
width: 200px;
view-transition-name: parent;
position: relative;
}
.child {
background-color: blue;
height: 100px;
width: 100px;
view-transition-name: child;
position: absolute;
left: 50px;
top: 50px;
}
.sibling {
background-color: gray;
margin-top: 20px;
height: 200px;
width: 200px;
view-transition-name: sibling;
}
/* view transition pseudos */
::view-transition-group(*),
::view-transition-image-pair(*) {
animation: unset;
}
::view-transition-old(*) {
animation: -ua-view-transition-fade-out 1s paused;
}
::view-transition-new(*) {
animation: -ua-view-transition-fade-in 1s paused;
}
</style>
<body>
<div id="container"></div>
</body>
<script>
function createDiv(test, id, className) {
const element = document.createElement('div');
element.id = id;
element.className = className;
test.add_cleanup(() => {
element.remove();
});
return element;
}
function setupCaptureTest(test) {
const container = document.getElementById('container');
container.innerHTML = '';
const target1 = createDiv(test, 'target1', 'parent');
const target2 = createDiv(test, 'target2', 'child');
const target3 = createDiv(test, 'target3', 'sibling');
container.appendChild(target1);
target1.appendChild(target2);
container.appendChild(target3);
test.add_cleanup(() => {
document.getAnimations().forEach(a => a.cancel());
});
}
function assert_animations(target, filterFn, mappingFn, expected, message) {
const values = document.getAnimations()
.filter(filterFn)
.map(mappingFn)
.sort();
const format = entries => entries.join(", ");
assert_equals(format(values), format(expected), message);
}
function assert_animation_pseudos(element, expected, message) {
const filterFn = a => a.effect.target == element;
const mappingFn = a => a.effect.pseudoElement;
return assert_animations(element, filterFn, mappingFn, expected, message);
}
function assert_animation_names(target, expected, message) {
const filterFn = a => a.effect.pseudoElement == target;
const mappingFn = a => a.animationName;
return assert_animations(target, filterFn, mappingFn, expected, message);
}
promise_test(async t => {
setupCaptureTest(t);
const target = document.querySelector('.parent');
assert_true(!!target.startViewTransition,
'Missing scoped view transition support');
await target.startViewTransition({}).ready;
const expected_pseudos = [
'::view-transition-new(child)',
'::view-transition-new(parent)',
'::view-transition-old(child)',
'::view-transition-old(parent)'
];
assert_animation_pseudos(target, expected_pseudos,
'animations on target element pseudos');
assert_animation_pseudos(document.documentElement, [],
'no animations targeting pseudos on root');
assert_animation_pseudos(document.querySelector('.sibling'), [],
'no animations targetting pseudos on sibling');
assert_animation_pseudos(document.querySelector('.child'), [],
'no animations targetting pseudos on child');
assert_animation_names('::view-transition-old(child)',
['-ua-view-transition-fade-out'],
'fade out animation on old child');
assert_animation_names('::view-transition-old(parent)',
['-ua-view-transition-fade-out'],
'fade out animation on old parent');
assert_animation_names('::view-transition-new(child)',
['-ua-view-transition-fade-in'],
'fade in animation on new child');
assert_animation_names('::view-transition-new(parent)',
['-ua-view-transition-fade-in'],
'fade in animation on new parent');
}, 'View-transition pseudo elements created for correct element');
promise_test(async t => {
setupCaptureTest(t);
const parent = document.querySelector('.parent');
const sibling = document.querySelector('.sibling');
assert_true(!!parent.startViewTransition,
'Missing scoped view transition support');
await parent.startViewTransition({}).ready;
await sibling.startViewTransition({}).ready;
const expected_parent_pseudos = [
'::view-transition-new(child)',
'::view-transition-new(parent)',
'::view-transition-old(child)',
'::view-transition-old(parent)'
];
const expected_sibling_pseudos = [
'::view-transition-new(sibling)',
'::view-transition-old(sibling)'
];
assert_animation_pseudos(parent, expected_parent_pseudos,
'animations on parent element pseudos');
assert_animation_pseudos(sibling, expected_sibling_pseudos,
'animations on sibling element pseudos');
}, 'Capture with concurrent scoped view-transitions');
</script>
</html>
|
