[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-005.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>CSS Transitions Test: transitionend event with property specificity</title>
6 <meta name="assert" content="Test checks that property specificity is properly resolved">
7 <link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
8 <link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
9 <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
10
11 <script src="/resources/testharness.js" type="text/javascript"></script>
12 <script src="/resources/testharnessreport.js" type="text/javascript"></script>
13 <script src="./support/helper.js" type="text/javascript"></script>
14
15 </head>
16 <body>
17
18 <div id="log"></div>
19
20 <script>
21 promise_test(t => {
22   const div = addDiv(t, {
23     style:
24       'transition: padding-left .01s, padding-left .02s;' +
25       'padding-left: 1px'
26   });
27   getComputedStyle(div).paddingLeft;
28   div.style.paddingLeft = '10px';
29
30   const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
31   return watcher.wait_for('transitionend').then(evt => {
32     assert_end_events_equal(evt, 'padding-left', 0.02);
33   });
34 }, 'property repetition');
35
36 promise_test(t => {
37   const div = addDiv(t, {
38     style:
39       'transition: padding .01s, padding-left .02s;' +
40       'padding-left: 1px'
41   });
42   getComputedStyle(div).paddingLeft;
43   div.style.paddingLeft = '10px';
44
45   const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
46   return watcher.wait_for('transitionend').then(evt => {
47     assert_end_events_equal(evt, 'padding-left', 0.02);
48   });
49 }, 'padding, padding-left');
50
51 promise_test(t => {
52   const div = addDiv(t, {
53     style:
54       'transition: padding-left .01s, padding .02s;' +
55       'padding-left: 1px'
56   });
57   getComputedStyle(div).paddingLeft;
58   div.style.paddingLeft = '10px';
59
60   const watcher = new EventWatcher(t, div, [ 'transitionend' ]);
61   return watcher.wait_for('transitionend').then(evt => {
62     assert_end_events_equal(evt, 'padding-left', 0.02);
63   });
64 }, 'padding-left, padding');
65 </script>
66 </body>
67 </html>