[Web Animations] Update WPT tests related to Web Animations and remove imported Mozil...
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-transitions / Document-getAnimations.tentative.html
1 <!doctype html>
2 <meta charset=utf-8>
3 <title>Document.getAnimations() for CSS transitions</title>
4 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
5 <script src="/resources/testharness.js"></script>
6 <script src="/resources/testharnessreport.js"></script>
7 <script src="support/helper.js"></script>
8 <div id="log"></div>
9 <script>
10 'use strict';
11
12 test(t => {
13   assert_equals(document.getAnimations().length, 0,
14     'getAnimations returns an empty sequence for a document'
15     + ' with no animations');
16 }, 'getAnimations for non-animated content');
17
18 test(t => {
19   const div = addDiv(t);
20
21   // Add a couple of transitions
22   div.style.left = '0px';
23   div.style.top = '0px';
24   getComputedStyle(div).transitionProperty;
25
26   div.style.transition = 'all 100s';
27   div.style.left = '100px';
28   div.style.top = '100px';
29   assert_equals(document.getAnimations().length, 2,
30                 'getAnimations returns two running CSS Transitions');
31
32   // Remove both
33   div.style.transitionProperty = 'none';
34   assert_equals(document.getAnimations().length, 0,
35                 'getAnimations returns no running CSS Transitions');
36 }, 'getAnimations for CSS Transitions');
37
38 test(t => {
39   // Create two divs with the following arrangement:
40   //
41   //       parent
42   //    (::marker,)
43   //     ::before,
44   //     ::after
45   //        |
46   //       child
47
48   addStyle(t, {
49     '.init::after': 'content: ""; width: 0px; transition: all 100s;',
50     '.init::before': 'content: ""; width: 0px; transition: all 100s;',
51     '.change::after': 'width: 100px;',
52     '.change::before': 'width: 100px;',
53   });
54
55   const supportsMarkerPseudos = CSS.supports('selector(::marker)');
56   if (supportsMarkerPseudos) {
57     addStyle(t, {
58       '.init::marker': 'content: ""; color: red; transition: all 100s;',
59       '.change::marker': 'color: green;',
60     });
61   }
62
63   const parent = addDiv(t, { 'style': 'display: list-item' });
64   const child = addDiv(t);
65   parent.appendChild(child);
66
67   parent.style.left = '0px';
68   parent.style.transition = 'left 100s';
69   parent.classList.add('init');
70   child.style.left = '0px';
71   child.style.transition = 'left 100s';
72   getComputedStyle(parent).left;
73
74   parent.style.left = '100px';
75   parent.classList.add('change');
76   child.style.left = '100px';
77
78   const expectedTransitions = [
79     [parent, undefined],
80     [parent, '::marker'],
81     [parent, '::before'],
82     [parent, '::after'],
83     [child, undefined],
84   ];
85   if (!supportsMarkerPseudos) {
86     expectedTransitions.splice(1, 1);
87   }
88
89   const transitions = document.getAnimations();
90   assert_equals(
91     transitions.length,
92     expectedTransitions.length,
93     'CSS transition on both pseudo-elements and elements are returned'
94   );
95
96   for (const [index, expected] of expectedTransitions.entries()) {
97     const [element, pseudo] = expected;
98     const actual = transitions[index];
99
100     if (pseudo) {
101       assert_equals(
102         actual.effect.target.element,
103         element,
104         `Transition #${index + 1} has expected target`
105       );
106       assert_equals(
107         actual.effect.target.type,
108         pseudo,
109         `Transition #${index + 1} has expected pseudo type`
110       );
111     } else {
112       assert_equals(
113         actual.effect.target,
114         element,
115         `Transition #${index + 1} has expected target`
116       );
117     }
118   }
119 }, 'CSS Transitions targetting (pseudo-)elements should have correct order '
120    + 'after sorting');
121
122 promise_test(async t => {
123   const div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
124   getComputedStyle(div).left;
125
126   div.style.left = '100px';
127   const animations = div.getAnimations();
128   assert_equals(animations.length, 1, 'Got transition');
129   await animations[0].finished;
130
131   assert_equals(document.getAnimations().length, 0,
132                 'No animations returned');
133 }, 'Transitions are not returned after they have finished');
134
135 </script>