[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 / events-002.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>CSS Transitions Test: transitionend event for implied property value</title>
6 <meta name="assert" content="Test checks that all transitionend events are triggered for implied property value">
7 <link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
8 <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
9
10 <script src="/resources/testharness.js" type="text/javascript"></script>
11 <script src="/resources/testharnessreport.js" type="text/javascript"></script>
12 <script src="./support/helper.js" type="text/javascript"></script>
13
14 </head>
15 <body>
16
17 <div id="log"></div>
18
19 <script>
20 promise_test(t => {
21   const div = addDiv(t, { style: 'transition: all .01s linear' });
22   getComputedStyle(div).paddingLeft;
23   div.style.paddingLeft = '10px';
24
25   const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
26   return watcher.wait_for('transitionend').then(evt => {
27     assert_end_events_equal(evt, 'padding-left', 0.01);
28   });
29 }, 'transition:all changing padding-left from nothing');
30
31 promise_test(t => {
32   const div = addDiv(t, { style: 'transition: all .01s linear' });
33   getComputedStyle(div).paddingLeft;
34   div.style.padding = '10px';
35
36   const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
37   return watcher.wait_for(Array(4).fill('transitionend'),
38                           { record: 'all' }).then(evts => {
39     assert_end_event_batch_equal(evts,
40                                  [ 'padding-bottom',
41                                    'padding-left',
42                                    'padding-right',
43                                    'padding-top' ],
44                                  0.01);
45   });
46 }, 'transition:all changing padding from nothing');
47 </script>
48 </body>
49 </html>