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
|
<!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>
<script src="/css/css-view-transitions/support/common.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());
});
}
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>
|
